$$config title: [ReactJS] 부모 컴포넌트 상태(state)변수 변화시 자식 컴포넌트에 대한 변화 keywords: - ReactJS - ... $$ # 부모 컴포넌트 상태(state)변수 변화시 자식 컴포넌트에 대한 변화 > 만약 부모 컴포넌트가 다음과 같이 state 변수가 변화되면 자식 컴포넌트는 어떤 경로로 생성될까? (예제 : Props.html) ```js function App(){ const [value, setValue] = React.useState("Save Chagnes"); const changeValue = () => setValue("Revert Changes"); return (

); } ``` 이런 식으로 부모 컴포넌트의 value 즉, state변수가 자식 컴포넌트의 props인 changeValue로 인해서 value의 값이 기존에 " Save Changes " 에서 " Revert Changes " 로 바뀐다면?? --- 보통하는 오해 : 자식 컴포넌트의 값은 부모 컴포넌트의 원래값인 " Save Changes "를 처음에 가지고 이를 토대로 생성이 된 후 변화하면서 " Save Changes " 대신 " Revert Changes "의 값을 가진다고 생각한다.
하지만, 자식 컴포넌트는 부모 컴포넌트의 state변수가 변경되어 자신에게 영향을 미칠 때, 부모 컴포넌트의 state변수가 변경된 상태 (즉, " Revert Changes ")를 가지고 " 최초 생성 "된다. => 부모 컴포넌트의 변화를 모두 받은 후에 (최초) 생성되는 것. (생성된 후에 변경 되고 다시 재생성 되는 개념 x) # 예제 : Props.html ```js

``` ⬆️ 해설 : 여기서 보이는 `console.log(text, "was rendered");` 로 찍히는 값을 보면 ``` (버튼을 누르기 전) Save Chages was rendered Continue was rendered (버튼을 누른 후) Save Chages was rendered Continue was rendered (자동으로 상태변경 되었기 때문에) Revert Chages was rendered ``` 순서가 아니라
``` (버튼을 누르기 전) Save Chages was rendered Continue was rendered (버튼을 누른 후) Revert Chages was rendered Continue was rendered ``` 이 순서가 맞는 것이다.