React의 Data Flow

 

📌 React의 Data Flow 

React에서 **데이터 흐름(Data Flow)**은 단방향입니다.
즉, 부모 컴포넌트 → 자식 컴포넌트로만 데이터를 전달할 수 있으며, 자식 컴포넌트가 직접 부모에게 데이터를 요청할 수는 없습니다.

 

🔹 React의 단방향 데이터 흐름 (One-Way Data Flow)

• React에서는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달(props)하며, 자식에서 부모로 직접 데이터를 전달할 수는 없음
• 즉, 데이터를 가진 부모 컴포넌트가 먼저 렌더링되고, 이후 자식 컴포넌트가 렌더링됨
• 하위 컴포넌트가 부모의 데이터가 없으면 데이터를 기다려야 하므로 Network Waterfall 문제가 발생할 수 있음

📌 Network Waterfall이란?

하위 컴포넌트의 데이터 요청이 상위 컴포넌트의 데이터 요청이 끝날 때까지 기다려야 하는 현상

• 예를 들어, C 컴포넌트에서 D와 E 컴포넌트를 렌더링해야 하는 경우,
• C에서 데이터 fetching이 끝나야만 D와 E의 fetching이 시작됨
• 비효율적이며, 전체 렌더링 속도를 저하시킴
  

network waterfall

 

🔥 그럼, React는 동기적으로 동작하는가?

 

❌ 아님! React 자체는 비동기적으로 동작합니다.
하지만, 컴포넌트의 렌더링 흐름이 상위 → 하위로 진행되기 때문에, 데이터를 기다려야 하는 상황이 발생하는 것뿐입니다.

동기적(Synchronous)

• 부모의 fetching이 끝나야만 자식의 fetching이 시작되는 구조 (Network Waterfall)
• 상위 컴포넌트가 준비될 때까지 하위 컴포넌트는 렌더링될 수 없음

비동기적(Asynchronous)

• 여러 개의 컴포넌트가 동시에 데이터를 fetching할 수 있는 구조
• 각 컴포넌트가 독립적으로 fetching을 수행

🛠 React에서 Network Waterfall을 해결하는 방법

1. GraphQL + Relay 사용
   • React에서는 GraphQL과 Relay를 활용해 데이터 요청을 최적화할 수 있음
   • GraphQL의 Fragment 기능을 활용하면 각 컴포넌트가 필요한 데이터만 요청할 수 있음
   • Relay는 여러 개의 Fragment를 조합하여 한 번의 요청으로 데이터를 가져오도록 최적화
   • 단점: GraphQL + Relay는 강력하지만 설정과 학습이 어렵고, 서버 요구사항과 성능 고려가 필요함! 
2. Props Drilling 활용
   • 데이터 fetching을 최상단 부모 컴포넌트에서 실행하고, props로 자식 컴포넌트에 전달
   • 장점: 모든 컴포넌트가 동시에 렌더링될 수 있어 Network Waterfall 문제 해결
   • 단점: 너무 많은 props가 전달되면 코드 복잡도가 증가

---

💡 React에서 Data Flow를 최적화하는 방법

React는 View를 다루기 위한 라이브러리이며, 데이터를 효율적으로 가져오는 것은 개발자의 몫
따라서, 데이터를 빠르게 가져와 뷰를 렌더링하려면 비즈니스 로직을 상위 컴포넌트로 끌어올려야 함

 

✅ 결론

• React는 뷰(View)를 빠르게 렌더링하기 위해 데이터를 기다리지 않고, 최상단 컴포넌트에서 fetching 후 props로 전달하는 방식을 권장
• 이를 통해 단방향 데이터 흐름을 유지하면서도 Network Waterfall 문제를 방지
• React는 상위에서 데이터를 미리 가져오고, props로 자식에게 내려주는 방식(props drilling)을 권장
• 하지만, props drilling이 과도할 경우 Context API, Redux, Recoil 등의 상태 관리 라이브러리를 고려해야 함

---

🎯 React의 올바른 Data Flow 설계 가이드

1️⃣ 가능한 한 최상단 컴포넌트에서 데이터를 fetching
2️⃣ 자식 컴포넌트는 부모로부터 props를 받아서 사용 (props drilling 활용)
3️⃣ 필요할 경우 Context API나 Redux 같은 상태 관리 라이브러리를 사용하여 데이터 전달 최적화
4️⃣ GraphQL + Relay를 활용하여 데이터 fetching을 최적화하는 것도 고려

---

🔥 최종 요약

• React는 **단방향 데이터 흐름(One-Way Data Flow)**을 따른다.
• 부모 → 자식으로만 데이터 전달이 가능하며, 자식이 부모의 데이터를 기다려야 하는 경우 Network Waterfall 발생 가능
• 이를 해결하기 위해 GraphQL + Relay 사용 또는 최상위 컴포넌트에서 데이터를 fetching 후 props로 내려주는 방식(props drilling) 활용
• React는 뷰 렌더링을 빠르게 하기 위해 데이터 fetching을 최상단에서 처리하고, props로 전달하는 방식을 권장
• 하지만 props drilling이 과도해지면 Context API, Redux, Recoil 등의 상태 관리 라이브러리를 고려해야 한다.

💡 즉, React는 데이터를 기다리지 않고 빠르게 View를 렌더링하기 위해 단방향 데이터 흐름을 유지하면서도 최적의 방식으로 데이터를 전달하는 것을 목표로 한다! 

 

 

 

 

참고자료

https://velog.io/@hyunjine/Data-Flows-in-React