React의 데이터 흐름
react는 단방향 데이터 흐름으로 데이터가 위에서 아래로 하향식으로 흐른다.
컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 argument나 attributes처럼 전달받을 수 있다.
데이터를 전달하는 주체는 부모 컴포넌트, 전달받은 컴포넌트는 데이터가 어디서 왔는지 전혀 알지 못한다.
state는 많아질수록 애플리케이션이 복잡해지기 때문에 최소화하는 것이 좋다.
어떤 데이터를 state로 두어야할까?
1.
부모로부터 props를 통해 전달되는가? →
2.
시간이 지나도 변하지 않는가? →
3.
컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? →
state의 위치 정하기
state가 특정 컴포넌트에서만 유의미하다면 특정 컴포넌트에만 두면 됨
하나의 상태를 기반으로 두 컴포넌트가 영향을 받을 경우, 공통 부모 컴포넌트를 찾아 그곳에 상태를 위치시켜야함
역방향 데이터 흐름 추가
부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변해야한다면
state 끌어올리기 (Lifting state up) 사용
상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결, 콜백함수처럼
State 끌어올리기 (Lifting State Up)
상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행
import React, { useState } from "react";
export default function ParentComponent() {
const [value, setValue] = useState("날 바꿔줘!");
const handleChangeValue = () => {
setValue("보여줄게 완전히 달라진 값");
};
return (
<div>
<div>값은 {value} 입니다</div>
<ChildComponent handleChangeValue={handleChangeValue}/>
</div>
);
}
function ChildComponent({ handleChangeValue }) {
const handleClick = () => {
handleChangeValue();
};
return <button onClick={handleClick}>값 변경</button>;
}
JavaScript
복사