React의 데이터 흐름
- React
먼저 컴포넌트 만들고 다시 페이지 조립해나가는 방식
즉, 상향식 (bottom-up)으로 앱을 만든다
- React 컴포넌트
자식 컴포넌트 바깥에서 props 이용해 데이터를 마치 전달인자, 속성처럼 전달받는다.
이 때, 데이터를 전달하는 주체는 부모 컴포넌트이다.
즉, 데이터의 흐름은 단방향으로, 하향식 (bottom-down) 이다.
React 상태 끌어올리기
앞서 데이터가 단방향의 데이터 흐름을 가지고 있다고 이야기를 하였다. 그런데, 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 상황에서는 어떻게 해야 할까?
이를 해결할 수 있는 방법이 바로 'state 끌어올리기' 이다.
상태 끌어올리기는 주로 '하나의 상태가 여러 컴포넌트에 영향을 주는 상황'에서 해당 컴포넌트들 간의 공통의 상위 컴포넌트에 상태 끌어올리기를 하는 방법으로 사용된다.
'state 끌어올리기' 를 한 마디로 설명하자면 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트에 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것 이다. 이는 역방향 데이터 흐름이 아닌, 단방향 데이터 흐름 원칙에 여전히 부합하는 방법이다.
다음의 예제를 통해 자세히 살펴보자.
StatesAirline Client _ Part 1
- 자식 컴포넌트인 < Search /> 에 존재하는 버튼 클릭이 부모 컴포넌트 < Main />의 상태 변화를 만들게 한다.
- < Main /> 컴포넌트의 상태 변화는 또 다른 자식 컴포넌트인 < FlightList /> 의 목록을 업데이트하게 한다.
1. 상태를 변경하는 함수를 자식 컴포넌트에 전달한다.
<Search onSearch={search} />Main.js 에서 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수는 search 함수이다. 전달은 props를 이용하며, props의 이름은 적절하게 onSearch 로 정해주었다.
2. props 로 전달받은 함수를 자식 컴포넌트 내에서 실행시킨다.
//Main.js
export default function Main() {
// 항공편 검색 조건을 담고 있는 상태
const [condition, setCondition] = useState({
departure: "ICN",
});
const [flightList, setFlightList] = useState(json);
// 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수
const search = ({ departure, destination }) => {
if (
condition.departure !== departure ||
condition.destination !== destination
) {
console.log("condition 상태를 변경시킵니다");
}
};// Search.js
const handleSearchClick = () => {
console.log("검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다");
onSearch({ departure: "ICN", destination: textDestination });
};
-
< Search />는 props로 전달받은 함수를 컴포넌트 내에서 실행시킬 수 있게 된다.
-
일단 우리는 버튼을 클릭했을 때, 상태 변경 함수가 실행되기를 원한다. 그러므로 handleSearchClick 함수 내부에 코드를 작성한다.
-
위의 함수 내부에 상태 변경 함수인 onSearch를 작성한다.
위의 Main.js의 search 함수를 보니 인자로 '{ departure, destination }' , 객체 형태로 값을 받아오는 것을 확인할 수 있다.
따라서 onSearch 함수에도 똑같이 { depatrure, destination } 값을 받아와야 한다. -
자식 컴포넌트에서 변경되는 값을 설정해주어야 한다. npm start로 리액트를 실행시켜본 결과, departure 값은 ICN으로 고정되어 있다. 그로므로 일단 {departure : "ICN" } 이다. (객체 형태이므로 이런 식으로 값을 넣어준다!)
-
destination의 경우, Search.js 코드 밑부분을 보면, destination의 값이 handleChange 함수를 통해 업데이트 되며, value는 textDestination 이라는 state 변수에 담겨 있다는 것을 확인할 수 있다.
따라서 {destination : textDestination } 이다.
3. 부모 컴포넌트의 상태 변경 함수인 search 값 변경해주기.
const search = ({ departure, destination }) => {
if (
condition.departure !== departure ||
condition.destination !== destination
) {
console.log("condition 상태를 변경시킵니다");
setCondition({ departure, destination });
}
};-
search 함수의 인자, { depature, destination } 은 위의 Search.js의 onSearch 함수를 통해 받아온 departure, destination 값이다.
-
이 값이 항공편 검색 조건을 담고 있는 state 상태 변수인 condition의 departure, 혹은 destination 값과 다르다면 우리가 받아온 값들을 condition에 넣어주어야 한다. (우리가 받아온 값이 변경된 값이므로)
-
state 변수 변경 함수인 setState를 사용해 우리가 받아온 값인 { departure, destination }을 condition에 넣어준다.
