패스트캠퍼스 환급챌린지 45일차 미션 (3월 16일) : 인터랙티브 웹 강의 후기

서론

성능 최적화는 모던 웹 개발에서 중요한 측면 중 하나이며, 특히 React 같은 라이브러리를 사용할 때 더욱 그러하다. 최근에 진행된 두 강의, 'React.memo를 이용한 성능 최적화'와 '얕은 비교(Shallow Equal)'는 이러한 최적화 기법에 대해 깊이 있게 다루었다. 이 강의들을 통해, 특히 성능이 저하된 컴포넌트를 개선하는 방법에 대해 배우는 기회가 되었다. React.memo의 원리와 사용법을 이해함으로써, 애플리케이션의 성능을 효과적으로 향상시킬 수 있는 방법을 배웠다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

• 첫 번째 강의: React.memo를 이용한 성능 최적화
• 두 번째 강의: 얕은 비교(Shallow Equal)

첫 번째 강의: React.memo를 이용한 성능 최적화

이 강의에서는 React.memo를 사용하여 컴포넌트의 리렌더링 성능을 개선하는 방법을 배웠다. React.memo는 컴포넌트가 동일한 props로 동일한 결과를 렌더링할 것이라는 것을 React에 알려줌으로써, 불필요한 렌더링을 방지한다. 이전의 B컴포넌트는 여러 컴포넌트로 분할되어 있어 A컴포넌트에 비해 리렌더링 성능이 7배 이상 떨어졌었다. 그러나 React.memo를 적용하여 리렌더링이 필요한 부분만을 명시함으로써, B컴포넌트의 성능을 대폭 향상시킬 수 있었다. 코드 예시는 다음과 같다.

이 코드는 React.memo를 사용하여 B컴포넌트를 감싸고, props의 변화가 있을 때만 컴포넌트가 리렌더링 되도록 했다.

두 번째 강의: 얕은 비교(Shallow Equal)

두 번째 강의에서는 React.memo가 작동하는 원리인 얕은 비교에 대해 배웠다. 얕은 비교(Shallow Equal)는 객체 내부의 값이 아닌, 객체의 최상위 수준의 props나 state가 변경되었는지만을 확인한다. 이는 객체의 깊은 수준에서의 변화를 감지하지 않기 때문에, 성능 최적화에 있어 효과적인 방법이 될 수 있다. 이 원리를 이해하면, React.memo를 보다 효과적으로 사용할 수 있으며, 애플리케이션의 성능을 개선하는 데 큰 도움이 된다.

결론

'React.memo를 이용한 성능 최적화'와 '얕은 비교(Shallow Equal)' 강의를 통해, React 애플리케이션의 성능 최적화 방법에 대해 심도 있는 학습을 할 수 있었다. 특히, 성능이 떨어지는 컴포넌트를 분석하고 개선하는 실질적인 방법을 배우며, 최적화 기술을 실제 개발 과정에 적용할 수 있는 능력을 키울 수 있었다. 이러한 지식은 앞으로 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 개발하는 데 큰 도움이 될 것이다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N