[React] css 스타일 주는법 , styled-components 를 이용한 스타일

안녕하세요. 슈입니다.

오늘은 react 에서 css 스타일 주는법을 알려드릴게요.

javascript 로는 주로 css 파일로 했었는데

react 로 넘어오고 나서는 styled -components 를 이용해서 스타일을 적용해주고 있어요.

먼저 비쥬얼스튜디오의

터미널창을 열고

npm i styled-components

를 통해서 라이브러리를 다운받아줘요.

 

import styled from 'styled-components';

그다음 원하는 컴포넌트의 상단에 위에

처럼 임포트해줍니다.

 

그다음 

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



const Div = styled.div`

#title{
    line-height:2;
    font-size:24px;
    text-indent: 10px;
}
`

const Write = () => {
 
    return (
        <Div>
      <div id="title"> </div>
        </Div>
    );
};

export default Write;

스타일을 주려는 부분을 포함하게끔 <Div> 라는 태그를 만들어서 감싸줬어요.

이때 태그는 내맘대로 이름 짓는 건데 맨앞은 무조건 대문자로 만들어야해요.

저는 주로 Div 라고 이름지어서 만들어요.

그리고 컴포넌트 함수 밖에 Div 가 무엇인지 내가만든 태그를 정의해줘요.

styled.div(이 태그는 이름은 내가 맘대로 Div 로 정했으나 div의 역할을 하는 태그라는뜻)

그리고 백틱 을 써서 그 안에

자바스크립트랑 동일하게 #title 처럼 선택해서 스타일을 css 처럼 주면 된답니다.

 

오늘은 이렇게 React에서

css 스타일 주는법 , styled-components 를 이용한 스타일을

알아봤는데용ㅎㅎ

다들  힘내세요!