[React]Styled Components의 장점

Styled-Components란?

자바스크립트 기반의 CSS-in-JS라이브러리로 React 및 기타 프레임워크에서 사용되어 UI를 스타일링하는데 효과적으로 활용 된다.
이 라이브러리를 사용하면 자바스크립트 파일 내에서 CSS를 작성하고 컴포넌트에 스타일을 적용할 수 있다.

+ Styled-Components가 아닌 다른 CSS-in-JS로는 'Emotion', 'Glamorous', 'Styled-jsx' 등이 있다.

장점

• 컴포넌트 기반 스타일링 : Styled Components는 CSS스타일을 컴포넌트와 함께 정의하므로 컴포넌트 지향 개발 방식과 잘 어울린다. 각 컴포넌트에 대한 스타일을 포함한 Styled Components를 만들 수 있다.
• 스타일 재사용 : Styled Components는 재사용 가능하므로 여러 컴포넌트에서 동일한 스타일을 사용할 수 있다. 이를 통해 코드의 중복을 줄이고 유지 보수성을 향상 시킨다.
• 동적 스타일링 : Styled Components는 스타일을 컴포넌트 내부에 캡슐화하므로 스타일 간의 충돌을 방지한다. 이로써 전역 스타일 간의 간섭을 최소화하고 컴포넌트 간에 독립성을 유지할 수 있다.
• 프리프로세서 없이 CSS작성 : Styled Components를 사용하면 CSS 전처리기(ex. Sass, Less)없이도 자바스크립트 내에서 CSS를 작성할 수 있다. 이로써 프로젝트 설정과 빌드 프로세스를 간소화 할 수 있다.
• 테마 지원 : 테마 지원을 통해 동적으로 스타일을 변경하고 애플리케이션의 외관을 쉽게 수정할 수 있다.
• 서버 사이드 렌더링(SSR)지원 : Styled Components는 서버 사이드 렌더링과 함께 사용하기 쉽다. 이를 통해 초기 렌더링 시에도 스타일이 적용되어 빠른 페이지 로딩과 검색 엔진 최적화를 달성할 수 있다.
• 인기와 생태계 : Styled Components는 React생태계에서 매우 인기가 있으며, 다양한 확장 기능과 플러그인이 존재하여 개발자들이 효과적으로 스타일링을 수행할 수 있다.
• CSS-in-JS 표준 : CSS-in-JS 패러다임을 구현한 라이브러리 중 하나로, 모던한 웹 개발에서 사용되는 표준 스타일링 방법 중 하나이다.

Q. 스타일을 컴포넌트 내부에 캡슐화하여 스타일 간의 충돌을 방지한다?

Styled Components에서 스타일을 컴포넌트 내부에 캡슐화한다는 개념은 스타일과 관련된 CSS규칙을 각각의 컴포넌트에 묶어서 유지하는 것을 의미한다.

기존의 전통적인 방식에서는 전역 스타일 시트를 사용하여 여러 컴포넌트가 하나의 스타일 시트에 접근하여 스타일을 공유하게 되는데 이로 인해 여러 문제가 발생할 수 있다.

• 스타일간의 충돌 : 서로 다른 컴포넌트에서 동일한 CSS 클래스 이름을 사용하면 스타일이 충돌할 수 있다. 이로 인해 의도치않은 디자인 문제가 발생할 수 있다.
• 의존성 관리 : 전역 스타일을 사용할 때, 여러 컴포넌트가 동일한 스타일 규칙을 공유하므로 스타일 변경 시 다른 컴포넌트에도 영향을 미칠 수 있다. 이로 인해 유지 보수가 어려워진다.
• 독립성 부족 : 각 컴포넌트가 독립적으로 스타일을 관리하지 못하고 전역 스타일에 의해 컴포넌트간의 의존성이 높아질 수 있다.

다시 돌아가서, Styled Components에서 스타일을 컴포넌트 내부에 캡슐화 한다는것은 Styled Components는 특정 컴포넌트의 스타일은 그 컴포넌트 범위 내에서만 적용되고 격리된다는 의미이다.
그렇다면 이것이 왜 중요한지 살펴보자.

• 스타일 간 충돌 방지 : 각 컴포넌트 내부에 정의된 스타일은 해당 컴포넌트 내에서만 적용되므로 스타일 간의 충돌이 방지된다. 즉, 각 컴포넌트가 독립적으로 스타일을 관리하기 때문에 다른 컴포넌트의 스타일과 충돌하는 일이 거의 없다.
• 독립성 유지 : 각 컴포넌트가 자체 스타일을 관리하기 때문에 독립성이 확보되며, 컴포넌트 간의 의존성이 줄어든다. 다른 컴포넌트의 스타일 변경이 현재 작업 중인 컴포넌트에 영향을 미치지 않는다.
• 유지 보수의 용이성 : 각 컴포넌트의 스타일은 해당 컴포넌트 파일 내에 정의되므로 유지 보수가 용이하다. 컴포넌트를 이해하고 수정하기 쉽다. 즉 해당 컴포넌트의 코드를 수정하거나 이동할 때 스타일도 함께 이동하거나 수정할 수 있어 유지 보수가 용이하다.
• 스타일의 재사용 : 컴포넌트 내부에서 정의된 스타일은 해당 컴포넌트에서만 사용되지 않고 다른 컴포넌트에서도 재사용할 수 있다.

Q. 왜 Styled Components가 SSR과 함께 사용하기 쉬울까?

• 서버 및 클라이언트에서 동일한 코드 : Styled Components를 사용하면 서버 측과 클라이언트 측에서 동일한 코드를 사용하여 스타일을 정의할 수 있다. 이것은 서버와 클라이언트 간의 일관성을 유지하고 스타일이 일관되게 적용되도록 도와준다.
• 서버에서 초기 렌더링 : 서버 사이드 렌더링은 엡 페이지의 초기 렌더링을 서버에서 수행하는 기술이다. 초기 렌더링 시에는 클라이언트 측 자바스크립트가 아직 실행되지 않은 상태에서 페이지를 생성한다. Styled Components는 자바스크립트 코드 내에서 스타일을 정의하기 때문에 서버에서도 동일한 스타일을 적용할 수 있다.
• 같은 컴포넌트 코드 재사용 : 서버 사이드 렌더링을 사용하면 서버에서 컴포넌트를 렌더링하고 HTML을 생성한다. 이때 Styled Components로 스타일이 적용된 컴포넌트를 사용하면 클라이언트와 서버에서 동일한 컴포넌트 코드를 재사용할 수 있다. 이것은 코드의 중복을 줄이고 유지 보수성을 향상 시킨다.
• 검색 엔진 최적화(SEO) : 서버 사이드 렌더링은 검색 엔진 최적화를 향상시키는데 도움이 된다. 검색엔진은 초기 HTML 콘텐츠를 파악하고 인덱싱하는데 시간이 걸리며, 클라이언트 측에서 자바스크립트로 렌더링되는 콘텐츠는 초기에 인식하지 못할 수 있다. Styled Components를 서버 사이드 렌더링과 함께 사용하면 초기 렌더링 시에도 스타일이 적용된 HTML을 검색 엔진에 제공할 수 있으므로 SEO향상에 도움이 된다.

Styled Components를 활용한 예제 코드 살펴보기

styled components 재사용 예제 코드

// App.js

import styled from 'styled-components';

const SimpleButton = styled.button`
    color:white;
    background-color:green;
`;

// 기존에 만들어진 Styled Components를 재사용(상속)하여 속성을 추가할 수 있다.
const LargeButton = styled(SimpleButton)`
    font-size:50px;
`;

function App() {
    return (
         <dib>
          <SimpleButton>Simple</SimpleButton> // 흰글자, 초록배경의 버튼
           <LargeButton>Large</LargeButton> // 흰글자, 초록배경, 폰트크기 50px의 버튼
      </div>
   );
}

export default App;

위 예제코드는 Styled Components를 사용하여 기존에 만들어진 스타일링이 된 버튼 컴포넌트를 재사용하여 스타일 속성을 추가한 예제코드이다.

하지만 기존의 CSS를 이용하여 만들때에는 주의해야하는 점이 있다.

기존 CSS와 styled components를 함께 사용하는 방법

// App.js

import styled from 'styled-components';

// 기존 방식으로 버튼 생성
const ReactButton = props => {
    return <button>{props.children}</button>
}

const ReactLargeButton = styled.(ReactButton)`
    font-size:50px;
`;

function App() {
    return (
         <dib>
        <ReactButton>React</ReactButton> // 일반적인 버튼
        <ReactLargeButton>React Large</ReactLargeButton> // 일반적인 버튼
      </div>
   );
}

export default App;

이렇게 일반적인 방식으로 버튼을 생성 후, styled components의 코드 재사용처럼 작성하게 되면 아무런 변화가 일어나지 않는다.
그렇다면 어떻게 해결해야할까?

import styled from 'styled-components';

const ReactButton = props => {
    return <button className={props.className}>{props.children}</button>
}

const ReactLargeButton = styled.(ReactButton)`
    font-size:50px;
`;

function App() {
    return (
         <dib>
        <ReactButton>React</ReactButton> // 일반적인 버튼
        <ReactLargeButton>React Large</ReactLargeButton> // 폰트크기 50px의 ReactButton 스타일과 동일한 버튼
      </div>
   );
}

export default App;

이렇게 className={props.className}을 추가적으로 기재해줘야지만 styled components의 재사용과 비슷한 결과를 얻을 수 있다.

props를 이용한 styled components 사용법

import styled from 'styled-components';

const PrimaryButton = styled.button`
    color:${function(props){
        if(props.primary){
            // primary가 true일때는 white
            return 'white';
        } else {
            // primary가 false일때는 black
            return 'black';
        }
    }};
`;

function App(){
    return (
        <div>
            <PrimaryButton>Normal</PrimaryButton> // 폰트 색깔 검정
            <PrimaryButton primary>Primary</PrimaryButton> // 폰트 색깔 흰색
        </div>
    );
}

export default App;

위 예제코드는 props를 이용하여 styled components를 활용하는 방법이다.
props에 primary가 있는 경우 color:white;로 나오고 primary가 없는 경우 color:black;이 나오는 코드이다.

삼항연산자를 이용하여 위 코드 다시 작성해보기

import styled from 'styled-components';

const PrimaryButton = styled.button`
    // true 일때는 white, false일때는 black
    color:${props=>props.primary ? 'white' : 'black'};
`;

function App(){
    return (
        <div>
            <PrimaryButton>Normal</PrimaryButton> // 폰트 색깔 검정
            <PrimaryButton primary>Primary</PrimaryButton> // 폰트 색깔 흰색
        </div>
    );
}

export default App;

삼항연산자를 이용하여 작성해주면 코드의 간결성을 부여할 수 있다.

가장 큰 장점으로는 자바스크립트 파일에 우리가 알고 있는 CSS를 그대로 사용할 수 있다는 점과 스타일이 적용된 컴포넌트를 쉽게 만들 수 있다는 점이라고 생각한다.

개인적으로 메인 프로젝트를 하면서 동일한 스타일을 가진 버튼 컴포넌트를 여러 페이지에서 작업해야하는 상황이 있었는데,
그때 유용하게 사용되었었고, 또 이후에 수정이 필요한 부분에 대해서도 한 컴포넌트만 수정하면 여러페이지에 적용된 버튼 컴포넌트가 같이 수정되어서 참 편리했다.

참고 자료 : 생활코딩-React Styled components