리액트 요약

빌드도구

브라우저는 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이다.

JSX 주의 사항항

1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.

• 여기서 표현식이란 하나의 값으로 표현되는 형태를 말한다.

2. 숫자, 문자열, 배열 값만 렌더링 된다.
3. 모든 태그는 닫혀있어야 한다.
4. 최상위 태그는 반드시 하나여야만 한다.

React 대원칙

1. 화면에서 바뀌는 데이터를 상태(state)로 만들자
2. 반복 사용되는 것을 컴포넌트로 만들자
3. 비슷한데 다른 부분을 props로 만들자
4. 화면은 미리 다 만들어두고 보였다 안보였다 한다

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])