📘 [Recat] React 리액트 컴포넌트 스타일링

2025년 04월 07일 in Dev / Frontend on #React #Web

[Recat] React 리액트 컴포넌트 스타일링

Vanilla CSS란?

Vanilla CSS는 기본적인 CSS 파일을 활용하는 전통적인 방식으로, 특별한 CSS-in-JS 도구 없이 순수 CSS 파일을 작성하고 .jsx 컴포넌트에서 import하여 사용하는 방식입니다.

---

index.css 방식

• 전역 스타일 파일(index.css 등)을 만들어 프로젝트의 공통 스타일을 정의하고 사용
• Vite, Webpack 등의 빌드 도구는 import './index.css'와 같은 형태를 만나면, 해당 CSS를 HTML에 자동 삽입해줌

📌 사용 예시:

`/* index.css */ body {   margin: 0;   font-family: 'Arial'; }  .header {   background-color: #f0f0f0; }`

`// App.jsx import './index.css';  function App() {   return <h1 className="header">Hello CSS</h1>; }`

• 모든 컴포넌트에 전역 적용되므로 스타일 충돌 위험 있음
• 빠르고 간단함

Vanilla CSS의 장점과 한계

✅ 장점:

• CSS를 잘 아는 디자이너와의 역할 분담이 쉬움
• 별도 문법 없이도 리액트 앱에 사용 가능
• 여러 CSS 파일로 모듈화 가능
• 특정 CSS 규칙만 정의된 파일을 필요한 컴포넌트에서 import하는 유연함

⚠️ 단점:

• CSS가 컴포넌트 범위에 스코프 되지 않음
• CSS 이름 충돌 및 스타일 오염 위험
  • 예: .header라는 클래스가 여러 컴포넌트에서 중복 사용될 경우
• 컴포넌트 간 스타일 간섭 가능성 존재

Vanilla CSS의 스코핑 문제

Vanilla CSS는 컴포넌트 단위로 스타일이 스코핑(범위 지정)되지 않습니다. 즉 특정 CSS 파일을 특정 컴포넌트에서 import했더라도, 그 규칙이 앱 전체에 적용될 수 있습니다.

인라인 스타일링

• JSX 요소에 직접 스타일 지정
• 스타일이 해당 요소에만 적용됨 → 안전한 스코프
• 자바스크립트 객체로 스타일 지정해야 함

<p style="color: red;">잘못된 방식</p>  // HTML에서는 가능하지만 React에서는 에러 발생

<p style=>
  인라인 스타일 적용
</p>

• style=: JSX에서 객체를 전달할 때 사용
• text-align → textAlign: CSS 속성명은 카멜케이스로 표기

조건부 인라인 스타일

const isValid = true;
<p style=>
  유효성에 따른 색 변경
</p>

조건부 className 적용 (CSS 클래스 활용)

<label className={`label ${emailNotValid ? 'invalid' : ''}`}>
  Email
</label>

• JSX에서는 조건에 따라 클래스를 붙일 때, 삼항연산자를 사용하는 것이 안정적.
• 백틱(``)과 ${}를 활용하여 템플릿 리터럴로 클래스 병합.

CSS Modules 방식 설명

• 기존 CSS 방식(vanilla CSS)은 스타일의 전역 적용 문제가 있음.
• 특정 CSS 클래스가 의도치 않게 다른 컴포넌트에도 영향을 미칠 수 있음. 이와 같은 문제를 CSS Module 방식으로 해결

Header.css ➜ Header.module.css

// Header.jsx
import classes from './Header.module.css';

<p className={classes.paragraph}>텍스트</p>

• 빌드 툴이 classes.paragraph를 고유한 이름으로 변환 (paragraph_abc123) 개발자 도구에서 확인가능
• 이 클래스는 해당 컴포넌트 안에서만 유효함 → 스타일 스코핑 가능

<p className={isHighlighted ? classes.highlight : ''}>조건부 스타일</p>

• 해당 컴포넌트 안에서만 CSS 적용 가능
• CSS 코드가 여전히 JS/JSX와 분리됨
• CSS 파일이 컴포넌트마다 늘어날 수 있음 → 관리 번거로움

styled-components 방식 설명

CSS-in-JS 방식으로, JavaScript 코드 내부에서 스타일을 직접 작성

//설치
npm install styled-components

// AuthInputs.jsx
import styled from 'styled-components';

const ControlContainer = styled.div`
  margin: 1rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
`;

function AuthInputs() {
  return (
    <ControlContainer>
      <label>이메일</label>
      <input type="email" />
    </ControlContainer>
  );
}

• styled.div`: 태그드 템플릿 리터럴(tagged template literals)을 사용해 스타일 정의
• ControlContainer: styled-components가 생성한 특별한 div 컴포넌트
• 내부적으로 고유한 클래스명이 생성되어 적용됨
• 스타일과 컴포넌트 코드가 통합됨
• JS 변수나 조건을 그대로 사용할 수 있음
• 동적 스타일 적용 용이

  const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  %% 동적 스타일 적용 %%
  `;
  

• CSS 코드가 JS 내부에 있어 가독성이 떨어질 수 있음
• styled-components 패키지에 의존해야 함

styled-components 조건부 스타일링 적용

// 레이블에 조건부 색상 적용
const Label = styled.label`
  color: ${props => props.$invalid ? '#ca3e51' : '#464646'};
`;

// 인풋에 조건부 색상 + 배경 적용
const Input = styled.input`
  background-color: ${props => props.$invalid ? '#fddddd' : '#f8f8f8'};
  color: ${props => props.$invalid ? '#ca3e51' : '#2c292b'};
  border-color: ${props => props.$invalid ? '#ca3e51' : '#ccc'};
`;

• styled-components만으로 완전한 UI 제어 가능
• className 대신 props로 동적 제어 → 더 React스러운 방식

Styled Components: 가상 선택자, 중첩 규칙 & 미디어 쿼리

import styled from 'styled-components';

const StyledHeader = styled.header`
  text-align: center;
  margin: 2rem auto;

  & img {
    width: 5rem;
    height: 5rem;
  }

  & h1 {
    font-size: 2rem;
    color: #333;
  }

  & p {
    color: #666;
  }

  @media (min-width: 768px) {
    margin-bottom: 4rem;

    & h1 {
      font-size: 3rem;
    }
  }
`;

• & img → Header 내부의 이미지에 적용
• & h1, & p → 내부 텍스트에 적용
• @media (min-width: 768px) 내에 & h1 등을 중첩해서 사용 가능

Styled Components 분리

스타일드 컴포넌트를 분리하고 재사용성 있게 만들기

// Button.jsx
import styled from 'styled-components';

const Button = styled.button`
  background-color: #6200ee;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #3700b3;
  }
`;
export default Button;

// AuthInputs.jsx
import Button from './Button';
import Input from './Input';

const AuthInputs = () => {
  return (
    <>
      <Input label="Email" type="email" invalid={false} />
      <Input label="Password" type="password" invalid={true} />
      <Button>Submit</Button>
    </>
  );
};

• 스타일 컴포넌트를 import하여 Wrapper 컴포넌트 적용
• 컴포넌트를 작은 단위로 분리하면 유지보수성과 재사용성이 향상됨
• 스타일이 컴포넌트와 함께 존재하므로 범위 충돌이 없음
• CSS를 아는 것이 전제 조건임
• Wrapper 컴포넌트의 수가 많아질 수 있지만 이는 리액트의 철학과 부합함

📑 Reference

---

• 【한글자막】 React 완벽 가이드 2025 with React Router & Redux | Udemy
• 이미지 출저 Freepik | 올인원 AI 크리에이티브 툴

---