[React] 데이터 흐름과 state끌어올리기 (Lifting State Up)

• React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
• 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
• State 끌어올리기의 개념을 이해할 수 있다.
  • 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

---

단방향 데이터 흐름

리액트는 컴포넌트 단위로 개발을하는것이 가장 큰 특징이다.

먼저 컴포넌트를 어떤 계층구조로 사용할 것인지 나누고 페이지를 조립해 나가기 때문에 상향식으로 앱을 만든다고 할 수 있다.

 

컴포넌트를 나눌때 한 컴포넌트는 한가지 일만 한다는 단일책임원칙에 따른다.

 

컴포넌트는 부모 컴포넌트에서 props를 이용해 데이터를 전달인자처럼 받을 수 있다. 

=>하향식 데이터 흐름, 단방향 데이터 흐름(one-way-data flow)

자식 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 모른다.

 

먼저 어플리케이션에서 필요한 데이터가 무엇인지 안다.

트위터를 예로 들었을때,
1. 이미 작성된 트윗의 목록
2. 새로 작성될 트윗

여기서 딱 봤을때 변하는 값은? 2번!
새로 작성될 트윗은 상태(state)가 변한다.
하지만? 1번인 트윗목록 또한 새 트윗이 추가된다면 목록 또한 상태가 변할 수 있다.

모든 데이터를 상태로 두어야 할까? 그건 아니다. 복잡해질 수 있기 때문에 상태는 최소화하는것이 가장 좋다. 

1. 부모로부터 porps를 통해 전달되거나

2. 시간이 지나도 변하지 않거나

3. 컴포넌트 안의 다른 state나 prop로 계산가능하다면

상태가 아니다.

 

그러면  상태를 어디에 위치 시켜야 하나?

특정 컴포넌트에만 유의미하다면 거기다 두면 되지만

 

두 개 이상의 컴포넌트가 하나의 상태를 영향받는다면?

공동 소유 컴포넌트를 찾아서 상태를 위치 시켜야 한다.

---

역방향 데이터 흐름

트윗추가이벤트 => 상위 트위터 컴포넌트 상태에 영향

하위 컴포넌트의 버튼을 클릭해서 상위 컴포넌트의 내용을 바꾸려면?

단방향 데이터 흐름에 위배된다.

이때! 상태끌어올리기를 하면된다.

 

그게 무엇이냐?

 

상위 컴포넌트에 상태를 바꿀수 있는 함수가 있다.

이 함수를 props로 하위 컴포넌트에 넘겨줘서 

하위 컴포넌트에서 마치 보이지 않는 손👉🏻처럼 상위 컴포넌트의 상태를 바꾸는 것이다!!

 

다시말해서 하위컴포넌트에서 상위컴포넌트의 상태변경함수를 사용하는 것이다.

---

아래는 리액트 공식문서에서 가져온 5. React 생명주기와 12. React로 생각하기 내용중 일부이다.

각각의 상태는 부가적인 수원!🐳

---

여기서 나는 상태의 값을 2,3,4라고 생각했는데

필터링"된" 제품들의 목록은

원본 제품 목록과 검색어,체크박스의 값을 조합해 수 있기 때문에 상태가 아니었다!

---

코드를 쓸 일보다 읽을일이 더 많다는 사실을 기억하세요 🫡

---

예제 1

예제 2

상위 컴포넌트에서 상태변경함수를

하위 컴포넌트인 <NewTweetForm> 에 props로 전달해준다.

새글을 쓸 수 있는 버튼을 클릭했을 때 실행되는 함수인 onClickSubmit에서

부모 컴포넌트 상태 변경함수를 사용할 수 있도록 넘겨받은 props인 onButtonClick을 이용해서

newTweet을 인자로 넘겨주어 새 트윗이 생성되게 한다.

---

Sprint 과제

 

✅ Main 컴포넌트 내 `search` 함수는 검색 조건을 담고 있는 상태 객체 `condition`을 업데이트해야 합니다

search 함수는 출발과 도착정보를 가진 객체를 인자로 받는다.

condition의 상태를 변경할 수 있는 함수인

setCondition에 인자로 search함수의 인자인 출발과 도착 정보를 가진 객체를 넣어준다.

 

💡 이때 객체의 키와 값의 이름이 같다면 생략하여 쓸 수 있다!

 

✅  Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 합니다

하위 컴포넌트인 search 컴포넌트에 onSearch란 이름으로 props를 전달해준다.

 

✅  상태 변경 함수 `search`는 Search 컴포넌트의 `검색` 버튼 클릭 시 실행되어야 합니다

버튼 클릭시 handleSearchClick 함수가 실행이 되고

그 안에서는

props로 전달받은 onSearch함수

즉, 부모 컴포넌트에서 condition 상태를 변경 할 수 있는 setCondition을

onSearch라는 이름으로 사용해서

인자로 출발과 도착 정보를 가진 객체를 넣어준다.

여기서 출발은 ICN으로 고정되어 있으므로

도착 정보의 키만 state인 textDestination을 값으로 넣어준다.

 

 

어렵다! 🏋🏽