이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 🎈 바닐라 CSS 스타일 컴포넌트에 스코핑 방법리액트에서 바닐라 CSS를 사용하는 경우, CSS가 리액트 컴포넌트에 스코프가 자동으로 적용되지 않습니다. 이는 CSS가 전역적으로 적용되기 때문에, 컴포넌트가 여러 개 있을 때 스타일이 서로 충돌할 수 있습니다.즉, 같은 페이지에 존재하는 A 컴포넌트와 B 컴포넌트가 존재한다고 할때, A 컴포넌트의 스타일에 필요한 css가 B컴포넌트의 스타일에 영향을 미칠 수 있습니다. 이를 해결하기 위해서 리액트 컴포넌트에 CSS를 스코프(scope)하기 위해 몇가지 방법을 소개해드리겠습니다. 1️⃣ style Prop 사용..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.기존의 class="btn primary" 같은 추상적인 클래스명 대신, class="bg-blue-500 text-white p-4 rounded"처럼 직관적인 유틸리티 클래스들을 조합해서 스타일을 만듭니다.설치 방법프로젝트에 Tailwind 설치 (예: Vite 기준)npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p설정 파일 (tailwind.config.js) 예시module.exports..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. styled-component 는 CSS-in-JS 방식을 사용하는 라이브러리입니다.말 그대로 CSS 코드를 자바스크립트 안에 작성할 수 있게 해줍니다. 그리고 중요한 건, 작성한 스타일이 해당 컴포넌트에만 적용된다는 점입니다.즉, 스타일이 자동으로 스코프(scope)되어 다른 컴포넌트와 충돌하지 않도록 해줍니다.styled-component 설치npm install styled-components사용 방법 예시// Button.jsximport styled from 'styled-components';const StyledButton = styled.butto..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. CSS Modules은 CSS 클래스 이름을 자동으로 고유하게 만들어주는 방법입니다. 이를 통해 각 컴포넌트에서 사용하는 CSS가 전역에 영향을 미치지 않게 할 수 있습니다.create-react-app을 사용하면, CSS Modules는 기본적으로 지원됩니다. .module.css 확장자를 사용하면 됩니다.Button.module.css/* Button.module.css */.button { background-color: green; color: white; padding: 10px;}Button.js// Button.jsimport React fro..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.style Prop을 사용해서 CSS를 자바스크립트 객체로 작성하여 JSX에서 스타일을 적용할 수 있습니다. 이 방법을 통해 간단한 스타일링이나, 동적인 스타일 변경을 할 때 사용 가능 합니다.style Prop 기본 사용법CSS 속성 이름은 camelCase로 작성값은 문자열 또는 숫자로 작성function App() { return ( Click me! );}export default App;동적 스타일링 가능import React, { useState } from 'react';function App() {..