React_Styled-Component

 

#. Styled Components 가 뭐얌 ?

css나 sass같이 class, id, tag name을 가져와서 쓰지 않고, 별도의 스타일 컴포넌트를 생성하여 태그에 쓰는 것을 말합니다. 스타일 컴포넌트는 ui단위를 나누어 컴포넌트화 하기때문에 재사용이 가능하며 props로 속성까지 전달하여 조건을 붙일수 있어 여러모로 다양한 이점이 있습니다.

 

출처 - 코드스테이츠

---

#. Styled Components 특징!

Automatic critical CSS

- Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다.

 

No class name bugs

- Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줍니다.

 

Easier deletion of CSS

-  기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 했습니다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다.

 

Simple dynamic styling 

- className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다.

 

Painless maintenance

- 컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다.

 

Automatic vendor prefixing

- 개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled Component 가 알아서 처리해 줍니다.

 

---

#. Styled Components 시작하기!!!

npm install --save styled-components   //스타일 컴포넌트 설치

 

설치는 어렵지 않습니다. 터미널 창에 위와 같은 코드를 작성하고 import styled from 'styled-components' 해서 불러오면 됩니다! 스타일 컴포넌트의 문법은 생각보다 간단합니다! 아래 코드센드박스 예제를 통해 연습해봅시다!!!!

 

 

1. 스타일 컴포넌트 만들기!!!

스타일 컴포넌트는 변수를 선언하여 스타일 컴포넌트를 지정 하고 styled 불러와서 사용하면 됩니다.

const 컴포넌트이름 = styled.태그명`스타일을 지정해주세요`

아래 코드센드박스를 통해 어떤식으로 만들었는지 확인하면서 연습해 봅시다!!!!

 

 

 

2. 스타일 컴포넌트 props 사용하기!

Styled Component 는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수도 있습니다. 또한 같은 스타일 속성을 지닌 여러개의 컴포넌트들 중 몇 개의 컴포넌트에는 약간의 변화를 주고 싶은 경우도 있을 것입니다. 이때에는 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다. 아래 예제를 통해 실습해 봅시다!!

 

 

 

 

3. 스타일 컴포넌트를 활용한 간단한 모달창 만들기!!!

 스타일 컴포넌트를 사용하는 방법에 대한 기본적인 개념은 위에 두가지 예시를 통해 알아 보았습니다!!! 사실 이것 외에도 다양하게 사용할수 있습니다! 하지만 기본적인 개념을 알아야 응용도 가능하니 꼭 숙지하고 다양하게 응용하길 추천합니다!!! 아래에 간단한 모달창을 구현하였습니다! 연습과 실험해 봅시다!!!