useState

혜얌·2024년 6월 10일

React

목록 보기

6/9

React는 UI를 구성하는 가장 인기 있는 라이브러리 중 하나이다. 2019년 React 16.8 버전부터 새롭게 추가된 기능인 Hooks는 함수형 컴포넌트에서도 상태와 생명주기 기능을 사용할 수 있게 해준다. 이번 포스트에서는 React Hooks의 기본 개념부터 실제 사용 예제까지 다뤄보겠다.

React Hooks란?

React Hooks는 함수형 컴포넌트에서 상태와 생명주기 메서드를 사용할 수 있게 해주는 기능이다. Hooks를 사용하면 클래스 컴포넌트를 사용하지 않고도 상태 관리를 할 수 있으며, 코드가 더 간결하고 이해하기 쉬워진다.

기본 Hooks 소개

useState

useState는 함수형 컴포넌트에서 상태를 추가할 수 있게 해주는 Hook이다. 다음은 useState를 사용하는 예제이다.

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수와 count를 갱신할 setCount 함수를 선언한다.
  const [count, setCount] = useState(0);

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

export default Counter;

여기서 주의할 것은 onClick 안에 함수를 호출하면 안된다.
즉 onClick={plusnumber()} 하면 안되는데, 이렇게 호출을 하면 화면이 렌더링 될 때 원치않게 호출되기 때문이다.

위 예제에서 useState는 상태 변수 count와 상태를 갱신하는 함수 setCount를 반환한다. 버튼을 클릭하면 setCount가 호출되어 count가 1 증가한다.

useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 해주는 Hook이다. 예를 들어, 데이터 fetch, 구독 설정, 수동으로 React 컴포넌트의 DOM을 조작하는 작업을 수행할 수 있다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 브라우저 API를 사용하여 문서 타이틀을 업데이트한다.
    document.title = `You clicked ${count} times`;

    // cleanup 함수를 반환하여 컴포넌트가 언마운트될 때 실행된다.
    return () => {
      console.log('Clean up');
    };
  }, [count]); // count가 변경될 때마다 effect를 실행한다.

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

export default Example;

위 예제에서 useEffect는 count가 변경될 때마다 실행된다. 또한, useEffect 내부에서 반환된 함수는 컴포넌트가 언마운트될 때 실행되어 리소스를 정리(clean up)한다.

추가 Hooks

useContext

useContext는 Context API와 함께 사용하여 컴포넌트 트리 전체에 데이터를 전달할 수 있게 해준다.

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);
  return <div>Context Value: {value}</div>;
}

function App() {
  return (
    <MyContext.Provider value="Hello, World!">
      <MyComponent />
    </MyContext.Provider>
  );
}

export default App;

위 예제에서 useContext를 사용하여 MyContext의 값을 읽어와 MyComponent에서 사용할 수 있다.

useReducer

useReducer는 상태 업데이트 로직을 컴포넌트 외부로 분리하고 싶을 때 사용하는 Hook이다. 보통 Redux와 같은 상태 관리 라이브러리에서 사용하는 패턴과 유사하다.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

위 예제에서 useReducer를 사용하여 상태와 상태를 갱신하는 로직을 정의한다. dispatch 함수를 통해 액션을 전달하여 상태를 업데이트한다.

커스텀 Hooks

커스텀 Hook을 사용하면 로직을 재사용할 수 있다. 예를 들어, window의 크기를 추적하는 커스텀 Hook을 만들어보겠다.

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

export default useWindowSize;

이제 이 커스텀 Hook을 컴포넌트에서 사용할 수 있다.

import React from 'react';
import useWindowSize from './useWindowSize';

function App() {
  const size = useWindowSize();

  return (
    <div>
      <p>Window width: {size.width}</p>
      <p>Window height: {size.height}</p>
    </div>
  );
}

export default App;