React TIL 07

2021년 8월 3일에 작성된 문서 1번 입니다.
React 배운 내용을 정리했습니다.

State 끌어올리기

상태 끌어올리기

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

하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있다. 이에 대한 햏결책은 아래와 같다.

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

예제

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>;
}

상태를 변경하는 함수는 무엇이며 하위 컴포넌트로는 어떻게 전달할 수 있을까?

• 상태를 변경하는 함수는 handleChangeValue

function ParentComponent() {
	const[value, setValue] = useState("날 바꿔줘!");
	const handleChangeValue = () => {
		setValue("보여줄게 완전히 달라진 값");
	};
	return (
    <div>
    <div>값은 {value} 입니다</div>
    <ChildComponent handleButtonClick={handleChangeValue}  />
    </div> 
  ); //handleButtonClick은 props 이름임.
}

ChildComponent는 마치 고차함수가 인자로 받은 함수를 실행하듯, props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 됩니다. "상태 변경 함수"는 버튼이 클릭할 때 실행되기를 원하므로, 해당 부분에 콜백 함수를 실행합시다.

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    // Q. 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까?
    // A. 인자로 받은 상태 변경 함수를 실행하자!

    handleButtonClick()
  }

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

• 필요에 따라 설정할 값을 콜백 함수의 인자로 넘길 수도 있다.

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

  const handleChangeValue = (newValue) => {
    setValue(newValue);
  };

  // ...생략...
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = () => {
    handleButtonClick('넘겨줄게 자식이 원하는 값')
  }

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

Written with StackEdit.