부모(함수) 컴포넌트에서 상태변경함수를 자식컴포넌트의 프롭스 변수로 전달.

부모 컴포넌트(ParentComponent)가

자식 컴포넌트(ChildComponent)에게 함수(onInputChange)를 props로 전달하고, 자식 컴포넌트에서 그 함수를 호출하여 부모의 상태를 업데이트하는 전형적인 “State 끌어 올리기(Lifting State Up)” 방법을 보여줍니다

동작 원리

부모 컴포넌트에서 inputValue라는 상태(state)를 정의합니다.
부모 컴포넌트는 handleInputChange 함수를 정의하고, 이 함수를 자식 컴포넌트의 props로 전달합니다.
자식 컴포넌트에서는 부모로부터 전달받은 onInputChange 함수를 이벤트 핸들러에서 호출합니다.
예: onInputChange(newValue)
자식에서 onInputChange가 호출되면, 부모 컴포넌트의 handleInputChange가 실행되어 부모 상태(inputValue)가 업데이트됩니다.
부모 상태가 변경되면(React에서 상태가 바뀌면) 부모 컴포넌트가 재렌더링되고, 새로운 props가 자식 컴포넌트로 전달되는 식으로 UI가 업데이트됩니다.

왜 이런 방법을 쓰나요?

React는 단방향 데이터 흐름(One-way data flow)을 사용합니다. 즉, 상태(State)는 위(부모)에서 아래(자식)로 흐르고, 자식 컴포넌트가 직접 부모 컴포넌트의 상태를 변경할 수는 없습니다.
따라서, 자식이 변경된 정보를 부모에게 알리고 싶을 때는 부모가 자식에게 “콜백 함수”를 props로 넘겨주고, 자식에서 그 함수를 호출(call) 하여 부모의 상태를 업데이트해야 합니다. 이를 흔히 “State 끌어올리기(Lifting State Up)”라고 합니다.
이 과정을 통해 자식 컴포넌트에서 일어난 변경 사항을 부모 컴포넌트의 상태에 반영할 수 있고, 이후 필요한 로직(예: 다른 자식 컴포넌트와의 데이터 공유, UI 업데이트 등)을 부모가 제어할 수 있게 됩니다.