[React] React데이터 흐름

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

🐉React 데이터 흐름

---

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

 

컴포넌트는 컴포넌트 바깥에서 props를 이요해 데이터를 전달인자처럼 전달 받을수 있다

데이터를 전달하는 주체는 부모컴포넌트, 데이터를 받는 쪽은 자식 컴포넌트가 된다.

 

이러한 관계가 계속되면 컴포넌트는 트리구조를 이루고, 이런 구조의 데이터흐름은 하향식이다.

 

🐉State 끌어올리기

---

단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다.

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 방식으로 해결하면 단방향 데이터 흐름 원칙을 지키며 해결할수 있다.

이것이 상태 끌어 올리기이다.

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(props) {
  const handleClick = () => {
    props.handleChangeValue()
  };

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

ChildComponent는 ParentComponent 와 부모 자식 관계이다.

 

자식에서 버튼을 눌러 부모 컴포넌트에 있는 handler함수를 실행해 setValue를 통해 value를 변화 시켜야 한다.

자식 컴포넌트를 실행할때, handleChangeValue를 props로 보내고 이를 onclick으로 실행될때 작동이 되도록 하였다.