리액트 요약
빌드도구
ㅂ라우저는 jsx 파일을 읽을 수 없음 > 그래서 빌드 도구가 필요함
- vite
npm create vite@latest- cra(create react app)
npx create-react-app [프로젝트명]빌드도구가 동작하는 원리
cra에만 해당되는 설명인지는 잘 모르겠지만
public/index.html에는 root가 있는데 src 폴더에 있는 파일들을 합쳐서 id가 root인 div에 넣어주는 역할을 한다.
Component
함수를 Component라고 하는데 가장 메인이 되는 Component는 App이다.
React 대원칙
- 화면에서 바뀌는 데이터를 상태(state)로 만들자
- 반복 사용되는 것을 컴포넌트로 만들자
- 비슷한데 다른 부분을 props로 만들자
- 화면은 미리 다 만들어두고 보였다 안보였다 한다
useEffect
마운트될 때마다 공통적으로 실행되는 함수, 그리고 그 이후의 실행에 대해서는 조건에 따라서 다르게 실행이 된다.
useEffect(() => {
console.log('마운트 될 때만 실행됩니다.')
}, [])
useEffect(() => {
console.log('특정 값이 업데이트 될 때만 실행됩니다.')
}, [특정 값])
useEffect(() => {
console.log('특정 값1, 2 둘 중 하나가 업데이트 될 때만 실행됩니다.')
}, [특정 값1, 특정 값2])
useEffect(() => {
console.log('마운트 될 때만 실행됩니다.')
})clean up
useEffect(() => {
console.log('마운트 될 때만 실행됩니다.')
return () => {
console.log('언마운트 될 때 실행됩니다.')
}
}, [])
useEffect(() => {
console.log('todo가 바뀔 때만 실행됩니다.')
return () => {
console.log('todo가 바뀌기 직전에 실행됩니다.')
}
}, [todo])