- 리랜더링

바닐라js에서는 변경으로 인해 element를 다시 그리고,
React 에서는 변경된 부분만 다시 그림

리액트의 앨리먼트는 불변 객체
변경 사항 반영 리액트에게 일임 (리액트의 알고리즘)

• 리액트의 비교: reconciliation
  virtual DOM를 비교하여 리랜더링 함

• 이벤트 핸들러
  JS: on{event} or addEventLister
  React: on{Event} (case 주의)

Object.assign 객체 내용 복사
전역 변수 변경 -> ReactDOM.render (render 호출)

- 컴포넌트

화면의 구성요소로 앨리먼트의 집합
useState : react가 제공해주는 컴포넌트속 엘리먼트 상태를 관리해주는 hook
useState에 기본값을 넣어주면 배열로된 두가지 값이 밖으로 나오는데,
state와 setstate(state지정해주는 함수)

- 사이드이펙트

부수 효과
특정값이 바뀔때 어떠한 행동을 하고 싶다
그 행동은 값에 변화에 따른 사이드이펙트로 하고 싶을때,
useEffect를 사용
그 값은 배열의 형태로 지정할 수 있고 dependency array라 칭함.

dependency array를 정해두지 않으면 모든 변화에 사이드이펙트가 발생하고,
dependency array를 empty array로 정하면 첫 변화에만 작동하게 됨.

- custom hook

반복되는것을 함수로 만들듯,
훅들이 반복되면 custom hook를 만듬.
use+ camelCase 이용

hook flow

hook들의 flow(호출) 타이밍
setState시 prev이 주입됨
ex)

function handleClick() {
  setShow((prev) => !prev);
}

// prev가 true 면 false를
// prev가 false 면 true를

useEffect는 render가 끝난후 실행
update시 useEffect clean up -> useEffect

App render start -> App useState -> App render End -> useEffect

값 변경시
App render start -> App render End ->
Child render start -> Child useState -> Child render end ->
Child useEffect -> App useEffect
(cleanup은 useEffect가 실행되기 직전되고, 부모의 useEffect가 먼저 실행됨.)