[React] Hooks

React

[React] Hooks

gaongg 2024. 10. 10. 19:56

📑React Hook 이란??

리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리다.
함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.

📑Hook의 규칙

📍최상위에서만 Hook을 호출해야 한다.

호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수 있어 오류가 발생할 수 있다.

📍리액트 함수 내에서만 Hook을 호출해야한다.

일반적인 js 함수에서는 호출하면 안되며 함수형 컴포넌트나 커스텀 훅에서는 호출이 가능하다.

📑자주 사용하는 Hook

📍useState

useState는 상태를 관리하는 훅으로 아래와 같은 특징이 있다.

함수형 컴포넌트 안에 state를 추가하여 사용한다.
현재 상태를 나타내는 state값과 이 상태를 변경하는 setstate값을 한 쌍으로 제공한다.
state는 초기값을 설정할 수 있으며, 초기값은 첫 렌더링 때 한번 사용된다.
state는 객체일 필요 없이 문자열, 숫자, boolean, 배열, null , 객체 등의 여러가지 다양한 값을 넣을 수 있다.

import React, { useState } from 'react';

function Counter() {
    // count라는 상태 변수와 count를 업데이트하는 함수 setCount를 정의
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                카운트 증가
            </button>
        </div>
    );
}

export default Counter;

-useState(0)를 호출하여 count라는 상태 변수를 생성하고, 초기값을 0으로 설정
-useState는 두 개의 요소가 담긴 배열을 반환
1.첫 번째 요소는 현재 상태 값인 count.
2.두 번째 요소는 상태를 업데이트하는 함수인 setCount.
-버튼을 클릭할 때마다 setCount를 호출해 count 값을 1씩 증가시킴
-React는 count 값이 업데이트되면 컴포넌트를 다시 렌더링하여 최신 count 값을 표시

📍useEffect

useEffect는 기존 클래스형 컴포넌트에서 사용했던 componentDidMount, componenetDidUpdate, componentWillUnmount를 하나로 통합한 것으로 아래와 같은 특징이 있다.

기본적으로 useEffect(function,deps)의 형태를 사용한다.
function에는 실행시킬 함수를 넣고 deps에는 의존성 배열을 담는다.
의존성 배열에 어떤 것이 담기느냐에 따라 부수적인 효과 함수가 실행된다.

1. 의존성 배열이 없이 useEffect를 실행시키는 경우 페이지가 렌더링 될 때마다 데이터를 불러온다.

import React from 'react';

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
});

2. 의존성 배열에 빈배열을 담아주게 될 경우에는 첫 렌더링 시에만 함수를 실행한다.

import React from 'react';

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
}, []);

3. 의존성 배열에 state값이나 props로 상속받은 데이터값 등은 담아주게 되면 해당값이 변할때마다 함수를 실행한다.

import React from 'react';

const [page, setPage] = React.useState(1)

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
}, [page]);

📍useMemo

useMemo는 컴포넌트의 성능을 최적화하는데 사용된다.

메모이제이션 된 값을 반환하는 함수로 deps에 변화가 생기면, 내부에 정의된 콜백 함수를 실행하고 그 함수를 반환하게 된다.

import React, { useState, useCallback, useMemo } from "react";

export default function App() {
  const [buttonX, setButtonX] = useState(0);
  const [buttonY, setButtonY] = useState(0);
  
  const handleButtonX = () => {
    setButtonX((prev) => prev + 1)
  };
  
  const handleButtonY = () => {
    setButtonY((prev) => prev + 1)
  };
  
  useMemo(() => {console.log(buttonX)}, [buttonX]);

  return (
    <>
      <button onClick={handleButtonX}>X</button>
      <button onClick={handleButtonY}>Y</button>
    </>
  );

useMemo의 deps가 buttonX이기 때문에 X 버튼을 누를때만 console.log(buttonX)가 실행되게 된다.
Y 버튼을 눌러도 함수 컴포넌트는 리렌더링되지만, buttonX 값은 변하지 않기 때문에 useMemo의 변화가 없게 되는 것이다.

📍useCallback

useCallback은 useMemo와 다르게 값이아닌 함수를 반환하는 함수이다.

import React, { useState, useCallback, useMemo } from "react";

function App() {
  const [buttonX, setButtonX] = useState(0);
  const [buttonY, setButtonY] = useState(0);
  
  const handleButtonX = () => {
    setButtonX((prev) => prev + 1)
  };
  
  const handleButtonY = () => {
    setButtonY((prev) => prev + 1)
  };
  
  const returnUseCallback = useCallback(() => {console.log(buttonY)}, [buttonX]);
  
  returnUseCallback();
    
  return (
    <>
      <button onClick={handleButtonX}>X</button>
      <button onClick={handleButtonY}>Y</button>
    </>
  );
}

export default App;

- useCallback 구문은 () => {console.log(buttonY)} 라는 함수를 반환하지만, deps인 buttonX의 변화가 생길때만 반환되게 된다.
- Y 버튼을 계속 누른다고 해도 X 버튼을 누르지 않으면 () => {console.log(0)}의 함수가 반환되고, X 버튼을 누를때에 Y값을 가져와 () => {console.log(새로운값)}이 반환되게 된다.
- useCallback은 함수와 상관없는 상태 값이 변할 때, 함수 컴포넌트에서 불필요한 업데이트가 일어나는 것을 방지해 준다.

이 외에도 많은 훅의 종류가 있다고 하여 다음엔 이 글에 이어서 다른 훅을 정리해보려고 한다!