React 데이터 흐름

상향식(bottom-up) 개발 방식

• 페이지 단위가 아닌, 컴포넌트 단위로 시작
• 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나감
• 테스트가 쉽고 확장성이 좋다는 장점이 있음

단방향 데이터 흐름(one-way data flow)

• 데이터 흐름(props)이 하향식(top-down)임
  • React는 props를 이용해 데이터를 전달하는 주체인 부모 컴포넌트에서 하위 컴포넌트로 데이터를 전달함

효율적으로 코딩하기

• 단일 책임 원칙: 하나의 컴포넌트는 한 가지 일만 하기
• state가 많아질수록 애플리케이션은 복잡해지므로 최소화
• 상태의 위치:
  • 상태가 특정 컴포넌트에서만 유의미하다면, 해당 컴포넌트에만 두기
  • 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치

---

State 끌어올리기

• 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 경우
• “상위 컴포넌트의 상태를 변경시키는 함수”(handler)를 하위 컴포넌트에 props로 전달하고 하위 컴포넌트에서 이 함수가 실행됨
  ⇒ 상위 컴포넌트에 props로 상위 컴포넌트의 상태 변경시키는 함수 추가하기

예시

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };
//1. 함수 handleChangeValue를 변수에 담아서 하위 컴포넌트에 보내주기
  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick = {handleChangeValue} />
    </div>
  );
}

// 2. 하위 컴포넌트인 ChildComponent에서 함수를 설정한 변수명인 handleButtonClick으로 받아오기
function ChildComponent({handleButtonClick}) {
  const handleClick = () => {
	    // 3. 받아온 함수를 실행
    handleButtonClick();
  };

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