React )자식 컴포넌트에서 부모 컴포넌트의 상태를 바꾸기(끌어 올리기)

리액트의 단방향 데이터 흐름(one-way reactive data flow)의 원칙에 따라
자식 컴포넌트에서는 props나 state를 이용해서 부모의 컴포넌트의 상태를
바꾸는 것은 불가하다.

하지만, 끌어 올리기(Lifting-state up)로 단방향 데이터 흐름의 법칙을 지키면서,
자식 컴포넌트가 부모 컴포넌트의 값을 바꿀 수 도 있다.

끌어 올리기(Lifting-state up)란?

끌어 올리기란, 부모 컴포넌트에서 자식 컴포넌트에게
"부모의 상태를 바꿀 수 있는 <함수>" 를 전달 해줌으로써
자식 컴포넌트가 실질적으로 부모 컴포넌트의 값을 바꿀 수 있게 하는 방법이다.

const [state, setState] = useState("이 상태를 바꿔보겠습니다")

//부모 컴포넌트
function Parents(){	
	//부모 컴포넌트의 state를 바꾸는 changeParents 함수
	const changeParents = () => {
		setState("부모 컴포넌트의 상태를 바꾸었습니다");
	}
}

//자식 컴포넌트			//props인 changeParents를 인자로 받아옴!!
function Child({changeParentsFunction}){
	//부모 컴포넌트의 state를 바꾸는 함수를 실행!
	changePerants();
}


<...생략>

<div>
  <Parents>		//Child에 props로 changeParents 함수를 전달!
    <Child changeParentsFunction={changeParents}/>
    </Parents>
</div>

이처럼, 방법의 순서는 다음과 같다.

1. 부모 컴포넌트 내에 부모 컴포넌트의 상태를 변경하는 함수 만들기.
2. 자식 컴포넌트에 props로 그 함수를 전달해주기.
3. 자식 컴포넌트에서 전달인자로 그 props를 가져오기.
4. 자식 컴포넌트에서 props 함수를 실행 하기.

자식 컴포넌트에서 전달인자를 변경 함수에 직접 주기

위의 코드를 실행할 때, 현재는 changeParents라는 변경함수에
고정으로 setState에 고정 값이 지정되어 있지만, 전달인자를 받아와
자식 컴포넌트에서 직접 함수에 전달인자를 넣어줄 수 있다.

위의 코드를 똑같이 복사해서 직접 함수에 전달인자만 넣은 형태로 수정해보았다.

const [state, setState] = useState("이 상태를 바꿔보겠습니다")

//부모 컴포넌트
function Parents(){	
	//부모 컴포넌트의 state를 바꾸는 changeParents 함수
	//value라는 전달인자를 함수가 실행될 때 받아옴!!
	const changeParents = (value) => {
		setState(value);
	}
}

//자식 컴포넌트			//props인 changeParents를 인자로 받아옴!!
function Child({changeParentsFunction}){
	//부모 컴포넌트의 state를 바꾸는 함수를 실행!
	//changeParents에 전달인자를 직접 입력합니다.
	changeParents("전달인자로 이 값을 전달합니다");
}


<...생략>

<div>
  <Parents>		//Child에 props로 changeParents 함수를 전달!
    <Child changeParentsFunction={changeParents}/>
    </Parents>
</div>