리액트 (20) 썸네일형 리스트형 ✅ 12편. 리액트에서 CSS 스타일링 방법 총정리 (Styled-Components, CSS Modules 등) ✅ 12. 리액트에서 CSS 스타일링 방법 총정리 (Styled-Components, CSS Modules 등)리액트는 스타일링 방법이 다양합니다. 각 방법의 특징과 사용 시기를 알면 프로젝트 구조가 훨씬 깔끔해집니다.✔ 1. CSS Module파일 이름: Button.module.css .button { background: blue; color: white; } 사용: import styles from "./Button.module.css"; 버튼 장점 클래스명 충돌 없음 사용 편리✔ 2. Styled-ComponentsJS 안에 CSS를 작성하는 기법입니다. import styled from "styled-components"; const Button = styled.button` backgroun.. ✅ 11편. 리액트 프로젝트 폴더 구조 설계 Best Practice ✅ 리액트 프로젝트 폴더 구조 설계 Best Practice리액트 프로젝트는 규모가 커질수록 폴더 구조가 매우 중요합니다. 깔끔한 구조는 협업과 유지보수에 핵심적인 역할을 합니다. 아래는 가장 널리 쓰이는 Best Practice 구조입니다.✔ 기본 추천 폴더 구조src/ assets/ components/ pages/ hooks/ utils/ services/ store/ styles/ App.js index.js✔ 폴더별 역할📁 components/ 재사용 가능한 UI 컴포넌트 예: Button, Card, Modal 📁 pages/ 라우터와 연결된 페이지 단위 컴포넌트 예: HomePage, LoginPage 📁 hooks/ Custom Hook 저장소 예: useInput, useFetch .. ⭐ 10편 — 리액트에서 비동기 처리 완전 정리: fetch, axios, async/await, useEffect 패턴까지 실전 가이드 ⭐ 10편 — 리액트에서 비동기 처리 완전 정리: fetch, axios, async/await, useEffect 패턴까지 실전 가이드리액트로 API를 호출하다 보면 다음과 같은 문제들을 한 번쯤 겪게 됩니다. useEffect 안에서 async 쓰면 왜 오류 날까? fetch와 axios는 뭐가 다를까? 상태 업데이트 시점이 꼬이는 이유는? API를 여러 번 호출되는 문제는 왜 생길까? 이번 글에서는 비동기 처리의 원리부터 실무 패턴, 문제 해결법까지 차근차근 정리해드릴게요.✅ 1. 리액트에서 비동기를 다루는 기본 개념리액트는 렌더링을 먼저 실행하고, 그 후에 비동기 코드를 처리합니다. 즉, API 호출은 반드시 렌더링 이후에 실행되며 이때 사용하는 대표적인 도구가 바로 useEffect입니다.✅ 2.. ⭐ 9편 — 리액트 상태 관리 기본기: Context API vs Redux 실전 비교, 초보자도 알 수 있게 정리 ⭐ 9편 — 리액트 상태 관리 기본기: Context API vs Redux 실전 비교, 초보자도 알 수 있게 정리리액트로 프로젝트를 만들다 보면 “어느 컴포넌트에서든 공통으로 필요한 데이터”가 반드시 생깁니다. 예를 들어: 로그인 정보 사용자 정보 장바구니 다크모드 설정 알림 상태 언어 설정(ko/en) 이런 값들은 한두 개 컴포넌트만 쓰는 게 아니라 여러 페이지 / 여러 컴포넌트에서 공통으로 필요합니다. 이럴 때 사용하는 것이 전역 상태 관리입니다. 리액트에서 전역 상태를 관리할 때 가장 많이 쓰는 방식은 ✔ Context API ✔ Redux 이 두 가지입니다. 둘 다 장단점이 확실하고, 프로젝트의 성격에 따라 선택해야 합니다. 이번 글에서는 “언제 어떤 걸 써야 하는지”까지 명확하게 알려드릴게요... ⭐ 7편 — React Router 완전 정복: 페이지 이동부터 동적·중첩 라우팅까지 실전 가이드 ⭐ 7편 — React Router 완전 정복: 페이지 이동부터 동적·중첩 라우팅까지 실전 가이드리액트는 SPA(Single Page Application) 방식이기 때문에 브라우저 주소가 바뀐다고 실제로 새로운 HTML 파일을 로드하지 않습니다. 대신 라우터가 경로에 따라 다른 컴포넌트를 보여주는 방식으로 동작합니다. React Router는 리액트에서 가장 많이 쓰는 공식적인 라우팅 라이브러리이며, 웹 서비스의 구조를 잡을 때 반드시 필요한 도구입니다.✅ 1. React Router 설치React Router v6 기준 설치 명령어입니다. npm install react-router-dom 설치 후엔 App 컴포넌트에서 라우팅 구성을 시작할 수 있습니다.✅ 2. 기본 구조: BrowserRouter,.. ⭐ 8편 — 리액트 리스트 렌더링 완전 정복: key가 중요한 이유와 성능 문제까지 한 번에 이해하기 ⭐ 8편 — 리액트 리스트 렌더링 완전 정복: key가 중요한 이유와 성능 문제까지 한 번에 이해하기리액트로 화면을 만들다 보면 가장 자주 하는 작업 중 하나가 바로 배열 데이터를 화면에 반복 렌더링하는 것입니다. 게시글 목록 쇼핑몰 상품 리스트 사용자 목록 댓글 리스트 이런 기능들은 모두 배열을 map으로 돌려 렌더링하게 됩니다. 그런데 이 리스트 렌더링에서 가장 중요한 개념이 바로 key 속성입니다. 많은 초보자들이 이 key를 “그냥 넣으라고 해서 넣는 값” 정도로 생각하는데, 실제로는 리렌더링 성능에 직접적인 영향을 주는 핵심 요소입니다. 이번 글에서는 key가 왜 필요한지, 그리고 어떤 값을 key로 써야 하는지까지 실전 기준으로 설명해드릴게요.✅ 1. 기본 리스트 렌더링 패턴.리액트에서 리스트.. ⭐ 6편 — 리액트 리렌더링과 성능 최적화 완전 정복: React.memo, useCallback, useMemo 제대로 쓰는 법 ⭐ 6편 — 리액트 리렌더링과 성능 최적화 완전 정복: React.memo, useCallback, useMemo 제대로 쓰는 법리액트를 제대로 배우다 보면 언젠가 반드시 이런 고민이 생깁니다. “왜 이 컴포넌트가 계속 리렌더링되지?” “state를 바꾸면 관계 없는 컴포넌트까지 다시 그려지는 이유는?” “최적화는 언제, 어떻게 하는 게 맞는 걸까?” 리렌더링과 최적화에 대한 이해가 부족하면 프로젝트 규모가 조금만 커져도 성능 저하가 금방 드러납니다. 저 역시 초기에 최적화를 잘못 이해해서 필요 없는 곳에 useMemo를 남발했고, 오히려 코드만 복잡해진 경험이 있습니다. 이번 글에서는 “언제 최적화를 해야 하는지”부터 각 도구(React.memo / useCallback / useMemo)를 어떻게 써.. ⭐ 5편 — useRef 완전 정복: DOM 제어부터 값 저장까지 실무에서 자주 쓰는 패턴 총정리 ⭐ 5편 — useRef 완전 정복: DOM 제어부터 값 저장까지 실무에서 자주 쓰는 패턴 총정리리액트를 배우다 보면 useRef는 useState나 useEffect보다 존재감이 약합니다. 하지만 실제 프로젝트를 해보면 useRef는 "알아두면 개발 속도가 확 올라가는 실전 훅"이라는 걸 깨닫게 됩니다. 많은 개발자들이 처음에는 useRef의 용도를 “DOM을 조작할 때 쓰는 훅” 정도로만 알고 있지만, 실제로는 더 다양한 역할을 합니다. 이번 글에서는 useRef의 모든 핵심 개념을 쉽게 이해하고 바로 실전에 쓸 수 있도록 정리해드릴게요.✅ 1. useRef란 무엇인가?useRef는 리액트에서 값을 저장하거나 DOM 요소에 접근하기 위한 훅입니다. const ref = useRef(null); 여기서.. 이전 1 2 3 다음