개요

State & Props 으로 데이터를 관리하는 React 의 데이터 흐름을 알아봅시다.

---

학습 목표

• State & Props 으로 데이터가 관리되는 React 의 데이터 흐름에 대해 학습한다.
• 실제 웹 애플리케이션 개발시 데이터흐름을 설계할 수 있다.
• 실제 웹 애플리케이션 개발시 설계된 데이터흐름을 따라 구현할 수 있다.

---

컴포넌트로 생각합시다

• React 의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌 컴포넌트 단위로 시작 한다는 점입니다.

• 따라서 앱의 프로토타입을 전달받은경우 먼저 컴포넌트 를 찾아봅니다.
  • 즉, 상향식(bottom-up)으로 앱을 만듭니다.
    • 상향식 장점 : 테스트가 쉽고 확장성이 좋습니다.

• 단일 책임 원칙 (SRP: Single Responsibility Principle)
  • 하나의 컴포넌트는 한 가지 일만 합니다.

• 나눈 컴포넌트는 트리 구조로 나타낼 수 있습니다.

데이터는 위에서 아래로 흐릅니다

• 컴포넌트는 컴포넌트 바깥에서 props 를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes) 처럼 전달받을 수 있습니다.
  • 데이터를 전달 주체 는 부모 컴포넌트 가 됩니다.
  • 데이터 흐름 이 하향식(top-down) 임을 의미합니다.
  • React 는 단방향 데이터 흐름(One-way Data Flow) 을 따릅니다.
    • React 를 대표하는 설명 중 하나입니다.
    • 컴포넌트는 props 를 통해 전달 받은 데이터가 어디서 왔는지 전혀 알지 못합니다.

데이터 정의

앱에서 필요한 데이터가 무엇인지 먼저 정의합니다.

• 전체 트윗 목록
• 사용자가 작성 중인 새로운 트윗 내용

모든 데이터를 상태로 두지 않습니다.

• 상태는 최소화 하는 것이 가장 좋습니다.
• 상태가 많아질수록 앱은 복잡해집니다.

데이터 상태로 두어야 하는지 판단 기준

• 부모로부터 props 를 통해 전달됩니까?
• 시간이 지나도 변하지 않습니까?
• 컴포넌트 안의 다른 state 나 props 로 계산이 가능합니까?

위의 세 가지 질문에 해당한다면 state 가 아닙니다.

상태 위치 정하기

상태의 위치

• 상태가 특정 컴포넌트에서만 유의미하다면 쉽습니다.
• 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 공통 소유 컴포넌트를 찾아 그곳에 상태를 위치해야 합니다.
  • 즉, 두자식의 공통 부모 컴포넌트에 상태를 위치해야 합니다.
• React 에서 데이터를 다룰 때는 컴포넌트들 간의 상호 관계 와 데이터의 역할, 데이터의 흐름 을 고려하여 위치를 설정 해야 합니다.

---

참조

코드스테이츠 프론트엔드 부트캠프