[React] "styled-components" 패키지로 CSS in JS 방식의 스타일 부여하기

240131 수 TIL ✍ 

 

---

이전에 리액트에서 배웠던 스타일링 방식은..

 

1) (일반) CSS

: 원래 html에서 css파일을 import해서 꾸몄던 방식과 거의 똑같다. jsx 문법에서는 태그에 className (그냥 class아님!) 을 부여해서, css파일에서 각각의 className마다 스타일 속성을 주었다.

(여기 css에서 쓰는 방식은 '객체' 형태가 아니다.   속성마다 콤마(,)로 연결하지도 않음)

// *App.jsx에서

...(생략)

const App = () => {
	return (
    	<div className="content"> 
    	...
        </div>
    );
};


// *위 jsx에 import된 css에서

.content {
	background-color: black;
}

 

2) 인라인 스타일링

: (따로 css파일 import해서 쓰는 게 아닌,) jsx파일 내에서 바로 해당태그에 style={{ ... }} 와 같이 쓰는 방식.

(중괄호가 2쌍인 이유는, 자바스크립트 문법을 쓰면서, 객체(key-value)로 스타일 속성을 넣어주기 때문. 각각의 속성은 콤마(,)로 연결된다.) 

(일반 css에서 속성이름?을 쓰는 방식과 조금 달라서 헷갈린다. 슬래시(-)가 아닌 카멜케이스형태로 쓴다든지. 또 다른 점들도 있다) 

// *.jsx파일 내에서*
...

const App = () => {
  return (
    <div style={{marginTop: 5px; backgroundColor: pink}}>
      ...
    </div>
  );
}

..

 

 

=>  3) 우리가 3번째로 배울 리액트 스타일링 방식은 styled-components란 npm 패키지를 설치해 쓰는 것! (emotion과 같은 다른 패키지도 있으나 styled-components가 가장 많이 사용되어온 패키지)

---

🎨 

<  styled - components > 란?

• 리액트에서 CSS in JS 방식 (- 자바스크립트 코드로 CSS 코드를 작성하는 방식) 으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 
• 이를 통해 스타일링 쓰는 방식은,  ` ` 백틱을 사용해서, 그 안은 일반 CSS 방식과 동일하게 써주면 된다. 그런데! 이 안에 ${ } 를 통해 자바스크립트 문법도 사용 가능! 
• 또한 이렇게 쓴 스타일 컴포넌트를, jsx 문법 내에서 html태그를 쓰듯이 사용 가능
• 조건부 스타일링이 가능!! (JS코드 작성하듯이 쓸 수 있어서)

   - VScode 플러그인 설치 후 yarn 혹은 npm 에서 설치해 (yarn add 혹은 npm install  styled-components) 사용가능

		
    // src/App.js
    
    import React from "react";
    // styled-components에서 styled 라는 키워드를 import 합니다.
    import styled from "styled-components";
    
    // styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
    const StBox = styled.div`
    	// 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
      width: 100px;
      height: 100px;
      border: 1px solid red;
      margin: 20px;
    `;
    
    const App = () => {
    	// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.
      return <StBox>박스</StBox>;
    };
    
    export default App;

 

 

- 조건부 스타일링의 예시   (아래는 props를 내려주는 방식을 사용해 스타일링)

    // src/App.js
    
    import React from "react";
    import styled from "styled-components";
    
    // 1. styled-components를 만들었습니다.
    const StBox = styled.div`
      width: 100px;
      height: 100px;
      border: 1px solid ${(props) => props.borderColor}; 
      // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. 
      margin: 20px;
    `;
    
    const App = () => {
      return (
        <div>
    			{/* 2. 그리고 위에서 만든 styled-components를 사용했습니다. */}
    			{/* 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. */}
          <StBox borderColor="red">빨간 박스</StBox>
          <StBox borderColor="green">초록 박스</StBox>
          <StBox borderColor="blue">파랑 박스</StBox>
        </div>
      );
    };
    
    export default App;

 

 

- 또한, 해당 컴포넌트내에서만 활용되는 것이 아님.  전역스타일링(GlobalStyles)을 통해서 프로젝트 아우르는 공통 스타일을 적용 가능.

아래처럼 body 태그 안에는 모두 공통css을 적용하도록 함

    import { createGlobalStyle } from "styled-components";
    
    const GlobalStyle = createGlobalStyle` // styled-components 에서 제공하는 api
      body {
        font-family: "Helvetica", "Arial", sans-serif;
        line-height: 1.5;
      }
    `;
    
    export default GlobalStyle;