본문 바로가기

react
11

📌 React 앱을 가볍게! 전역 상태 관리로 구조 최적화하기 React에서 상태를 관리할 때 가장 기본적으로 사용하는 것은 useState이다. 하지만 앱의 규모가 커지고 여러 컴포넌트에서 동일한 상태를 사용해야 할 때, 단순한 useState만으로는 한계가 발생한다. 그 이유는 바로 props drilling 때문이다. 🔹 Props Drilling 이란?Props Drilling이란 상태나 함수를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들을 거쳐 계속 props로 내려보내는 현상을 말한다. counter 표시 counter 증가 버튼 App 컴포넌트에서 counter 상태를 만들고 Child3, Child6에서 각각 상태를 읽거나 변경해야 한다면, 이 값을 중간 컴포넌트들을 계속 거쳐서 prop.. 2025. 4. 18.
📌 styled-components 정리! React에서 컴포넌트를 만들다 보면 스타일을 따로 .css 파일에 작성하고, 클래스 이름을 주고, 관리하고... 생각보다 귀찮고 헷갈릴 때가 많다.이럴 때 styled-components를 사용하면, CSS도 컴포넌트처럼 만들어서 코드 안에서 바로 스타일을 줄 수 있어서 훨씬 편하고 직관적이다. styled-components를 처음 설치하는 방법부터, 실제로 사용하는 방식, props를 통한 커스터마이징, 전역 스타일 설정, 재사용까지 전부 정리해보았다.1️⃣ styled-components 설치 방법styled-components는 React에서 스타일을 편하게 줄 수 있는 라이브러리임. CSS를 컴포넌트처럼 만들 수 있어서 유지보수가 쉬움.npm install styled-components 만약.. 2025. 4. 16.
📌 SCSS : 변수, 중첩, @mixin 정리! SCSS(Sassy CSS)의 핵심 기능인 변수, 중첩 규칙, 믹스인을 배웠다.실제 예제를 통해 쉽게 이해할 수 있도록 정리해보았다!1️⃣ SCSS 설치 방법SCSS를 사용하려면 프로젝트에 sass 패키지를 설치해야 한다. Vite 또는 CRA 환경 모두 동일하게 설치하면 된다.npm install sass 설치 후에는 .scss 확장자의 파일을 생성하고 import './파일명.scss' 형태로 JS/JSX에서 불러올 수 있다. 예를 들어, App.jsx 파일에서 다음과 같이 SCSS 파일을 불러올 수 있다.import './App.scss' 2️⃣ SCSS의 변수 사용법▸ 변수 선언 및 사용 방법SCSS 변수는 $ 기호를 앞에 붙여 선언한다. CSS에서는 동일한 값을 반복해서 작성해야 하지만SCSS에.. 2025. 4. 15.
📌 React의 useEffect와 생명주기 비교 정리 React를 학습하면서 가장 혼란스러운 개념 중 하나는 바로useEffect와 클래스형 컴포넌트의 생명주기 함수들이다.useEffect의 다양한 사용 패턴을 알아보고,클래스형 컴포넌트의 생명주기 함수와 어떻게 대응되는지 정리해보고자 한다.🧩 사전지식: React 컴포넌트는 언제 렌더링되는가?React는 상태(state)가 바뀔 때마다 다시 렌더링된다. 다시 말해, setState나 useState의 set함수가 호출되면 해당 컴포넌트는 다시 실행된다.즉, 다음과 같은 흐름을 가진다:컴포넌트가 처음 화면에 나타날 때 → 마운트(Mount)상태가 바뀌어 다시 렌더링될 때 → 업데이트(Update)컴포넌트가 사라질 때 → 언마운트(Unmount)이러한 흐름은 함수형 컴포넌트든, 클래스형 컴포넌트든 동일하다... 2025. 4. 10.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바