코드스테이츠 소프트웨어엔지지어링 부트캠프 +50

리액트

 

상태 끌어 올리기

리액ㅡ의 단방향 데이터 흐름 원칙에 따라, 하위 컴퍼넌트는 상위컴퍼넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다.
데이터가 state로 부터 왔는지, 하드코딩으로 입력한 내용인지는 알 수 없다.

그럼 하위 컴퍼넌트의 이벤트로 인해 상위 컴퍼넌트의 상태가 바뀌는 것은 어떻게 해야 할까??

상위 컴퍼넌트의 '상태를 변경하는 함수' 를 하위 컴퍼넌트로 전달하고 이 함수를 하위 컴퍼넌트가 실행 하면 된다.

이는 여전히 단방향 데이터 흐름에 원칙에 부합하는 해결방법이다.

 

• 예제

https://codesandbox.io/s/simple-lifting-state-up-hooks-ljrdy?from-embed

위 홈페이지에 들어가 예제를 실행해 볼 수 있습니다.

 

답: 

props를 통해 handleChangeValue()를 하위컴퍼넌트에서 실행한다.

import React, { useState } from "react";

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

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

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

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

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

 

Effect Hook

useEffect는 컴퍼넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다.

 

즉, 전체가 아닌 특정 변수의 값이 바뀔때(특히 side effect에 의해) 해당 콜백을 실행한다.

 

useEffect(콜백함수, [변수]) 
두번째 매개변수 [변수]는 여러개 선언가능하다. 배열안의 '변수'의 값이 바뀔때마다 useEffect가 실행되고,
빈배열일때는 처음에 한번만 실행된다. 
두번째 매개변수가 없는 useEffect는 리렌더링 할 때 마다 실행된다.

 

useEffect,useState를 Hook 이라 하는데 Hook은 최상위에서만 호출하고 React에서만 사용할 수 있음.

 

 

 

다음 코드는 useEffect(콜백) 과 useEffect(콜백,배열) 을 비교한 것이다.

 

const myButton = () => {
  const [countClick, setCount] = useState(0);

  useEffect(() => {
    alert(countClick);
  });//리렌더링 할 때 마다 실행
  
  useEffect(()=>{
	alert('와아아!!')
},[countClick]); //  countClick값이 업데이트 될 때만 실행

  const showClickNo = () => {
    setCount(countClick + 1);
  }; 

  return (
    <button onClick={ showClickNo }>
      Click Me
    </button>
  )
};

export default myButton;