20. React의 Hooks 총정리!

useState : 상태를 관리

컴포넌트에서 가변적인 상태를 지니고 있을 때, 상태를 관리하고 싶을 때 사용한다.

const [value, setValue] = useState(0);

이 함수가 호출되고 나면 배열을 반환하는데, 첫 번째 원소는 상태 값이고, 두 번째 원소는 상태를 설정하는 함수이다.

 

useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정

# useEffect 는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터에 무엇을 넣느냐에 따라 실행 조건이 달라진다.

(1) 마운트 될 때만 실행하고 싶으면, 두 번째 파라미터로 비어있는 배열을 넣어준다.

(2) 특정 값이 변경될 때만 호출하고 싶으면, 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어준다.

배열 안에는 useState를 통해 관리하고 있는 상태 혹은 props로 전달받은 값을 넣어줘도 된다.

 useEffect(() => {
    console.log(name);
  }, [name]);

# 컴포넌트가 언마운트되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 뒷정리(cleanup) 함수를 반환해주면 된다.

  useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  });

# 컴포넌트가 언마운트 될 때만 뒷정리 함수를 호출하고 싶으면 useEffect 함수의 두 번째 파라미터에 비어있는 배열을 넣으면 된다.

  useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  }, []);

 

 

useContext : 함수형 컴포넌트에서 Context 를 더 쉽게 사용할 수 있게 해준다.

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('black');
const ContextSample = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: '24px',
    height: '24px',
    background: theme
  };
  return <div style={style} />;
};

export default ContextSample;

 

useReducer : 컴포넌트에서 다양한 상황에 따라 다양한 상태를 업데이트할 때 사용 (useState 보다)

※ 리듀서 : 현재 상태와, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수

(Redux 에서 액션 객체에는 어떤 액션인지 알려주는 type 필드가 꼭 있어야 하지만, useReducer 에서 사용하는 액션 객체는 제한이 없다. type도 없어도 되고, 객체가 아닌 문자열/숫자 등등도 가능)

 

useMemo : 렌더링 과정에서 특정 값이 바뀌었을 때에만 연산을 실행하고,
원하는 값이 바뀐 것이 아니라면 이전에 연산했던 결과를 재사용

# useMemo의 첫 번째 파라미터는 어떻게 연산할지 정의하는 함수를, 두 번째 파라미터는 deps 배열을 넣어주면 된다.

이때 이 deps 배열의 내용이 바뀌면 등록한 함수를 호출해서 연산해주고, 바뀌지 않았으면 이전에 연산한 값을 재사용하는 것이다.

 

useCallback : 특정 함수를 만들지 않고 재사용

# useCallback은 useMemo 와 비슷한 Hook 인데

useMemo는 특정 결과 값(숫자/문자열/객체)을 재사용, useCallback은 특정 함수를 새로 만들지 않고 재사용하는데에 사용된다.

 

useRef : 컴포넌트에서 조회 및 수정을 할 수 있는 변수를 관리

# 컴포넌트 로컬 변수(렌더링과 관계없이 바뀔 수 있는 값)를 사용할 때도 useRef 를 사용한다.

---

출처 : https://velog.io/@velopert/react-hooks

리액트의 Hooks 완벽 정복하기