React 데이터의 흐름

🌊 데이터의 흐름

• React 개발방식의 가장 큰 특징 ➡️ "컴포넌트 (Component)단위 시작"
• 페이지를 만들기 이전 컴포넌트를 먼저 생성하고 조립하여 페이지 생성
  ➡️ ⭐️ 상향식 ( bottom-up )으로 앱을 만듬
  • 테스트가 쉽고, 확장성이 좋음
• 단일 책임 원칙
  • 객체는 단 하나의 책임만 가져야 한다는 원칙
  • 여기서 '책임'이라는 의미는 하나의 '기능담당'으로 보면 됨
    ➡️ 하나의 컴포넌트는 하나의 기능만을 담당

---

🤔 컴포넌트로 구조를 짰다면 데이터는 어디에 두지 ?

• 데이터는 "위에서 아래로" 흐른다.
  ➡️ 데이터를 전달하는 주체는 부모 컴포넌트
  ➡️ 데이터 흐름이 하향식 (top-down)임을 의미

• ⭐️ 이 원칙은 매우매우 중요함
  ➡️ 단방향 데이터 흐름(one-way data flow)이라는 키워드가 React 대표하는 설명 !!
• 또한 위에서 전달받은 데이터가 어디서 왔는지 전혀 알 수 없다
• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 전달인자, 속성처럼 전달받을 수 있다

📌 Tweeter 예제

✓ 먼저 애플리케이션에서 필요한 데이터가 무엇인가 정의하기

• 전체 트윗 목록
• 새로 추가된 트윗 내용

➡️ 둘 중 변하는 값은 무엇인가? ( state 는 무엇? )
: 사용자의 입력으로 추가 된 트윗 , 전체트윗 모두

• 전체트윗 목록 또한 새 트윗추가 기능이 있기 때문에 트윗목록 역시 state이다

✓ state와 props의 차이점은 무엇인가요?

• prop( 변경 불가 ), state( 변경되는 값 ) 모두 일반 Javascript 객체이다.
• 두 객체 모두 렌더링 결과물에 영향을 주는 정보 소유
• props는 컴포넌트에 전달 ↔️ state는 컴포넌트 안에서 관리

• 모든 데이터를 상태로 둘 필요 X ( state 는 최소화 하는 것이 best )
• ⭐️ state를 결정하는 3가지 조건
  • 부모로부터 props를 통해 전달 되나?
  • 시간이 지나도 변화하지 않나?
  • 컴포넌트 안의 다른 state나 props를 가지고 계산 가능 ?
    ➡️ 위 3가지 중 한가지 조건이라도 만족한다면 Not state !

---

📌 state의 위치 결정하기

• 상태가 특정 컴포넌트에서만 유효한 경우
  ➡️ 해당 특정 컴포넌트 안에만 두면 됨
• 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는 경우
  ➡️ 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치
  ( 즉, 두 자식의 공통 부모 컴포넌트에 상태 위치 )

Tweeter 예제

• Q1. 전체 트윗 목록 state는 어디에 위치 시킬까?
  ➡️ Twittler
  : NewTweetForm 과 Tweets 모두 영향을 받음
  • 새롭게 작성된 트윗 내용(NewTweetForm)을 전체 트윗 목록에 추가하여 Tweets를 통해 보여줘야함 ( 부모 컴포넌트에 위치 )
• Q2. 사용자가 작성 중인 새로운 트윗 내용 state는 어디에 위치시킬까?
  ➡️ NewTweetForm
  : NewTweetForm 에서 사용자의 입력에 따라 작성되고 있는 트윗 내용을 다른 컴포넌트가 가질 필요가 없음

---

🌊 state 끌어올리기 ( Lifting state up)

: 단방향이라고 배워온 데이터흐름에 역방향 데이터 흐름 ?!

• 부모컴포넌트에서 상태가 하위컴포넌트에 의해 변경되고 있다
  ex) 하위 컴포넌트(NewTweetForm) 의 button 을 클릭하면 상위 컴포넌트(Twittler)의 전체 트윗 내용의 상태(state)가 변경 됨
• 상태를 변경시키는 함수를 하위 컴포넌트 props로 전달해서 해결할 수 있음
  ➡️ 마치 콜백함수를 사용하듯이 !!