TIL 21.05.25

Jaemin Jung·2021년 5월 25일

Today I Learned

목록 보기

27/62

오늘한일

간만에 리액트 시간이었다.
오늘은 리액트의 데이터 흐름과, Lifting State Up(State 끌어올리기)를 배웠다.
이전에 배웠던 props와 state의 개념이 가물가물 했으나,
금방 페이스를 되찾았다.
Effect Hook에 대해서도 배웠으나 이는 내일 블로깅하겠다.

Achievement Goals

(이해한대로 작성하였기에 틀릴수도 있습니다. 계속 공부하며 수정해 나가겠습니다.)

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

React 데이터 흐름

React의 데이터는 위에서 아래로 흐른다.
즉, 데이터 흐름은 "하향식"(top-down)또는 “단방향식” 데이터 흐름이다.
이전에 배웠던 props를 예로 들자면, props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로
데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달하였다.
부모에서 자식으로, 위에서 아래로 흐른다.

데이터의 위치

props는 어떤 방식으로든 수정해서는 안되는 데이터이다.
그렇기에 props는 읽기 전용 데이터라고 한다.
이와 반대로 state는 변화 할수있는 동적인 데이터를 말한다.

state는 특정 컴포넌트 내부에서만 움직일때에서는 그 특정 컴포넌트에만 위치하면 된다.
하지만 state에 의존하는 컴포넌트가 두가지 존재한다면?
state의 데이터를 각각 컴포넌트에 전달해야 할것이다.
이러한 상황일때 state를 전달할때에는 props를 이용해서 전달한다.

앞서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기에
부모컴포넌트가 데이터를 전달하는 주체여야한다.

그렇기에 두 컴포넌트의 공통의 부모에 state를 위치시켜야 한다.

state 끌어올리기 (Lifting state up)

state를 props로 전달받은 자식 컴포넌트에서 받아온 state를 변경하게 될 경우도 있을것이다.
하지만 props로 전달받았기때문에 이 데이터는 수정이 불가능하다.
이럴경우에는 어떻게 해야할까?

React에서는 상위 컴포넌트의 state를 변경하는 함수를 하위 컴포넌트에 전달하여,
이 함수를 하위 컴포넌트가 실행하게 하는 것으로 이러한 문제를 해결하였다.
이는 마치 콜백함수를 사용하는 방법과 비슷하다.
이 키워드를 state 끌어올리기(Lifting state up)라고 하며,
이러한 데이터 흐름방식을 역방향 데이터 흐름 이라고 한다.

state 끌어올리기 예제

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("초기값");

  const handleChangeValue = () => {// <- state를 변경하는 함수
    setValue("바뀐값"); 
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent setState = {handleChangeValue}/>// <- props를 통해 자식컴포넌트로 전달
    </div>
  );
}

function ChildComponent({setState}) {
  const handleClick = () => { //<- 버튼이 클릭될때마다 state 변경 함수를 실행시킨다.
    setState()  
  };

  return <button onClick={handleClick}>값 변경</button>;
}

자식컴포넌트를 포함 하고있는 부모컴포넌트에는 useState를 선언하였고,
state를 변경할 수 있는 set함수를 실행하는 함수를 가지고있다.
이 함수를 자식 컴포넌트에 props로 전달하여 자식컴포넌트는 이 함수를 받아 실행하여
자식컴포넌트에서 부모컴포넌트의 state를 변경가능하다.