본문 바로가기

react2

React 성능 최적화 완전정리 (렌더링, 메모이제이션, 리렌더링) React는 컴포넌트 기반 UI 프레임워크로써 재사용성과 확장성이 뛰어나지만, 잘못된 상태 관리나 렌더링 구조로 인해 성능 문제가 발생하기 쉽습니다. 특히 대규모 애플리케이션이나 리스트 렌더링, 상태 변경이 빈번한 상황에서는 불필요한 리렌더링이 사용자 경험을 저해할 수 있습니다. 이 글에서는 React의 렌더링 구조를 이해하고, 메모이제이션 기법을 활용해 불필요한 렌더링을 줄이며, 상태 관리 전략을 통해 성능 최적화를 어떻게 달성할 수 있는지 단계적으로 정리합니다. 또한 면접에서 자주 묻는 성능 최적화 질문에도 대비할 수 있는 핵심 내용을 함께 담았습니다.불필요한 렌더링을 줄이는 구조 이해React는 상태(state)나 props가 변경되면 해당 컴포넌트를 자동으로 리렌더링합니다. 이 기본 구조는 UI를.. 2025. 5. 1.
React Strict Mode 동작 원리와 실무 이슈 완전정리 React의 Strict Mode는 개발 단계에서 발생할 수 있는 잠재적인 문제를 미리 감지하고, 안정적인 코드를 작성할 수 있도록 도와주는 기능입니다. 하지만 개발자 입장에서 처음 경험하게 되는 “훅이 두 번 실행되는 현상”, “API가 중복 호출되는 문제” 등은 혼란을 유발할 수 있습니다. 본 글에서는 Strict Mode의 동작 원리부터 훅과 생명주기 메서드의 이중 실행 이유, 그리고 실무에서 발생할 수 있는 실제 문제와 면접 대응 전략까지 정리합니다. React 18 이후 업데이트된 동작 방식도 함께 반영하여 철저히 설명합니다.Strict Mode란 무엇이며 왜 사용하는가Strict Mode는 React가 제공하는 개발 전용 기능으로, 코드의 잠재적인 문제를 조기에 감지하고 경고해주는 역할을 합니.. 2025. 5. 1.