components styled 개념정리

리액트로 프로젝트를 하면서 CSS를 사용할 경우

여러가지 방법으로 사용할 수 있다

흔히 사용하는 방법으로는 css파일을 만들고 그 파일을 import해서 사용하는데

리액트에서 제공하는 방식중에 더욱 편리하고

유지보수하기에 좋으면서 js파일과 css파일을 함께 관리 할 수 있는 방법이 있다

그게 바로 components styled 라는 것인데

우선 이것을 import하기 위해서는 설치를 해줘야한다

구글 검색창에 components styled 라고 적어준 후

해당 사이트로 들어가서 documentation을 클릭하면

여러가지 메뉴가 보이는데 그중에서 Installation을 누르면 된다

나는 npm이 아닌 yarn을 사용함으로 yarn add styled-components 라는

명령어를 cd 로 해당 폴더를 지정해주고 복사붙여넣기 해주면

자동으로 패키지가 설치된다

설치가 끝난 후 pakage.json에 들어가서 설치가 정상적으로 되었는지 확인 할 수 있다

pakage.json은 알파벳순으로 정렬되어 있으니 이점에 참고해서 찾아보거나 커맨드+f로
검색해보면 된다

자 그러면 어떻게 사용하는지 코드를 통해 한번 알아보자

우선 사용하고자 하는 js파일에 와서 상단에 import를 해주는데

패키지가 설치되었다면 자동완성으로 잘 나올 것이다

import styled from "styled-components";

이렇게 작성해주고

헬로 라는 글자를 작성하는데 이 문자열에 css효과를 줘보자

원래라면 .css 파일에 원하는 css를 주고

js파일에서 임포트해서 사용하지만

이번에는 다른 방식으로 사용할 것이다

import './App.css';
import styled from "styled-components";

const Title = styled.h1
`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`
;


function App() {

    return(

    <div>
        <Title>헬로</Title>
    </div>

  );

}
export default App;

자 위 코드를 보면 const Title 이라고 선언해줬고

그 안에 원하는 css를 넣어줬는데 이렇게 사용할 경우에는

"" 를 생략하고 편리하게 적을 수 있다

css파일과 거의 동일하기에 더 익숙하고 직관적으로 코드를 짤 수 있는데

다른점은 백틱을 써야한다는 것이다

` ` 

이 두개를 가지고 시작과 끝을 묶어줘야한다

그 사이에 내가 원하는 코드를 넣어주고

해당 값을 출력할 때 또 다른점이 있는데

기존방식은 div안에 css 를 넣고자 한다면 style 이라는 것을 적어주곤했는데

이렇게 사용할경우 const Title이라고 작성한 변수명이 그대로 태그가 되는 것이다

 <Title>헬로</Title> 이런식으로 div가 아닌 Title 그 자체로 감싸줘야한다

이렇게 사용하면 좋은점이 해당 코드 자체를 임포트해서 다른곳에서도 사용할 수 있는데

예를들어 MyCss.js라는 파일을 만들고

import styled from "styled-components";

const Title = styled.h1`

font-size: 1.5em;
text-align: center;
color: palevioletred;
`;

export {Title};

이렇게 작성해주고

다른 곳으로가서

<Title>하하하</Title>

이렇게 작성해주면

자동으로 import가 되면서

해당 js파일에 있는 css속성값을 그대로 쓸 수 있다

끝으로 스타일 컴포넌트를 사용할 경우 변수명 지어주는 것에 신경을 써야한다

그렇지 않으면 가독성이 떨어지고 이게뭔지 알 수 없기 때문에

일단 가장 보편적인 방법을 따르는게 좋다고 생각하고

나같은 경우 나중에 또 바뀔 수 있지만

StyledBookingDiv 이런식으로

스타일변수이고 핵심 주제는 Booking이고 Div로 만들어졌다

라는 의미로 앞에는 Styled 끝에는 Div 어떤 형태인지

가운데에는 핵심 내용을 한번에 알 수 있게 적어줄 생각이다

한가지 더 주의할점은 스타일 컴포넌트는 대문자로 시작해야한다!