<aside> 💡 sibling component에 어떻게 state를 보낼 수 있을까???

</aside>

React에서 데이터는 일반적으로 위에서 아래로 흐르게 된다. 그렇지만 만약 위로 데이터를 올리고 싶다면??? 어떻게 데이터(특히나 state)를 상위 컴포넌트로 올릴 수 있는지 알아보자. 그리고 이 방식은 특히나, sibling component에 state를 보낼때 매우 유용하다.

1. How it works???

2. Down to Up

그렇다면, 밑에서 위로 데이터는 어떻게 전송할 수 있을까??? 이럴때는 상위 컴포넌트의 함수를 하위컴포넌트에 props로 내려주고, 이걸 하위 컴포넌트에서 이용하면 매우 간편하게 데이터를 위로 가져올 수 있다. 아래 코드를 통해 알아보자

//App.js
...
const getDataFromDown = (data) => {
//받아온 데이터(하위컴포넌트의 스테이트를)를 콘솔로 출력할 수 있게 된다.
	console.log(data);
}

return(
//props로 내려주고
<DownCompo getDataFromDown={getDataFromDown} />
)
...

//DownCompo.js
//props로 받아서
const DownCompo = ({getDataFromDown}) => {

const [data, setData] = useState('')
const clickHandler = () => {
	//DownCompo에 있는 state data를 위로 보내보자.
	getDataFromDown(data)

}

return (
...
)
}

3. 자식컴포넌트에서 부모컴포넌트의 state변경하기

위와 매우 흡사한 경우이긴 하지만, 처음에 헷갈렸던 적이 있어 기록한다. 우리는 보통 상위 컴포넌트에 state를 관리하게 되는 경우가 많은데, 하위 컴포넌트에서 상위컴포넌트의 state를 변경할 수 있는 방법은 없을까???

처음에 나는 setState를 props로 내려주면 되지 않을까 했다. 하지만, props는 부모컴포넌트가 자식 컴포넌트에게 주는 값이며, 자식컴포넌트는 이 props를 받아오기만 하고 수정할 수는 없다.

반면에 state는 컴포넌트 내부에서 선언하고, 내부에서만 변경이 가능하게 된다.

응??? 그럼 자식컴포넌트에서 변경을 못하는거 아닌가??

이미 2에서 설명한 방식대로 함수를 통해 state를 변경 할 수 있다.

//App.js
...
//state를 가지고 있는 부모컴포넌트에서 setState를 하는 함수를 만든다. 
const getDataFromDown = (data) => {
//받아온 데이터(하위컴포넌트의 스테이트를)를 콘솔로 출력할 수 있게 된다.
	setState(sth)
}

//그리고 이 함수를 보내고 싶은 자식컴포넌트에 props로 보내면 되게 된다.