본문 바로가기

코딩이야기𖦹/React
11

📌 React 성능 최적화 정리 React 프로젝트를 최적화하기 위해 꼭 알아야 할 개념들을 정리했음.이 글에서는 번들링과 코드 스플리팅, 그리고 입력 이벤트 제어 기법인 debounce와 throttle을 실제 예제와 함께 정리했다.📦 번들링(Bundling)이란?여러 개의 파일을 하나로 묶는 작업React 프로젝트를 개발하면 자바스크립트 파일, CSS, 이미지 등 다양한 리소스가 생성됨. 번들링은 이러한 리소스들을 하나의 파일로 묶어서 브라우저가 로딩할 파일의 수를 줄이고, HTTP 요청 횟수를 줄여 속도 향상을 가능하게 함.🔧 대표 번들링 도구ViteRollupCRA (Create React App)Webpack✅ 번들링의 효과HTTP 요청 수 감소 → 성능 향상코드 압축 → 파일 크기 축소사용되지 않는 코드 제거(트리 쉐이킹.. 2025. 4. 24.
📌 React 렌더링 최적화: memo, useMemo, useCallback 완전정복하기 리액트로 프로젝트를 하다 보면 점점 컴포넌트가 많아지고,어느 순간부터 불필요한 리렌더링이 자꾸 눈에 들어오기 시작했다.처음엔 왜 느리지...? 싶었는데, 디버깅을 해보니props는 안 바뀌었는데 자식 컴포넌트가 계속 리렌더링되고 있던 것.그제야 React.memo, useMemo, useCallback 같은 최적화 도구들을 공부하게 됐다.이번 글은 내가 공부하면서 정리한 내용을 바탕으로,리액트에서 불필요한 렌더링을 줄이는 법과 Profiler로 성능을 분석하는 방법까지 정리해봤다.🌀 함수형 컴포넌트 생명주기: useEffect로 다 해결된다!클래스형 컴포넌트는 생명주기 메서드가 따로 있었지만,함수형 컴포넌트에서는 useEffect 하나로 마운트, 업데이트, 언마운트를 모두 처리할 수 있다.생명주기클래스.. 2025. 4. 23.
📌 복잡한 상태관리를 깔끔하게! Redux 개념 정리 처음엔 props로 잘 해결되지만, 규모가 커질수록 점점 어디서 상태가 바뀌는지 추적하기 어려워지는 상황이 생긴다.이럴 때 Redux를 사용하면, 모든 상태를 한 곳(Store)에 모아서 예측 가능하게 관리할 수 있다.Redux의 기본 개념부터 시작해서 데이터 흐름, 주요 개념,그리고 비동기 처리까지 가능한 Redux-Thunk까지 정리 해보았다.⚙️ Redux 설치 방법Redux를 사용하려면 다음 두 개의 패키지를 설치해야 한다.npm install redux react-redux redux: 상태 관리의 핵심 기능을 제공react-redux: React 앱과 Redux를 연결하는 라이브러리⏳ 비동기 처리를 위해 Redux Thunk도 쓸 예정이라면?npm install redux-thunk 설치가 완.. 2025. 4. 22.
📌 Context API로 전역 상태 관리 하기 React를 사용하다 보면 컴포넌트 간에 데이터를 주고받는 일이 자주 발생한다.처음에는 props로 간단하게 전달하면 되지만,구조가 깊어질수록 props를 여러 단계를 거쳐 전달해야 하는 상황이 생긴다.이를 props drilling이라고 부른다고 했었다. (https://frontlogdev.tistory.com/34) 전역 상태를 관리하는 방법 중 하나가 바로 Context API다.이 글에서는 Context API가 무엇인지, 언제 사용하는지,그리고 어떻게 적용하는지 차근차근 예제를 통해 정리해보았다. 🧠 전역 상태(Global State)란?하나의 컴포넌트에만 쓰는 로컬 상태가 아니라, 앱 전체에서 공유되는 상태를 말한다.예: 로그인 여부, 사용자 정보, 다크모드 설정 등. 🧩 Context .. 2025. 4. 21.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바