[React] 리액트 훅, 리액트를 함수로 분석하기

State Hook

: 사용자 입력과 같은 변하는 정보를 기억할 수 있는 훅

useState

직접 업데이트 할 수 있는 state 변수를 선언

 

useReducer

reducer 함수 내부의 업데이트 로직을 사용해 state 변수를 선언

 

 

Effect Hook

: 컴포넌트를 외부 시스템에 연결하고 동기화할 수 있게 함

데이터 흐름을 조정하기 위해 사용하지 않아야 함! (이런 경우는 state hook 사용)

 

main.jsx -> 컴포넌트를 실행하는 엔트리포인트 (비트가 가장 먼저 실행하는 함수)

 

 

리액트 함수로 이해하기

<App/>은 {App()}과 같다!

App()은 App이라는 함수의 결과값으로 치환되는데, 함수형 컴포넌트의 반환값은 하나의 태그로 감싸진 태그들이다

function ComponentEx() {
  return(
    <>
      <h1>제목</h1>
      <div>~~~</div>
    </>
  );
}

 

setState 내부에 많은 동작이 있겠지만 리렌더링 되는 이유는 setState를 호출하면 setState를 호출한 컴포넌트 함수를 다시 호출하는 동작 때문이다.

 

즉, App()에서 선언돼있는 setState를 호출하는 경우 App()을 다시 호출하기때문에 리렌더링 되는 것이다. 또한 App()을 호출하면서 App()의 자식 컴포넌트들도 모두 다시 호출하게 되는데, 이것이 setState가 부모에 있고 setState를 props로 넘겨서 자식 컴포넌트에서 호출하면 상위컴포넌트의 모든 자식들이 리렌더링 되는 이유다!

 

state가 업데이트되면 왜 두번씩 실행될까? -> strict 모드의 react dev 에선 2번 마운트하기 때문이다 (빌드하면 한번만)

 

(여기 이후 부분 영상 올라오면 다시 확인해보기!)

useEffect 실행

1) 의존성배열의 값들이 이전 시행과 같은지 확인

2) 다른 경우 callback 호출 -> 첫번째 실행때는 비교할 값이 없으니 콜백 호출해줌

 

cleanup 함수, 이전 컴포넌트

 

커스텀 훅

내부에서 훅을 사용하는 함수