[React] 상태(state) 전달 방식: Children, Context API, 상태 관리 라이브러리

Children vs Context API vs 상태 관리 라이브러리

• 모두 상태나 데이터를 컴포넌트들 간에 전달할 수 있는 기능을 제공한다.
• 구현하는 방식과 적합한 사용 범위는 다르다.

 

 

1. children

: 부모 컴포넌트에서 자식 컴포넌트로 UI 요소를 전달하기 위해 사용되는 방식

 

 

사용 방식

• 부모 컴포넌트가 자식 요소를 전달하면, 자식 컴포넌트에서 props.children을 통해 해당 요소를 렌더링한다.

 

적합한 경우

• 주로 동적으로 구성 요소를 전달하거나, 컴포넌트의 내용을 정의할 때 사용된다.

// Parent는 <p> 요소를 Child로 전달
function Parent() {
  return (
    <Child>
      <p>자식 컴포넌트의 내용</p>
    </Child>
  );
}

// Child는 이를 렌더링
function Child(props) {
  return <div>{props.children}</div>;
}

 

 

 

2. Context API

: 컴포넌트 트리 내에서 데이터를 전역적으로 공유하기 위한 방법

 

 

사용 방식

• Context.Provider를 통해 데이터를 제공하고, 하위 컴포넌트에서 useContext를 사용해 데이터를 참조한다.

 

적합한 경우

• 데이터나 상태를 여러 컴포넌트가 공유해야 할 때 적합하다.

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

const MyContext = createContext();

// Parent는 value를 하위 컴포넌트들에게 제공
function Parent() {
  return (
    <MyContext.Provider value="Hello from Context">
      <Child />
    </MyContext.Provider>
  );
}

// Child는 이를 받아 출력
function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

 

 

 

3. 상태 관리 라이브러리 (Redux, Zustand, Recoil)

: 대규모 애플리케이션에서 전역 상태를 효율적으로 관리하기 위한 방법

 

 

사용 방식

• 중앙 집중형 상태 관리 패턴을 사용하며, 상태 변경은 액션(action)과 리듀서(reducer)를 통해 수행된다.

 

적합한 경우

• 복잡한 상태 흐름을 제어하거나 상태 변경이 빈번할 때 사용된다.
• 대규모 애플리케이션에서 복잡한 상태를 관리하거나, 여러 컴포넌트가 상태를 공유해야 할 때 적합하다.

// Action
const setUser = (user) => ({
  type: 'SET_USER',
  payload: user,
});

// Reducer
const userReducer = (state = {}, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

 

---

 

비교

특징	children	Context API	상태 관리 라이브러리
목적	UI 요소를 부모에서 자식으로 전달	전역 데이터 및 상태를 공유	복잡한 상태 흐름을 효율적으로 관리
규모	작은 규모의 애플리케이션	중간 규모의 애플리케이션	대규모 애플리케이션
사용 방식	props.children을 통해 직접 전달됨	Provider와 useContext로 데이터 제공됨	중앙 집중형 상태 관리 패턴이 사용됨
사용 예시	자식 요소를 동적으로 구성할 때	여러 컴포넌트가 동일 데이터를 참조해야 할 때	복잡한 상태 관리 및 빈번한 업데이트 시

 

 

 

결론

• children: UI 요소를 부모에서 자식으로 전달 (작은 규모)
• Context API: 데이터나 상태를 여러 컴포넌트 간에 공유 (중간 규모)
• 상태 관리 라이브러리: 복잡한 상태 관리가 필요하고, 규모가 커지면 상태를 효율적으로 관리 (큰 규모)