어제 React의 렌더링 관련 깊은 동작방식에 대해 그동안 봤던 포스팅중에 가장 자세한 내용의 번역본을 읽게 되어 꼼꼼히 읽어보았다.
어느정도 React의 동작 방식을 알고 있었지만 이번 글을 보면서 실무에서 겪었던 경우들을 떠올리며 "아하" 하는 부분들이 있었고 한층 더 React 컴포넌트 설계 및 렌더링 최적화에 대해 이해할 수 있었다.
이번 글에서 가장 눈여겨 보았던 부분은 Memoization 과 관련해 Props 참조 최적화 단락이었는데, React의 관점에서 참조가 변경되는 것을 감지하는 방식과 최적화를 위해 Memoization을 사용하는 최선의 방식과, 당연하다고 생각했던 것과 반대되는 관점들을 소개한 부분이 인상 깊었다. 내가 깊게 생각해본 적이 없었던 부분이라 흥미로웠고 결과적으로 실무 프로젝트의 코드베이스에서도 최적화할 수 있는 부분을 인지하고 찾아낼 수 있게 된 것 같다.
그리고 프론트엔드와 관련된 좋은 해외 아티클을 찾아 번역하는 Korean FE Article 이라는 곳의 메일링 리스트 구독을 했다..!
항상 생각하는 것은, 한번 읽는 것보다는 두번, 세번 읽고, 그보다 좋은 것은 실제 코드로 구현하고 경험해보는 것이라고 생각하기 때문에 항상 과거에 겪었던 상황들과 대비해보고, 의문이 드는 코드는 직접 작성하고 확인해보도록 해야겠다.
번역본
https://velog.io/@superlipbalm/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior
(번역) 블로그 답변: React 렌더링 동작에 대한 (거의) 완벽한 가이드
리액트 렌더링의 동작 방식과 컨텍스트 및 React-Redux 사용이 렌더링에 미치는 영향에 대한 세부 사항
velog.io
번역본을 작성해주신 Chanhee Kim 님에게 감사드립니다!
원문
Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior
Details on how React rendering behaves, and how use of Context and React-Redux affect rendering
blog.isquaredsoftware.com