State 끌어올리기

📖React 데이터 흐름

단방향 데이터 흐름

리액트의 데이터는 위에서 아래로 흐르는 단방향이다. 그래서 컴포넌트는 props를 이용해 데이터를 마치 전달인자 혹은 속성처럼 하위 컴포넌트에 전달할 수 있다.

만약 두개의 자식 컴포넌트가 하나의 상태에 접근하고자 한다면 부모의 컴포넌트에 상태를 위치시켜야 두 자식 모두에서 상태를 전달할 수 있다. 하지만 변하는 상태값을 자식컴포넌트가 받게 된다면 변경된 상태를 부모에게 보내줘야하는 일이 발생할 수 있다. 이를 해결하기 위한 방법이 상태끌어올리기이다

📖 State 끌어올리기 (Lifting State Up)

State 끌어올리기란?

하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌야 하는 상황이 발생한 경우, 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행해서 단방향 데이터 흐름 원칙을 지키면서 하위컴포넌트의 상태를 상위 컴포넌트에 전달해주는 방법이다.

function ParentComponent() {
  const [value, setValue] = useState('초기값');

  const handleChangeValue = (newValue) => {
    setValue(newValue);
  };
  
  return (
    <div>
      <div>값은 {value} 입니다</div>
// props로 하위 컴포넌트에게 상태변경함수 전해줌
      <ChildComponent handleButtonClick={handleChangeValue}  />
    </div>
  );
}

// props으로 상태변경함수 받음
function ChildComponent({ handleButtonClick }) {
  // 상태변경함수를 실행할 함수 정의
  const handleClick = () => {
    handleButtonClick('상위 컴포넌트로 보내줄 상태값')
  }

  return (
    // 버튼 클릭 시 상태변경함수를 실행할 함수 실행
    <button onClick={handleClick}>값 변경</button>
  )
}

마치며..

왜 이론보면 이해는 가는데 막상 과제를 풀려고하면 어떻게 작성할지 막막할까.. 처음부터 써보는 연습을 하면 좀 나아질려나.. ㅜ 지금부터라도 과제 의사코드 작성하기라도 시작해야겠다. 그리고 구조분해 할당 매번 한번에 이해가 가지않고 계속 생각해봐야 이해가는데 한 번 정리해서 공부해봐야겠다. 일단 배열의 값을 넣어주고 싶으면 객체.키 이렇게 쓰지말고 {키} 이렇게 쓸수 있다. 객체.키= {키}이다.