CS Study/React (5) 썸네일형 리스트형 5. Effects 이제는 create-react-app을 사용한다. #index.html #useEffect 사용 경우에 따라 호출되는 함수를 지정할 수 있다! 아래 코드의 경우, runOnce라는 함수가 다른 컴포넌트이 변화와 상관없이 한 번만 호출됨(dependency가 없기 때문) import {useState, useEffect} from "react"; function App() { const [counter, setValue] = useState(0);//state가 변경될 때 마다 re-render const onClick = () => setValue((prev)=>prev + 1); console.log("I run all time"); const runOnce = () =>{//한번만 render될 함수.. 4. Props #Props를 사용하지 않았을 때 두 가지 버튼 컴포넌트를 만들고 각각의 css 프로퍼티를 형성함 #Props를 사용할 때 하나의 버튼 컴포넌트만 만들어주고 App컴포넌트의 두 가지 버튼에 각각 다른 Props를 부여함. 이때 Props는 객체이다. 아래 코드 경우, Btn은 {text : value, onClick : revertValue} 라는 Props 객체를 받고 있음. #PropTypes 사용 Prop들의 자료형(type)을 미리 정해줌으로써 개발자의 실수를 방지함. 또한 isRequired를 통해 컴포넌트에게 필요한 Props들이 넘어갔는지 console창에서 확인할 수 있다. #React.Memo() 사용 컴포넌트의 state가 변화할 때마다 모든 컴포넌트가 항상 re-render됨. -> .. 3. State #state를 적용 안했을 때 #State를 활용한 일반단위변환기 flip 버튼을 클릭하기 전엔 시간을 분으로 바꿔주고, flip 버튼을 클릭하면 분을 시간으로 바꿔준다. reset 버튼을 클릭하면 모든 값이 0이 된다. #State를 활용한 복합단위변환기 선택된 option에 따라 MinutesToHours / KmToMiiles 컴포넌트 호출 각각의 컴포넌트 동작원리는 일반단위변환기와 같습니다. 2. JSX 1. 브라우저가 JSX를 babel로 번역해서 JS로 알아듣게 하기 //JSX로 작성 1. 왜 React 인가? 혼자 HTML, CSS, Javascript를 공부해보면서 어느정도 기본적인 기능들을 공부해왔었습니다. 이 3가지 도구만 이용하여 웹 프로그래밍을 했었기 때문에, 딱히 불편함(?)을 느끼지 못했었습니다...(깊게 공부를 안해서 그랫나.. 쨋든) 그러다가 Javascript를 공부한지 얼마 안되었을 때, 유튜브나 주변 매체에서 react라는 것을 접하게 되서 나무위키나 이런 데서 조금 찾아봣었습니다 ㅋㅋㅋㅋ. 그 때는, 웹 개발자가 좀 더 쉽고 빠르게 프로그래밍할 수 있게 하는 Javascript 라이브러리? 정도로 이해했었습니다. 그래서 일단 웹의 3신기(HTML, CSS, Javascript) 다 공부해보고, React도 공부해봐야겠다는 생각을 했었는데, 이제 슬슬 시작할 때가 된 것 같네요.. #Wh.. 이전 1 다음
