Achievement Goals

💎 React 데이터 흐름
React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
💎 State 끌어올리기의 개념을 이해할 수 있다.

• 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

1. React 데이터 흐름

리액트의 특징 : 단방향 데이터흐름(one-way data flow) 라는 키워드 기억.

컴포넌트 구조짜기 : 상향식
PM or UX 디자이너로부터 앱의 디자인을 전달받고나서 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야할 일.

데이트 흐름 : 하향식

props (변하지 않는값)

컴포넌트 바깥에서 props 를 이용해 데이터를 속성처럼 받을 수 있다.
즉, 데이터를 전달해주는 주체는 부모 컴포넌트가 된다.
받은 컴포넌트는 props 를 통해 전달받은 데이터가 어디서 왔는지 전혀 모른다.

state (변하는 값)

사용자가 입력한 이벤트에 따라 얼마든지 변경이 가능하다. 이것을 상태(state) 로 관리한다.
예를들어 어떠한 트윗에 사용자가 댓글을 추가 및 삭제할때 이벤트가 "변경" 되므로 이는 props가 아닌 상태로 두어야한다.

상태가 많을수록 애플리케이션은 복잡해지기 때문에 최소화 할수록 좋다.

그렇다면 어떤 데이터를 상태로 두어야 할지 다음 세가지를 고려해본다.

🧐 부로모부터 props 를 통해 전달되나 ? - state ❌
🧐 시간이 지나도 변하지 않는가 ? - state ❌
🧐 컴포넌트 안의 다른 state 나 props를 가지고 계산이 가능한가 - state ❌

state(상태)의 위치

단일 컴포넌트에만 영향을 끼칠 경우 그 컴포넌트에 상태를 위치시키면 되지만,
하나의 상태를 기반으로 두개의 컴포넌트가 영향을 받을 때는 상태의 위치에 대해 고민해 봐야 한다.
그럴 땐 공통 부모 컴포넌트를 찾아 그 곳에 상태를 위치시켜야 한다.

2. state(상태) 끌어올리기

리액트의 큰 특징으로 위에서 아래로 내려가는 단방향 데이터흐름이라고 언급했다.

만약, 자식컴포넌트에 의해 부모컴포넌트가 바뀌는 상황이 온다면?
어떠한 이벤트가 발생했을때 (버튼을 눌렀을때) 부모의 상태도 변화되는 경우도 있다.
단방향 데이트흐름인 리액트가 하위 컴포넌트에서 어떤 이벤트로 인해 상위컴포넌트가 바뀐다? 이를 위한 해결책으로 "state 끌어올리기(Lifting state up)" 가 있다.

상태를 변경시키는 함수 자체를 하위 컴포넌트에 props 로 전달하여 해결할 수 있다. (콜백함수 사용법과 유사하다.)

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("처음상태");

  const handleChangeValue = () => {
    setValue("변경된 사항");
  };

  return (
    <div>
      <div>{value}</div> //처음상태
      <ChildComponent props = {handleChangeValue}/> //클릭 시 "변경된 사항" 으로 변경
    </div>
  );
}

function ChildComponent({props}) {
  const handleClick = () => {
    props()
  };

  return <button onClick={handleClick}>클릭</button>;
}