본문 바로가기

javascript
24

📌 React 성능 최적화 정리 React 프로젝트를 최적화하기 위해 꼭 알아야 할 개념들을 정리했음.이 글에서는 번들링과 코드 스플리팅, 그리고 입력 이벤트 제어 기법인 debounce와 throttle을 실제 예제와 함께 정리했다.📦 번들링(Bundling)이란?여러 개의 파일을 하나로 묶는 작업React 프로젝트를 개발하면 자바스크립트 파일, CSS, 이미지 등 다양한 리소스가 생성됨. 번들링은 이러한 리소스들을 하나의 파일로 묶어서 브라우저가 로딩할 파일의 수를 줄이고, HTTP 요청 횟수를 줄여 속도 향상을 가능하게 함.🔧 대표 번들링 도구ViteRollupCRA (Create React App)Webpack✅ 번들링의 효과HTTP 요청 수 감소 → 성능 향상코드 압축 → 파일 크기 축소사용되지 않는 코드 제거(트리 쉐이킹.. 2025. 4. 24.
📌 복잡한 상태관리를 깔끔하게! 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.
📌 React 앱을 가볍게! 전역 상태 관리로 구조 최적화하기 React에서 상태를 관리할 때 가장 기본적으로 사용하는 것은 useState이다. 하지만 앱의 규모가 커지고 여러 컴포넌트에서 동일한 상태를 사용해야 할 때, 단순한 useState만으로는 한계가 발생한다. 그 이유는 바로 props drilling 때문이다. 🔹 Props Drilling 이란?Props Drilling이란 상태나 함수를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들을 거쳐 계속 props로 내려보내는 현상을 말한다. counter 표시 counter 증가 버튼 App 컴포넌트에서 counter 상태를 만들고 Child3, Child6에서 각각 상태를 읽거나 변경해야 한다면, 이 값을 중간 컴포넌트들을 계속 거쳐서 prop.. 2025. 4. 18.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바