1. Hooks란?

• 리액트 v16.8에 새로 도입된 기능이다.
• 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState , 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다.

2. useState

• 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다.
• useState 함수의 파리미터에 상태의 기본값을 준다.
• useState 함수는 호출되면 배열을 반환한다.
• 반환하는 배열의 첫번째 요소는 상태 값, 두번째 요소는 상태를 설정하는 함수다.

• useState 는 하나의 상태 값만 관리할 수 있다.
• 여러개의 state 를 관리해야할 경우 usestate 를 여러번 사용해도 된다.
• 위 코드처럼 state 를 객체로 관리하여 여러 Input 의 값을 하나의 useState 로 관리하는 방법도 있다.

3. useEffect

• useEffect 는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있다.
• 클래스형 컴포넌트의 라이프사이클 메소드 중 componentDidMount 와 componentDidUpdate 를 합친 형태로 볼 수 있다.
• 위 이미지처럼 렌더링 될 때마다 useEffect 함수에 설정한 console.log 가 실행되는 것을 알 수 있다.
• 마운트될 때 만 실행하고 싶으면 useEffect 함수의 두번째 인자로 빈배열을 넣어주면 된다.

3-1. 특정 값이 업데이트 될 때

• 특정 값이 변경될 때만 호출하고 싶다면 useEffect 함수의 두번째 인자로 전달되는 배열안에 검사하고 싶은 state 나 props 로 전달된 값을 넣어주면 된다.
• 위 이미지처럼 myInput 의 값이 변경될 때만 콘솔이 출력된다.

3-2. 뒷정리하기

• 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶다면 useEffect 함수에서 뒷정리 함수를 반환해주면 된다.
• 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여준다.
• useEffect 의 두번째 인자로 빈배열을 넣어주면 언마운트될 때만 뒷정리 함수가 실행된다.

4. useReducer

• useReducer 함수는 useState 보다 더 다양한 컴포넌트 상황에서 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용한다.
• 현재 상태, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환한다.
• 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야한다.

4-1. 카운터 예시

• 첫번째 인자에는 리듀서 함수를 넣고, 두번째 인자로 기본값을 넣어준다.

• state 는 현재 가리키고 있는 상태, dispatch 는 액션을 발생시키는 함수다.

• 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 장점이 있다.

5. useMemo

• useMemo 함수를 사용하면 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

👉 useMemo 사용전

• onChange 이벤트 때문에 입력할 때마다 평균값을 계산하는 불필요한 연산이 실행된다.

👉 useMemo 사용후

• 두번째 인자로 들어갈 배열의 요소로 특정 값을 넣어주면 해당 값이 바뀌었을 때만 연산을 실행한다.

6. useCallback

• useCallback 은 주로 렌더링 성능을 최적화에 사용한다.
• 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야할 컴포넌트의 개수가 많아질때 최적화해주는 것이다.
  
  

• 두번째 인자에 빈배열을 넣은 onChange 함수는 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용한다.
• 배열 안에 요소를 넣게 되면 해당 요소의 값이 변경됐을 때 새로 만들어진 함수를 사용하게 된다.

7. useRef

 const InputEl = useRef(null);

<input type="text" value={number} onChange={onChange} ref={InputEl} />

• useRef 를 통해 만든 객체 안의 current 값은 실제 엘리먼트를 가리킨다.