seungwoo.dev

코드숨에서 (2024.04.01 ~ 2024.06.17) 진행한 모던 리액트 Deep Dive 스터디에 참여하고 작성한 서평입니다.

모던 리액트 Deep Dive 서평

리액트의 동작 원리에 대해 깊이 있게 알고 싶어서 이 책을 읽게 되었다. 책을 다 읽은 후 소감은 리액트뿐만 아니라 프론트엔드 개발자라면 배워야 할 전반적인 내용을 다룬 지침서 같다는 느낌이 들었다. 책에는 리액트의 여러 기능을 단순히 설명하는 것이 아니라, 동작 원리와 내부 구현을 예제 코드를 통해 자세하게 설명하고 있었다.

개인적으로 예제 코드의 난이도가 조금 높았는데, 스터디 중간에 윤석님이 코드를 분석하는 것을 보면서 "아, 저렇게 코드를 읽는 거구나!" 하고 깨달음을 얻은 기억이 있다.

책을 통해 함수형 컴포넌트에서 사용하는 여러 훅의 원리에 대해 알 수 있었고, 특히 내부적으로 자바스크립트 클로저를 이용해 동작한다는 것을 알게 되었다. 매번 리액트 코드를 작성할 때마다 useEffect 의존성 배열을 채우는 방법과 실행 시점에 대한 이해가 부족했는데, 책을 읽으며 useEffect가 실행되는 시점과 클래스 컴포넌트의 생명주기와 어떤 점이 다른지도 알 수 있었다. 또한, useEffect 의존성 배열이 변경된 것을 확인하는 데 사용되는 shallowEqual 함수의 구현도 직접 확인해 볼 수 있었다.

리액트 컴포넌트의 렌더링 과정에 대해서도 자세하게 설명되어 있었다. 리액트는 렌더와 커밋 두 단계를 거쳐 컴포넌트를 렌더링하는데, 이때 리액트 파이버가 사용된다는 것을 알게 되었다. (이 부분은 개념이 너무 어려워서 완벽히 이해하지는 못했다.)

브라우저 렌더링, 개발자 도구를 이용한 성능 측정, 보안, CI/CD까지 정말 다양한 내용을 다루고 있었는데, 한 번에 이해하기는 어려웠고 필요할 때마다 꺼내서 자주 읽어봐야겠다. 무엇보다 리액트에 대해 공부하면서, 실무에 사용하고 있는 Vue 렌더링에 대해서도 다시 한 번 생각해보게 되었다. 프레임워크를 단순히 사용하는 것이 아니라 동작 원리를 이해하고 사용하면 더 좋은 코드를 작성할 수 있다는 것을 알게 되었다.

참고

• 모던 리액트 Deep Dive