[React] 데이터 흐름

 

 

 

 

 

 

 

 

 

 

📌리액트 데이터 흐름

 

 

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

 

 

 

 

React는 페이지 단위가 x -> 컴포넌트 단위

컴포넌트를 만들고 -> 페이지를 조립 (상향식(bottom-up)으로 컴포넌트 구조를 짠다) 

컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자 혹은 속성처럼 전달 받음

데이터를 전달하는 주체 : 부모 컴포넌트 -? 데이터 흐름이 하향식(top-down)

이를 단방향 데이터 흐름이라고 한다

 

 

💡 props와 state의 설명 이해하기

 

[React] State & Props & 렌더링 정의

 

 

 

📍state 끌어올리기

 

리액트의 큰 특징 : 단방향 데이터 흐름

하위 컴포넌트에서의 클릭 이벤트가, 부모의 상태를 바꾸어야만 하는 상황에 "State 끌어올리기(Lifting state up)"

상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결(콜백함수 방법과 비슷)

 

 

💡 콜백함수

 

 

[JS] chapter13. 고차함수

 

 

🧷callback 다시보기

 

// 고차함수
function each(array, iterator) {
  for(let i = 0; i < array.length; i++) {
    let element = array[i]
    iterator(element, i, array)
  }
}

// 콜백 함수
function printElement(element) {
  console.log(element)
}

each(['hello', 'world'], printElement);

 

 

 

🧷state 끌어올리기 예제

 

app.js

 

부모와 자식 컴포넌트가 하나씩 존재하는 트리 구조

버튼을 눌러서 부모의 상태를 바꿀순 없을까?

 

import React, { useState } from "react";

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

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

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

function ChildComponent() {
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
  };

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

 

state 끌어올린 결과

 

 

import React, { useState } from "react";

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

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick={handleChangeValue} />
// 1번
// 상태를 변경하려는 함수 자체를 하위컴포넌트로 전달해야 한다고 했으므로 
// 상태를 변경해야 하는 함수는 handleChangeValue 이고
// 전달은 props를 이용한다 
// 하위 컴포넌트가 버튼 클릭 이벤트에 따라 상태를 변경하니 
// 이름은 handleButtonClick이라고 지어줬다
    </div>
  );
}

function ChildComponent({ handleButtonClick }) {
// 2번 props로 함수를 전달 받아온다
  const handleClick = () => {
    // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    handleButtonClick();
// 3번
// ChildComponent는 마치 고차함수가 인자로 받은 함수를 실행하듯, 
// props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다
// "상태 변경 함수"는 버튼이 클릭할 때 실행되기를 원하므로, 해당 부분에 콜백 함수를 실행하면 작동한다
  };

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

 

 

실행결과

 

실행 전

 

실행 후