리액트 Styled Components와 사용 방법? Styled Components란?

 

리액트 Styled Components와 사용 방법? Styled Components란?

 

리액트에서 스타일을 지정하는 방법은 여러 방법이 있습니다.

즉 당연히 기본 css파일을 생성해 import 하는 것도 가능하다는 것입니다.

하지만 좀 더 모던하고 편리하며 프로젝트를 좀 더 깔끔하게 정리하기에

Styled Components만큼 좋은 것도 없을 것입니다.

오늘은 리액트에서 자주 사용되는 Styled Components를 알아보고

쉽게 어떻게 사용하는지 알아보겠습니다.

 

목차

1. Styled Components란?
2. Styled Components 사용 방법?
3. 마치며.

 

1. Styled Components란?

 

Styled Components란 무엇일까요?

어떻게 다운로드하고 어떻게 사용할까요?

Styled Components는 npm의 모듈입니다.

그러하여 사용을 위해서 처음 다운로드해주어야 합니다.

이는 두번째 단원에서 알아보겠습니다.

Styled Components라는 모듈은 리액트와 정말 잘 어울립니다.

우리는 이 모듈의 사용으로 불필요한 css 파일을 생성할 필요가 없습니다.

왜냐하면 자바스크립트 혹은 타입스크립트 코드에서 직접 사용 가능하기 때문이죠.

그러하여 일일이 태그 즉 리액트에서는 JSX에 class 혹은 id를 부여하지 않고

JSX의 형태로 스타일을 지정하고 변경 가능합니다.

또한 ThemeProvider라는 것을 이용하면 언제든지 글로벌하게 디자인을 지정 가능합니다.

그렇다면 다운로드는 어떻게 하고 어떻게 사용하는지 다음 단원에서 알아보겠습니다.

 

 

2. Styled Components 사용 방법?

 

방금 첫 단원에서 설명했듯 Styled Components는 npm 모듈입니다.

이를 사용하기 위해서 리액트 프로젝트 생성 후 처음 할 일은 

npm 키워드를 이용해 모듈을 다운로드 해주는 것입니다.

아래의 명령문을 보시죠.

 

npm i styled-components

 

npm이라는 키워드 다음 i 는 install의 약자입니다. 

그다음 styled-components를 입력하여 설치해주세요.

가끔 components인데 component라고 실수를 할 수 있으니

실수로 입력하여 다운로드가 되지 않는다면 다시 한번 명령문을 확인해주세요.

 

다운로드가 완료되면 이미 반은 성공한 것입니다.

그다음 할 일은 필요한 자바스크립트 컴포넌트 혹은 컨테이너에 import 해주는 것입니다.

아래와 같이 import 해주세요.

import styled from 'styled-components';

 

자 다음 우리가 입력해야 하는 것은 기본 css와 같이

class 혹은 id를 JSX에 입력하는 것이 아닌 

새로운 변수를 하나 지정해주는 것입니다.

같이 div를 하나 생성해보겠습니다.

이때 중요한 것은 리액트 클래스나 컴포넌트 바깥에 즉 새로운 스코프에

변수를 생성해 주어야 하며, 가장 중요한 것은 처음 시작이 항상 대문자여야 합니다.

아래의 예시를 보시죠.

 

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

const TestDiv = styled.div`
    width : 200px;
    height : 200px;
    background-color : orange;
`;


const List = () => {
	return <TestDiv>hello</TestDiv>;
}

export default List;

이렇게 코드를 작성해주세요.

TestDiv는 div의 형태로 작동할 것입니다.

이때 주의할 점은 styled.div 뒤에 일반 작은따옴표가 아닌 Backtick을 사용해야 합니다.

그리고 이는 괄호처럼 사용되고 그 안에 기존 css의 문법을 이용 가능합니다.

또한 div가 아닌 다른 태그를 이용하려면 당연히 styled. 뒤에 필요로 하는 태그를 입력하면 됩니다.

이는 또한 SVG, Image 등 기존에 import 한 자료를 이용하려면 가볍게 styled()를 이용하여 괄호 안에

필요로 하는 자료를 입력하시면 됩니다.

예를 들어 SVG파일을 import 하셨다면 이러한 예시가 될 것입니다.

 

import TestSVG from '../svgs/test.svg';
import styled from 'styled-components';

const SVGStyle = styled(TestSVG)`
	wdith : 200px;
        height: 200px;
`;

이렇게 이용하시면 문제없이 잘 작동할 것입니다.

우리는 class혹은 id를 지정하지 않는다고 했지만,

커스텀의 값을 즉 props의 값을 지정 가능합니다.

예시를 보시죠.

 

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

const TestDiv = styled.div`
    width : 200px;
    height : 200px;
    background-color : ${props => props.testValue === 20 ? "orange" : "blue"};
`;


const List = () => {
	return <TestDiv testVaule={20}>hello</TestDiv>;
}

export default List;

자 이렇게 testValue라는 값을 JSX를 통해 지정해주고, TestDiv의 background-color 값을

비교하여 오렌지색 혹은 파란색을 나타내게 했습니다.

여기서 우리는 if문법을 짧게 쓰는 법을 다시 한번 배우게 될 것입니다.

또한 이렇게 testValue값을 다르게 주어 언제든지 색을 변경할 수 있습니다.

그리고 한 가지 더 말씀 알려드리고 싶은 것은

 

   background-color : ${props => props.testValue === 20 ? "orange" : "blue"};
     
   background-color : ${({testValue}) => testValue === 20 ? "orange" : "blue"};

이렇게 불편하고 보기 싫은 props를 입력하지 않고 직접 변수를 사용할 수 있다는 것입니다.

이는 당연히 코드를 줄여주고 보기에도 쉽고 이해하기도 쉽습니다.

 

 

이 외에도 사용 할 수 있는 것들은 무궁무진합니다.

이러한 모듈의 장점은 하나의 변수를 지정해놓으면

언제든지 여러 개의 태그를 생성 가능하고, 보시는 바와 같이 언제든지

새로운 값을 주셔서 모든 css 문법을 훨씬 더 창의적이고 유동적으로 

이용할 수 있습니다. 이러한 방법을 이용하면 특히

switch문법을 통해서 하나의 컨트롤할 수 있는 파일을 생성한 뒤

여러 방면으로 스타일을 이용할 수도 있습니다.

그 외에도 정말 많은 방법이 있습니다.

다 보여드리지 못해 아쉬울 따름입니다.

하지만 현재 이 정도만 알고 계셔도 충분히 styled components를 사용하시기에

불편함이 없을 것이라 생각합니다.

저 또한 처음에 이 정도 사용법만 가지고 혼자서 연습 삼아 페이스북 로그인 클론 페이지,

인스타그램 클론 페이지 등을 만들어 보기도 했으니 말이죠.

항상 공부하고 배우면서 중요한 것은 구글에 질문하는 것도 있지만, Document를 잘 살펴보는 것입니다.

 

 

3 마치며.

 

정말 멋지고 새로운 기능들이 많은데 다 못 보여드려 아쉬울 따름입니다.

언제든지 궁금하시다면 해당 모듈의 공식 홈페이지를 방문해보시는 것이 좋을 듯합니다.

그리고 또한 얼마든지 styled components 가 마음에 드시지 않는다면 일반

css파일을 이용하시거나 부트스트랩을 이용하실 수 도 있을 것입니다.

하지만 개인적으로 리액트 프로젝트 구상하신다면 styled components를 추천드립니다.

또한 회사 혹은 협업에서 사용하는 모듈이나 방식이 다를 수 있으니 항상 정답은 없습니다.

 

항상 시작이 반입니다. 처음이 가장 어렵습니다.

누구나 그럴 것입니다. 무언가 새롭게 시도하고 도전한다는 것은

항상 즐거움, 설렘이 있지만 두려움 막연함도 동반하기 마련이지요.

이를 이겨내고 극복하고 스스로 이겨내는 것은 자신의 능력일 것입니다.

이러한 능력은 누구나 가지고 있지만 누구나 사용하기는 어려우니 말이죠.

 

항상 건강하시고 도전하시기 바랍니다!

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.