React 데이터 흐름

Minsu Lee·2023년 6월 29일

JavaScript React

✨SEB FE

리액트 데이터 흐름

💡 When you have faults, do not fear to abandon them.

📌 React Props & State

간단하게 정리하면 state는 내부에서 변화하는 값, props는 외부로부터 전달 받은 값!

🔍 Props

외부로부터 전달받은 값!

Props의 특징

컴포넌트의 속성(property)를 의미한다.
변하지 않는 외부토부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.
부모 컴포넌트(즉 상위 컴포넌트)로부터 전달받은 값이다.
React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자 처럼 전달하고 전달받을 수 있다. 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
객체 형태이다. {어떤 타입의 값 상관 없이 전달 할 수 있음}
Props는 읽기 전용!
외부로부터 전달받기 때문에 함부로 변경될 수 없는 읽기 전용(Read-only)이다.

읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되어 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배된다.

🔍 Props 사용

props를 사용하는 방법은 다음과 같다.

하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
props를 이용하여 정의된 값과 속성을 전달한다.
전달받은 props를 렌더링한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
    //Child 컴포넌트에 text Props를 전달
      <Child text={"I'm the eldest child"} />
    </div>
  );
}

function Child(props) {  //props객체 안에 text 속성이 있다!
  console.log("props : ", props);
  //props :  {text: "I'm the eldest child"}
  return (
    <div className="child">
      <p>{props.text}</p>
		//"I'm the eldest child" <- 화면에 출력됨
    </div>
  );
}

export default Parent;

🔍 State

내부에서 변하는 값

컴포넌트 내부에서 변할 수 있는 값! 화면에 변화를 주는 값은 React state로 다뤄야한다.
useState hook 사용!

🔍 useState 사용법

useState를 이용하기 위해서는 React로부터 useState를 불러와야 한다. import 키워드로 useState를 불러온다

import { useState } from "react";

이후 useState를 컴포넌트 안에서 호출한다 useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같다. useState는 state저장변수와 state 갱신함수를 가진 배열을 반환한다.

(const [state 저장 변수, state 갱신 함수] = useState(초기값)
일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지않는다.
문법적으로 보면 아래 예시의 isChecked, setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수입니다.

function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
}

state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출합니다.

setIsChecked("갱신할 값");

React state는 반드시 상태 변경 함수 호출로 변경해야 한다.

📌 React 데이터 흐름

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

컴포넌트는 컴포넌트 바깥에서(외부) props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다. 데이터를 전달하는 주체는 부모 컴포넌트가 된다.

이는 데이터의 흐름이 하향식(top-down)임을 의미한다.

React 프로젝트의 메인 페이지를 보면, "one-way reactive data flow" 라고 설명이 되어 있습니다. 즉, React의 데이터 흐름은 단방향이고, Reactive하다는 특징을 가지고 있습니다. 좀 더 설명하면, 이전 글에서도 설명했듯이 데이터는 Parent로부터 Child로 흐르며, 데이터의 갱신에 반응하여 뷰 또한 갱신됩니다.