0930 TIL-U

Section 6 React component Styling

CSS도 프레임워크가 있습니다. 그린님은 이 중 어떤걸 사용해보셨나요?

면접 질문 중 하나였다.

그때 나의 답으론 TailwindCSS와 Styled-components로 말씀드렸다.

오늘 난 리액트 컴포넌트 스타일링에 대한 강의를 들었고, 더 깊이있게 작성하려한다.

TIL1) 바닐라 css 스타일이 컴포넌트에 스코핑되지 않는 이유

바닐라 CSS 스타일은 리액트에서 개별 컴포넌트에 자동으로 스코핑되지 않는다. 그 이유는 바닐라 CSS의 특성상 전역에서 적용되기 때문이다. 리액트는 컴포넌트 단위로 코드를 관리하지만, 바닐라 CSS는 이를 구분하지 못하고 전체 애플리케이션에 영향을 미친다.

주요 개념

바닐라 CSS는 전역 범위로 적용되며, CSS가 컴포넌트 경계를 인식하지 않는다.
CSS 모듈이나 styled-components와 같은 도구를 사용하면, 컴포넌트별로 스타일을 스코핑할 수 있다.
CSS 모듈을 사용하면 클래스 이름이 고유하게 관리되어 컴포넌트 단위로 스타일이 적용된다.

/* App.css */
p {
    color: blue;
}


import React from 'react';
import './App.css'; // 전역으로 CSS가 적용됨

export default function App() {
    return <p>이 문장은 파란색입니다!</p>;  // 모든 <p> 태그에 파란색 적용
}

CSS Modules로 스코핑하는 예시:

import React from 'react';
import styles from './App.module.css'; // 모듈로 CSS 가져오기

export default function App() {
    return <p className={styles.blueText}>이 문장만 파란색입니다!</p>;
}


/* App.module.css */
.blueText {
    color: blue;
}

배운 점
바닐라 CSS는 기본적으로 전역에서 동작하기 때문에 스타일 충돌이 발생할 수 있다.
리액트에서 컴포넌트별로 스타일을 스코핑하려면 CSS Modules 또는 CSS-in-JS 솔루션을 사용하는 것이 좋다.
이렇게 하면 각각의 컴포넌트가 독립적인 스타일을 가질 수 있어 유지보수성이 향상된다.

TIL2) Styled Component 동적 및 조건적 스타일링

스타일 속성을 컴포넌트의 props에 따라 변경하거나 조건을 적용할 수 있음.

주요 개념

동적 스타일링: 컴포넌트에 전달된 props를 이용해 스타일을 동적으로 설정할 수 있다.

조건부 스타일링: 조건부 스타일링이란, props 값에 따라 서로 다른 스타일을 적용하는 방식. 즉, 컴포넌트에 전달된 props 값에 따라 스타일을 동적으로 변경할 수 있는 기능을 말함.

JavaScript의 삼항 연산자를 사용하여 조건부로 스타일을 쉽게 적용할 수 있다.

동적 스타일링
import React from 'react';
import styled from 'styled-components';

// Styled Components 정의
const StyledButton = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

export default function App() {
  return (
    <div>
      <StyledButton primary>Primary Button</StyledButton>
      <StyledButton>Default Button</StyledButton>
    </div>
  );
}

import React from 'react';
import styled from 'styled-components';

// 스타일 조건부로 변경
const StyledDiv = styled.div`
  background-color: ${(props) => (props.isActive ? 'green' : 'red')};
  color: white;
  padding: 20px;
  border-radius: 10px;
`;

export default function App() {
  const [isActive, setIsActive] = React.useState(false);

  return (
    <div>
      <StyledDiv isActive={isActive}>
        {isActive ? 'Active' : 'Inactive'}
      </StyledDiv>
      <button onClick={() => setIsActive(!isActive)}>Toggle</button>
    </div>
  );
}

배운점

Styled Components는 props를 활용해 동적 스타일을 쉽게 적용할 수 있으며, 컴포넌트의 상태에 따라 스타일을 유연하게 변경할 수 있다.
조건부 스타일링을 통해 다양한 상황에 맞춰 스타일을 적용할 수 있어, 코드의 가독성과 유지보수성을 높일 수 있다.
복잡한 UI에서 상태 변화에 따라 즉각적인 스타일 변화를 줄 수 있어 매우 유용하다.

TIL3) TailwindCSS 테일윈드 css로 데모 앱 옮기기

강의에서, 기존 데모 앱을 테일윈드 CSS로 옮기는 작업을 하면서, 테일윈드의 유틸리티 클래스가 어떻게 기존 CSS를 대체할 수 있는지 배웠다

주요개념

유틸리티 클래스: CSS 속성 하나하나를 테일윈드 클래스 하나로 쉽게 대체할 수 있다.
반응형 디자인: 테일윈드의 미디어 쿼리 프리픽스를 통해 다양한 화면 크기에 맞춰 스타일을 유연하게 변경할 수 있다.
가상 선택자: hover:, focus: 등의 프리픽스를 사용해 사용자 상호작용에 따라 스타일을 동적으로 변경 가능.

기존 css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

<div className="flex justify-center items-center h-screen">
  <h1 className="text-2xl font-bold text-gray-800">Hello, World!</h1>
</div>

반응형 디자인 적용 (Responsive Design)

기존 CSS의 미디어 쿼리를 테일윈드의 반응형 클래스로 쉽게 변환할 수 있었다. 중간 화면(md) 이상에서만 스타일을 변경하고 싶을 때, 간단히 프리픽스를 추가하여 해결.
<h1 className="text-2xl md:text-4xl font-bold text-gray-800">Responsive Title</h1>

배운점

반응형 디자인이 브레이크포인트 프리픽스를 사용해 매우 간편하게 적용되었다.
가상 선택자를 통해 사용자의 상호작용에 맞춘 동적 스타일링이 쉽게 구현되었다.
테일윈드를 적용한 덕분에 코드가 간결해지고 유지보수하기도 쉬워졌다.

Learned

미니 프로젝트에서 테일윈드를 처음 사용해 헤더와 메뉴바를 조정했을 때는 왜 사용하는지 잘 몰랐다. 하지만 프리픽스를 사용하면서, 스타일을 더 미세하게 조정할 수 있고, 직관적으로 확인할 수 있다는 점에서 효율적이라는 생각이 들었다.

이후 최종 프로젝트에서는 Styled Components와 CSS Modules을 모두 사용해봤다. Styled Components는 컴포넌트 단위로 스타일을 관리할 수 있어 유지보수 측면에서 강점이 있었지만, 조건에 따라 동적으로 스타일을 적용하려면 코드가 다소 복잡해졌다. 반면, CSS Modules는 전역 스타일 충돌을 방지하고, 컴포넌트별로 스타일을 분리할 수 있어 깔끔한 코드를 유지할 수 있었다. 그러나 클래스 이름을 일일이 기억해야 하는 점은 직관적이지 않아 불편할 때도 있었다.

테일윈드를 사용하면서 두 방법보다 간결하고 효율적인 스타일링이 가능하다는 걸 확실히 느꼈다. 특히, 레이아웃과 반응형 디자인을 테일윈드의 유틸리티 클래스를 통해 쉽게 처리할 수 있었고, 코드 가독성도 훨씬 높아졌다. 프리픽스를 통해 반응형 스타일을 직관적으로 적용할 수 있었고, 재사용 가능한 유틸리티 클래스 덕분에 시간을 많이 절약할 수 있었다.

프로젝트를 진행할수록 테일윈드의 장점이 점점 더 부각되었고, 앞으로는 Styled Components나 CSS Modules 대신 테일윈드를 더욱 적극적으로 활용할 의향이 생겼다.

0930

오늘, 아침에 일어나서 이거저거 계획세우고, 10월부터 시작할 새로운 세팅 등등 재밌었다.

2시간 운동 + 강의 2시간 + 글 정리 1시간 + 프로젝트 탐색 및 개발 ?시간 + 사이드 프로젝트 ?시간

프린이, 벨린이, 헬린이,,,,,난 왜 아직 어린이인가.

그리고 ,현아. 너 나한테 연락 적당히해. 나바쁘다. 데이식스는 혼자 좋아하세요.