47일차 TIL 210512 ReactHook

1. Hook 이란?

  • Hook이란, 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.
  • useState와 같은 내장 Hook을 몇가지 제공한다.
  • Reach class 의 CDM/CDU/CWU 와 같은 목적으로 제공되지만 하나의 API 로 통합 된 것.
const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값);

1-1 Hooks 에 대하여 ⚓️

  • 함수형 컴포넌트에서 상태 사용하기
  • state, props에 종속되지 않고 개발자가 원하는 변수 변화에 따른 함수 실행이 가능하다. (뭔소리야)
  • useEffect 첫번째 인자만 있는 경우, CDM, CDU 를 합친 효과를 얻을 수 있다. // 컴포넌트의 변화가 있을 때 작성
  • useEffect 에 두 번째 인자가 있는 경우, 두번째 인자 외 다른 state 가 변하더라도 변하지 않는다.
  • useEffect, useState 외에도 다른 외장 함수는 많다.

2. Hook 사용 규칙

  • 최상위에서만 Hook를 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 실행하면 안된다.
  • Reaco 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

3. Side Effect

  • 함수 내에서 일어나지 않지만 함수에 영향을 미치는 것들
  • 내가 예상한대로 움직이지 않는 것 자체가 side effect

Updated: