Weekly TIL - Day 8

⭐️ Today's summary

오늘은 TodoList를 만들어보았다.

 

여기서 상태관리에 대해서 되게 어려웠다.

 

오늘은 상태관리에 대해서 자세하게 더 다루어 보겠다.

 

⭐️ Problem

부모가 자식에게 props를 전달해 주었을때,

 

자식이 props를 받아서 함수를 호출하는 경우에

 

부모의 상태를 자식이 직접 변경할 수 없는데, 함수는 자식에게 있으니까

 

이 부분이 헷갈렸다.

⭐️ Try

 

 

결과적으론

 

자식은 props로 받은 상태 변경 함수를 '실행'할 수는 있지만,
그 함수의 실제 상태는 부모 컴포넌트에 있으며,
상태의 변경과 그에 따른 리렌더링은 부모에서 일어난다.

 

자식 컴포넌트에서 props로 받은 함수를 호출할때

 

자식은 props로 받은것은 onToggle이라는 함수 그자체에 대한 참조이기때문에

 

자식이 onToggle을 호출하면 부모가 만든 함수가 실행되는 것이다.

 

🧐 하지만 여기서 궁금증이 있다.

 

props로 자식에게 값을 넘겨줄때 상태 관리하는 함수도 포함하여 넘겨줬는데,

 

배운대로라면 자식이 부모의 상태를 바꿀수 없다.

 

그러면 여기선 어떻게 동작하는 것일까?

 

부모가 자식에게 props로 전달하는건 그냥 "참조" 전달이기 때문이다.

 

위 사진에 있는 코드처럼 자식 컴포넌트에서 Todos를 바꾸는 버튼을 "허용" 했을 뿐이지,

상태를 가지는건 아니다.

 

결국 상태의 소유자는 부모 컴포넌트에 있고, 자식은 그냥 onToggle()을 실행할 수 있을 뿐이다.

 

그 실행이 끝나면 부모 컴포넌트가 리렌더링 되고, 자식은 그냥 다시 props를 받을 뿐이다.