React에서 props와 store의 차이점 및 사용법

React에서 데이터를 컴포넌트에 전달하거나 사용하는 방법으로 props를 통해 전달하거나 store에 저장하여 불러오는 방법이 있습니다. 이 두 가지 방법은 데이터의 흐름과 관리 방식에서 차이가 있으며, 각각의 장단점이 있습니다.

---

1. Props로 값을 전달하는 방법

설명

• props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.
• React의 단방향 데이터 흐름(One-Way Data Flow)을 따릅니다.
• 컴포넌트 간의 데이터 전달은 계층 구조를 통해 이루어집니다.

예제

 

 

// 부모 컴포넌트

const Parent = () => {

  const data = "Hello from Parent";

 

  return <Child message={data} />;

};

 

// 자식 컴포넌트

const Child = ({ message }) => {

  return <p>{message}</p>;

};

 

 

 

 

장점

1. 단순하고 직관적:
   • 부모 → 자식으로 데이터가 전달되므로 데이터 흐름이 명확합니다.
2. 컴포넌트 간 결합도 낮음:
   • 자식 컴포넌트는 전달받은 데이터만 사용하므로 독립적으로 동작할 수 있습니다.
3. React의 기본 설계 철학에 부합:
   • 단방향 데이터 흐름을 따르기 때문에 디버깅이 쉽습니다.

단점

1. Prop Drilling 문제:
   • 데이터가 깊은 계층 구조를 가진 컴포넌트 트리에서 전달될 때, 중간 컴포넌트가 필요하지 않은 데이터를 전달해야 하는 경우가 발생합니다.
   • 예: Parent → Child → GrandChild → GreatGrandChild로 데이터를 전달해야 하는 경우.
2. 전역 상태 관리가 어려움:
   • 여러 컴포넌트에서 동일한 데이터를 공유해야 할 때, 모든 컴포넌트에 props로 전달해야 하므로 비효율적입니다.

---

2. Store에 저장해서 불러오는 방법

설명

• Store는 전역 상태 관리 도구(예: Redux, Zustand, Context API 등)를 사용하여 데이터를 중앙에서 관리합니다.
• 컴포넌트는 Store에서 데이터를 구독하거나 액션을 통해 데이터를 업데이트합니다.

예제 (Redux 사용)

 

 

// Redux Store

const initialState = { message: "Hello from Store" };

 

const reducer = (state = initialState, action) => {

  switch (action.type) {

    default:

      return state;

  }

};

 

// 컴포넌트에서 Store 데이터 사용

import { useSelector } from "react-redux";

 

const Child = () => {

  const message = useSelector((state) => state.message);

 

  return <p>{message}</p>;

};

 

 

 

 

장점

1. 전역 상태 관리:
   • 여러 컴포넌트에서 동일한 데이터를 공유할 때 효율적입니다.
   • 데이터를 한 곳에서 관리하므로 데이터 흐름이 중앙 집중화됩니다.
2. Prop Drilling 방지:
   • 데이터를 중간 컴포넌트를 거치지 않고 필요한 컴포넌트에서 직접 가져올 수 있습니다.
3. 유지보수성 향상:
   • 상태 관리 로직이 컴포넌트 외부(Store)에 있으므로 컴포넌트가 더 간결해집니다.

단점

1. 복잡한 설정:
   • Redux와 같은 상태 관리 도구는 초기 설정이 복잡할 수 있습니다.
   • 작은 프로젝트에서는 오히려 불필요한 복잡성을 초래할 수 있습니다.
2. 추적 어려움:
   • 상태가 전역적으로 관리되기 때문에, 상태 변경의 원인을 추적하기 어려울 수 있습니다.
3. 성능 문제:
   • 상태 변경 시 모든 구독된 컴포넌트가 리렌더링될 수 있으므로, 성능 최적화가 필요합니다.

---

3. Props와 Store의 차이점

특징PropsStore

데이터 흐름	부모 → 자식 (단방향 데이터 흐름).	전역 상태에서 필요한 컴포넌트로 직접 전달.
사용 범위	특정 부모-자식 관계에서만 사용 가능.	애플리케이션 전역에서 데이터 공유 가능.
설정 복잡도	설정이 필요 없음.	Redux, Context API 등 설정이 필요.
Prop Drilling 문제	깊은 계층 구조에서 Prop Drilling 발생 가능.	Prop Drilling 문제 없음.
상태 관리	로컬 상태 관리에 적합.	전역 상태 관리에 적합.
성능	상태 변경 시 해당 컴포넌트만 리렌더링.	상태 변경 시 구독된 모든 컴포넌트가 리렌더링될 수 있음.
유지보수성	간단한 구조에서는 유지보수 용이.	복잡한 애플리케이션에서 유지보수 용이.

---

4. 어떤 방법을 선택해야 할까?

Props를 사용하는 경우

• 간단한 데이터 전달:
  • 부모 → 자식으로 데이터를 전달하는 간단한 구조.
• 로컬 상태 관리:
  • 특정 컴포넌트 계층에서만 데이터를 사용할 경우.
• 작은 프로젝트:
  • 전역 상태 관리 도구를 사용할 필요가 없는 경우.

Store를 사용하는 경우

• 전역 상태 관리:
  • 여러 컴포넌트에서 동일한 데이터를 공유해야 하는 경우.
• Prop Drilling 방지:
  • 깊은 계층 구조에서 데이터를 전달해야 하는 경우.
• 복잡한 애플리케이션:
  • 상태 관리가 복잡하고, 여러 컴포넌트 간의 데이터 동기화가 필요한 경우.

---

5. 결론

• Props는 간단한 데이터 전달과 로컬 상태 관리에 적합하며, React의 기본 설계 철학에 부합합니다. 작은 프로젝트나 특정 컴포넌트 계층에서만 데이터를 사용할 경우 props를 사용하는 것이 더 간단하고 효율적입니다.
• Store는 전역 상태 관리가 필요한 경우에 적합하며, Prop Drilling 문제를 해결할 수 있습니다. 복잡한 애플리케이션에서는 Redux, Context API, Zustand와 같은 상태 관리 도구를 사용하는 것이 유지보수성과 확장성 측면에서 유리합니다.