Custom Component

리액트에서의 커스텀 컴포넌트와 스타일드 컴포넌트

커스텀 컴포넌트는 리액트에서 특정 기능이나 레이아웃을 가진 컴포넌트를 사용자 정의로 만들어 재사용할 수 있도록 하는 것이다. 예를 들어, 여러 페이지에서 반복적으로 사용되는 헤더, 푸터, 버튼 등을 커스텀 컴포넌트로 만들어 관리할 수 있다.

스타일드 컴포넌트는 CSS-in-JS 라이브러리 중 하나로, 컴포넌트의 스타일을 자바스크립트 파일 안에서 관리할 수 있게 해준다. 이 방식은 각 컴포넌트에 고유한 스타일을 적용할 수 있게 하며, 스타일 시트 충돌을 방지하고, 스타일 관련 코드를 찾기 쉽게 만든다.

예를 들어, 버튼 컴포넌트를 만들 때 다음과 같이 스타일드 컴포넌트를 사용할 수 있다:

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

const App = () => (
  <Button>Click Me</Button>
);

 

SASS: 변수 사용 가능

SASS는 CSS를 확장한 프리프로세서로, 변수, 중첩 규칙, 믹스인 등 다양한 기능을 제공하여 CSS 코드를 더 효율적으로 작성할 수 있도록 돕는다. 변수를 사용하면, 예를 들어, 사이트의 주 색상이 변경되어야 할 때, 해당 변수만 수정하면 관련된 모든 스타일이 자동으로 업데이트된다.

$primary-color: blue;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

 

비용 절감 및 속도 향상

스타일드 컴포넌트와 SASS를 사용하면 스타일 코드의 중복을 줄이고, 개발자 간의 커뮤니케이션 비용을 감소시킨다. 또한, 코드가 간결해져 개발 속도가 향상되며, 이는 프로젝트의 총 개발 비용을 줄이는 데 도움이 된다. 스타일 변경이 필요할 때 한 부분만 수정하면 전체적으로 반영되므로, 유지보수 시간도 크게 단축된다.

 

클래스와 아이디의 차이

CSS에서 클래스는 .을 사용하여 여러 요소에 동일한 스타일을 적용할 수 있는 반면, 아이디는 #을 사용하여 단 하나의 요소에만 유니크한 스타일을 적용할 수 있다. 클래스는 재사용이 가능하므로 여러 요소에 적용될 수 있지만, 아이디는 문서 내에서 유일해야 하므로 한 번만 사용될 수 있다.

<button class="btn-primary">Save</button>
<button class="btn-primary">Cancel</button>

<div id="header">Page Header</div>

위 예제에서, .btn-primary 클래스는 두 버튼에 모두 적용되어 동일한 스타일을 공유하지만, #header 아이디는 오직 하나의 div에만 적용된다. 이렇게 CSS를 통해 스타일을 적용하는 방식은 리액트에서도 유사하게 활용할 수 있다.