React 함수 간단 정리

 useState: 상태(state) 관리를 위해 사용되는 함수로, 함수 컴포넌트에서 상태를 추가하고 변경할 수 있게 해줍니다. useState 함수는 배열을 반환하며, 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태 값을 갱신하는 함수입니다.

 

 

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

 

 

 useEffect: 부작용(side effect) 처리를 위해 사용되는 함수로, 컴포넌트 렌더링 후에 실행됩니다. 주로 데이터 가져오기, 구독 설정, 타이머 등에 사용됩니다.

 

 

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

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 데이터 가져오는 로직
    fetchData().then((response) => {
      setData(response.data);
    });
  }, []); // 빈 배열은 컴포넌트 마운트 시 한 번만 실행

  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

 

 

 

 useContext: 컴포넌트 트리 내에서 전역 상태를 공유하기 위해 사용됩니다. React.createContext로 생성한 컨텍스트를 사용하여 값을 공유합니다.

 

 

import React, { useContext } from 'react';

const ThemeContext = React.createContext();

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return <button style={{ background: theme.background, color: theme.color }}>Themed Button</button>;
}

// 사용 예시
<ThemeContext.Provider value={{ background: 'lightblue', color: 'darkblue' }}>
  <ThemedButton />
</ThemeContext.Provider>

 

 

 

 useReducer: 복잡한 상태 관리를 위해 사용되는 함수로, useState와 유사하지만 더 많은 로직을 포함할 수 있습니다. 보통 상태와 상태를 갱신하는 로직을 묶어서 관리할 때 사용합니다.

 

 

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:
      return state;
  }
}

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>
  );
}