state는 어디서 살고 있는가?
일반적으로 개별적인 컴포넌트 내부에서 state가 작성되고 사용되기 때문에, 해당 컴포넌트에서만 state가 살아간다(?)고 생각하지만..
그렇지 않다! 😲
state는 React 내부에서 유지된다.
이 말인 즉슨, state의 생사에는 해당 컴포넌트가 아닌 리액트가 친히 관여하신다는 말씀 ^0^
리렌더링에도 불구하고 state를 유지하고 싶다면?
- DOM 트리의 구조를 동일하게 유지한다.
리액트는 컴포넌트가 리턴하는 JSX를 기반으로 UI tree를 생성하고, 리액트 DOM이 생성된 UI tree와 일치하도록 브라우저 DOM 요소를 업데이트 한다.
이렇게 생성된 DOM 트리는 전, 후 구조가 일치한다면 state의 값이 유지된다!
1. DOM 트리 구조 동일
2. DOM 트리 구조 변화
리렌더링과 함께 state를 리셋하고 싶다면?
- DOM 트리 상 다른 포지션에 컴포넌트 작성한다.
- 컴포넌트에 key 값을 부여한다.
처음부터 독립적인 컴포넌트를 생성하거나, react에서 list에 키 값을 부여해 핸들링하는 것처럼 컴포넌트에도 유일한 키 값을 부여한다면 리액트가 컴포넌트의 독립성을 인식할 수 있다.
결론
컴포넌트가 리렌더링된다고 해서 존재하는 모든 state가 초기화되는 게 아니다.
전체적인 리액트 DOM 구조의 변화가 없다면 state는 유지될 수 있으며, 동일한 DOM 구조에도 컴포넌트에 키 값을 부여해 독립성을 제공할 수 있다는 사실..! 🙈🙈🙈
또한, 리액트는 컴포넌트의 로직이 어떻게 구성되는 지는 알 수 없고, 오직 리턴되는 JSX만을 인식할 수 있음을.. 잊지 말자..!
🐤 FE developer 🎧