Front end/React

[ React ] 데이터 흐름 / state 끌어올리기 알아보기

_moda 2023. 4. 2. 12:55

데이터 흐름

React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다.

즉, 상향식으로 앱을 만든다.

이렇게 앱을 만들었을 때 가장 큰 장점은 테스트가 쉽고 확장성이 좋기 때문이다.

 

위의 사진을 트리 구조로 나타낸 컴포넌트라고 생각해보면,

컴포먼트는 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성 처럼 전달 받을 수 있다.

또한, 데이터를 전달하는 주체는 부모 컴포넌트된다.

따라서 데이터 흐름이 하향식을 의미하는 것을 알 수 있다.

 

모든 데이터를 상태로 둘 필요는 없기 때문에 상태는 최소화하는 것이 가장 좋다.

상태가 많아질 수록 애플리케이션은 복잡해지기 때문에 어떤 데이터를 상태로 두어야 하는지의 여부는,
아래 세가지 질문을 통해 판단이 가능하다.

- 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
- 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.

또한 여러개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 자식 컴포먼트의 공통 부모 컴포넌트에 상태를 위치해야함

 

state 끌어올리기

  • 상태 끌어올리기란 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달,
    이 함수를 하위 컴포넌트가 실행하는 것

code로 보자.

import React, { useState } from "react";

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

  const handleChangeValue = () => {
    setValue("묘씨");
  };

  return (
    <div>
      <div>내 이름은 {value} 입니다</div>
      <ChildComponent />
    </div>
  );
}

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

  return <button onClick={handleClick}>Click</button>;
}

위 코드를 보면 현재 부모 컴포넌트와 자식 컴포넌트가 나눠져 있는 것을 볼 수 있다.

 

또한, 브라우저에서 봤을 때 모습은 다음과 같다.

useState를 이용해서 value의 초기 값이 myossi로 설정되어 있다.

이 value 값의 상태를 갱신하고 있는 부모 컴포넌의 안의 함수 handleChangeValue를 자식 컴포넌트의 인자로 주고 

자식 컴포넌트의 button이 클릭 될 때 handleClick 함수에서 handleChangeValue 함수를 실행하여 

value 값을 "묘씨"로 바꿔보자.

 

위 코드에서 state 끌어올리기를 실행 해보자 !

1. 부모 컴포넌트 에서 자식 컴포먼트에 state 상태를 갱신하고 있는 handleChangeValue함수를 인자로 보낸다.

//부모 컴포넌트
export default function ParentComponent() {
  const [value, setValue] = useState("myossi");

  const handleChangeValue = () => {
    setValue("묘씨");
  };

  return (
    <div>
      <div>내 이름은 {value} 입니다</div>
      <ChildComponent props={handleChangeValue} /> 
      //자식 컴포넌트에 handleChangeValue 함수를 인자로 보낸다.
    </div>
  );
}

 

2. 함수 이름을 props로 보냈고, 자바스크립트 문법을 이용해서 보냈기 때문에,
{} 중괄호를 이용하여 {props}로 자식 컴포넌트에서 인자로 받는다.

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

  return <button onClick={handleClick}>Click</button>;
}

 

3.button 태그가 클릭 됐을 때 handleClick 함수가 실행 되도록 하고 있다.
   그 말은 즉, button을 클릭 했을 때 값을 바꿔줘야 한다는 뜻이므로 handleClick함수가 실행 되었을 때 ,

   상태를 바꾸는 함수를 실행 시키면 되므로 handleClick 함수 안에서 props를 실행시키면 된다.

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

  return <button onClick={handleClick}>Click</button>;
}

 

4. 따라서, 버튼을 클릭 했을 때, value 값이 변경 되어 브라우저에서는 이렇게 보여진다.

 

버튼 클릭 전

버튼 클릭 후

이것이 상태를 변경하는 함수를 하위 컴포넌트로 전달 하고 그 함수를 하위 컴포넌트가 실행하는 상태 끌어올리기라고 할 수 있다.