S2 unit9 | State 끌어올리기

react에서 데이터 흐름은 위에서 아래로 흐른다. 하지만 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달하고 싶은 상황이 생길 수 있다. 이럴 때는 State를 끌어올리면 된다.

 

📌 부모 컴포넌트의 setState 함수 Props로 전달

부모 컴포넌트

const Parent = () => {
	const [state, setState] = useState(초기 값);
    
    return (
    	<div>
            <h2> setState를 자식 컴포넌트에 props로 전달 </h2>
            <div> 상태 : {state} </div>
            <Child prop={setState}/>
        </div>
        )
      }

 

자식 컴포넌트

const Child = ({ prop }) => {
    const [click, setClick] = useState(false);
    
    const handleClick = () => {
    	click?
        prop(바꿀 상태)
        :undefined;
        }
        
    return (
    	<button onClick={handleClick}></button>
    	}

변경이 필요한 state의 setState함수를 props로 넘겨받고 자식 컴포넌트에서 상황에 맞게 실행할 수 있다.