단방향 흐름과 state
Jun 29, 2021
»
단방향 흐름과 state
React에서의 데이터 흐름
페이지를 만들기 이전에 상향식으로 컴포넌트를 먼저 만들고 조립합니다
위 그림에서 데이터는 위에서부터 아래로 내려온다고 했습니다
즉 컴포넌트는 컴포넌트 바깥에서 props 를 통해 데이터를 마치 인자 나 속성 처럼 전달받을수 있습니다
이런 흐름을 하향식이라고 합니다
역방향 데이터 흐름 추가
상태 끌어올리기로써 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 부모 상태를 변경할수 있습니다
function ParentComponent() {
const [value, setValue] = useState("날 바꿔줘!");
const handleChangeValue = (newValue) => {
setValue(newValue);
};
// ...생략...
}
function ChildComponent({ handleButtonClick }) {
const handleClick = () => {
handleButtonClick("넘겨줄게 자식이 원하는 값");
};
return <button onClick={handleClick}>값 변경</button>;
}
Side Effect
Side Effect(부수효과) 는 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 Side Effect가 있다고 얘기합니다
let foo = "hello";
function bar() {
foo = "world";
}
bar(); // bar는 Side Effect를 발생시킵니다
Pure Function(순수 함수)
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다
Side Effect가 없는 걸 의미합니다
function upper(str) {
return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다
}
upper("hello");