Props & State
결국 리액트의 핵심은 저 두가지인 것 같다.
props는 상위 컴포넌트가 하위컴포넌트에게 넘겨주는 객체로 read-only 속성이라는 것에 주의한다.
state는 컴포넌트 내부에서 사용되는 동적 데이터로 컴포넌트 내부에서 생성되고 활동되고 변경되는 가변적 속성이다.
리렌더링을 위해
컴포넌트가 가진 state props를 기존의 것과 비교한다.
컴포넌트의 state가 변경되었을 때
부모 컴포넌트가 리렌더링 될 때(즉 부모 컴포넌트의 state가 변경되었을 때)
부모로부터 전달받은 prop이 변경되었을 때
리렌더링 시에 부모의 state가 변경되면 사실 모든 자식이 리렌더링 된다.
그리고 자식의 props가 변경된다고 쳤을 때 이를 가지고 자식 또한 변경이 되었는지 여부를 판단하고 변경 반영을 해주는 것이다.
불변성
변경이 감지되어야 다시 그린다고 했다.
props의 불변성을 통해 부모로부터 물려받은 어떤 객체의 의도를 자식이 파괴하지 않고 사용할 수 있어 안전하게 사용할 수 있고 예상치 못한 렌더링을 방지한다.
state의 불변성을 통해 상태 객체가 가지는 그 값 자체가 변경되어야 함을 보장한다.
결국 원시타입을 제외한 객체가 가지는 값은 주소다
같은 주소에 할당된 내부의 내용물을 바꾸는 것 자체로 리렌더링 감지를 할 수 없다.
기존의 원본(한 주소가 가리키는 실제 내용물들)에 대한 변경없이 상태를 변경하여
의도치 않은 동작이 발생하는 것을 방지하면서도 리액트의 상태업데이트를 위한 얕은 비교 방식의 의도에 맞도록 할 수 있다.
리액트 동작 이해하기
아직 완벽하게 이해하진 못했지만 이번 주 동안 이해하고자 노력했다.
리액트를 공부하며 느낀 점
자꾸 몰라도 된대
프론트엔드 개발을 위해 정말 잘 설계된 라이브러리라고 생각한다.
개발자는 선언적으로 코드를 만들어 적절하게 수행되도록 하기만 하면 되고
내부적으로 어떻게 동작하는지는 모두 추상화 되어있어
사실 뭘 언제 써야 어떻게 되는지 정도만 알아도 최소한의 개발은 할 수 있지 않을까 생각한다.
그래도 알아야 될 것 같다!
어떤 의도로 어떻게 동작되게 설계했는지 어떤 철학을 가지고 만들었는지
솔직히 대단한 분들이 머리싸매고 만든걸텐데 쉽게 모두 다 알 수 있을리 없다.
하지만 계속해서 이해해나가려고 할 것이다.
개발하다가 위기가 닥쳐 더 이상 진행하지 못하고 있을 때 어떤 통찰력을 줄 수도 있고
새로운 개념이나 기술이 나왔을 때 빠르게 대응하고 쉽게 의도를 파악할 수 있는 능력을 갖추는데 도움이 될 것이라고 확신하기 때문이다.
