[요약]

• 질문: useEffect 로 componentDidMount 동작을 흉내내려면 어떻게 하지?

  • 빈배열을 두번째 인자로 넣으면 된다 CDM이랑 비슷하긴 하지만 초기 값을 묶어놓는다는 차이점이 있다

• 질문: useEffect 안에서 데이터 페칭은 어떻게 해야할까? 두번째 인자로 오는 배열([]) 은 뭐지?

• 질문: 이펙트를 일으키는 의존성 배열에 함수를 명시해도 되는걸까?

  • props 나 state 를 쓰지 않는 함수는 컴포넌트 바깥에 선언
  • 이펙트 안에서만 사용되는 함수는 useEffect안에서만 선언
  • 렌더범위 안에 있는 함수를 의존성을 써야할때는 useCallback으로 감싸기

• 질문: 왜 가끔씩 데이터 페칭이 무한루프에 빠지는걸까?

  • 두번째 인자에 배열을 전달 안했을때
  • 변하는 값때문에 생기는 무한루프 문제는 useCallback 을 써서 해결가능하다

• 질문: 왜 가끔씩 이펙트 안에서 이전 state나 prop 값을 참조할까?

  • 이펙트는 자신이 정의된 블록 안에서 렌더링이 일어날시 prop과 state를 그냥 지켜본다
    • 버그 방지는 되지만 짜증난다
  • 의존성 배열을 지정하면 변한 state와 prop 참조 계속 가능하다

[매 렌더마다 고유의 prop과 state값을 가진다]

[매 렌더마다 고유의 이벤트 핸들러를 가진다]

• 각 이벤트는 고유한 버전의 이벤트 핸들러를 가지게 되고 고유한 state를 기억하게된다

[매 렌더마다 고유의 이펙트를 가진다]

• 같은 useEffect 함수라도 각 렌더마다 다 다른 함수가 실행된다

  [렌더링 예]

  • 리액트: state가 0 일 때의 UI를 보여줘.
  • 컴포넌트
    • 여기 랜더링 결과물로 <p>You clicked 0 times</p> 가 있어.
    • 그리고 모든 처리가 끝나고 이 이펙트를 실행하는 것을 잊지 마: () => { document.title = 'You clicked 0 times' }.
  • 리액트: 좋아. UI를 업데이트 하겠어. 이봐 브라우저, 나 DOM에 뭘 좀 추가하려고 해.
  • 브라우저: 좋아, 화면에 그려줄게.
  • 리액트: 좋아 이제 컴포넌트 네가 준 이펙트를 실행할거야.
    • () => { document.title = 'You clicked 0 times' } 를 실행하는 중.

  ---

  버튼 클릭시

  • 컴포넌트: 이봐 리액트, 내 상태를 1 로 변경해줘.
  • 리액트: 상태가 1 일때의 UI를 줘.
  • 컴포넌트
    • 여기 랜더링 결과물로 <p>You clicked 1 times</p> 가 있어.
    • 그리고 모든 처리가 끝나고 이 이펙트를 실행하는 것을 잊지 마: () => { document.title = 'You clicked 1 times' }.
  • 리액트: 좋아. UI를 업데이트 하겠어. 이봐 브라우저, 나 DOM에 뭘 좀 추가하려고 해.
  • 브라우저: 좋아, 화면에 그려줄게.
  • 리액트: 좋아 이제 컴포넌트 네가 준 이펙트를 실행할거야.
    • () => { document.title = 'You clicked 1 times' } 를 실행하는 중.

[매 렌더는 고유의 모든 것을 가진다]

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      console.log(`You clicked ${count} times`);
    }, 3000);
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// 순차적으로 누를시 1 2 3 4 5 이렇게 뜬다

...
componentDidUpdate() {
  setTimeout(() => {
     console.log(`You clicked ${this.state.count} times`);
  }, 3000);
}
...

// 순차적으로 누를시 5 5 5 5 5 이렇게 뜬다
// this.state.count 는 언제나 최신의 값을 가리킨다

// 클래스형 컴포넌트는 전통적으로 타임아웃에서 잘못된 값을 가져오는 문제가 있다
// 이런 차이가 생기는 이유는 클로저 자체의 문제가 아닌 가변값 변경(mutation)이다
// 클래스형 컴포넌트에서는 this.state 가 최신 상태를 가리키도록 변경한다
// 클로저는 접근하려는 값이 절대 바뀌지 않을 때(상수) 유용하다
// 훅은 클로저에 많이 의존을한다

[흐름을 거슬러 올라가기]