TIL28-03 React Hooks

useState

1. useSate
   정의 : 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다.
2. 함수형 업데이트

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

• setNumber 여러개 있다면 각각 실행하는게 아니고, 배치(batch)로 처한다. 즉 우리가 onClick을 했을 때 setNumber 라는 명령을 각각 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행**을 시킨다. 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행된다.
• 반면에 함수형 업데이트 방식은 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킨다.
• 불필요한 리-렌더링을 방지(렌더링 최적화)하기 위해 즉, 리액트의 성능을 위해 한꺼번에 state를 업데이트 한다.

useEffect

1. useEffect

• useEffect의 사용 : useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때(mount) 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때(unmount) 무언가를 실행하고 싶다면? useEffect를 사용한다.
• 컴포넌트가 렌더링 될 때 실행된다. 이게 바로 useEffect 핵심 기능이다.

2. 의존성 배열

• 의존성 배열이은 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다” 라는 의미를 가진다.
• 의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.
• 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 된다.

useRef

1. useRef란?

• DOM 요소에 접근할 수 있도록 하는 React Hook이다.

2. useRef의 사용

• ref 값은 컴포넌트가 계속해서 렌더링 되어도 unmount 전까지 값을 유지한다.
  (1) 저장공간
  - state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 된다.
  - ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.
  (2) Dom
  - Dom 요소에 접근할 때 사용한다.

useContext

• 부모컴포넌트와 자식컴포넌트 사이를 props를 사용해 데이터 전달이 이루어졌다. 하지만 그 깊이가 깊어지면 어떤 컴포넌트로부터 왔는지 파악이 어려워진다.
• 그래서 등장한 것이 바로 reac context API다. useContext hook을 통해 전역 데이터를 관리할 수 있다.
• context API 필수 개념
  • createContext : context 생성
  • Consumer : context 변화 감지
  • Provider : context 전달(to 하위 컴포넌트)
• useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다. 따라서 value 부분을 항상 신경써야한다.