useState

게으른 초기화

• useState의 초기값에 일반 원시 값이 아닌 함수를 넣어준다.

• 언제 사용하는데?

  • 초기값이 복잡하거나, 무거운 연산을 포함하고 있을 때 사용하라고 돼 있다.
  • 게으른 초기화 함수는 오로지 state가 처음 만들어질 때만 사용된다. 이후 리렌더링시에는 실행되지 않는다;

  <aside> 👶🏼 localStorage, sessionStorage에 대한 접근, map, filter, find와 같은 배열에 대한 접근, 초기값계산을 위해 함수 호출이 필요할때와 같이 무서운 연산을 포함해 실행 비용이 많이 드는 경우.

  </aside>

useEffect

• class 컴포넌트의 생명주기 메서드(componentDidMount)를 대체하기 위해 만들어진 훅도 아니다.

• useEffect의 정의를 정확하게 내린다면

  <aside> 👶🏼 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘

  </aside>

  <aside> 👶🏼 이 부수효과가 “언제”일어나는지보다 어떤 상태값에 의해 함께 실행되는지 살펴보는게 중요!

  </aside>

• 전제 조건 : 함수형 컴포넌트는 렌더링 시마다 고유의 state와 props를 가지고 있다.

  • useEffect는 렌더링할때마다 의존성(배열)에 있는 값을 보면서 이 의존성의 값이 이전과 다른게 하나라도 있으면, 콜백 함수를 실행하는 평범한 함수이다.
  • 다시 말해, 해당 컴포넌트의 state나, props의 변화 속에 일어나는 렌더링 과정에서 실행되는 부수 효과 함수라고 볼 수 있다.

• 특정 props와 state에 기반한 부수효과를 실행시키기 위해 존재하는 훅

useEffect의 Clean-up 함수

• 클린업 함수는 이전 state를 참조해서 실행된다!
• 새로운 값을 기반으로한 렌더링뒤에 실행되지만, 이 변경된 새로운 값이 아닌, 이전 값을 보고 실행된다.
• 이벤트 핸들러를 보통 지울때쓰는데, 다시 설명하자면 이벤트를 추가하기 전에 이전에 등록했던 이벤트 핸들러를 삭제하는 코드를 클린업 함수에 추가하는 것 ⇒ 특정 이벤트의 핸들러가 무한히 추가되는 것을 방지한다.
  • 이전 렌더링때 붙여놓았던 이벤트 핸들러를 지우고 다음렌더링때 새로운 이벤트 핸들러를 부착시키는거임.
• 생명주기 메서드의 언마운트 개념과는 조금 차이가 있다. 오히려 이전 상태를 청소해 주는 개념으로 보는게 맞다.

의존성 배열