styled-components (with React) 기초 사용 방법

최근에 리액트에 대해 다시 공부를 하면서
CSS IN JS라는 기술을 다시금 공부하고있다.
의미 그대로 JS안에 CSS를 작성하여 같이 사용하는것을 뜻한다.
그 중에서 리액트에서 많이 사용하는 styled-components를 소개하고자한다.

리액트에서 JSX파일에서 css를 같이 사용하려면 밑에처럼 사용할 수 있다.(물론 css모듈 방법도 있지만 현재 게시글에서는 설명하지 않겠다.)
(리액트에서 가장 기본 파일인 App.js이다)

기본 jsx

function App() {
  return (
    <div style={{display:"flex"}}>
      <div style={{border: "1px solid black",padding:"10px"}}>Child</div>
      <div style={{border: "1px solid black",padding:"10px"}}>Child2</div>
      <div style={{border: "1px solid black",padding:"10px"}}>Child3</div>
    </div>
  )
}

사실 위 코드처럼 css를 작성한다고해도 문제되는것은 없다
단지 코드가 길어진다면 어느 부분이 부모-자식 태그인지 헷갈릴 수 있다던가,css가 중복적으로 사용되어 코드가 지저분해 보인다 던가..등등
이제 부터는 styled-components와 비교해보자.
우선은 설치를 해주자.

설치 명령어

 npm install styled-compoenents

설치가 완료된 후 사용하고싶은 파일에 선언을 해준다.

import styled from "styled-components";

사용방법은 아래와 같다

const Father = styled.div`
  display: flex;
`;

const Child = styled.div`
  border: 1px solid;
  padding: 10px;
`;

이렇게 선언 해주면 Father라는 변수는 div 태그의 속성을 얻고, 선언해준 스타일링이 입혀진다.
주의사항 1.styled-components를 선언한 변수명은 대문자로 선언해줘야한다.

소문자로 선언해줄 경우에 사진과같이 일반 html 태그로 인식해버린다.
2.styled.(HTML태그)`로 Css속성을 작성해줄때 '(작은 따옴표) "(큰따옴표가 아닌) `(백틱)으로 감싸줘야한다.

styled-components 적용

import styled from "styled-components";

const Father = styled.div`
 display: flex;
`;

const Child = styled.div`
 border: 1px solid;
 padding: 10px;
`;

function App() {
 return (
   <Father>
     <Child>child1</Child>
     <Child>child2</Child>
     <Child>child3</Child>
   </Father>
 )
}

export default App;

맨처음 작성했던 일반적인 jsx에서 css속성을 주었을 때 보다 훨씬 간결하지않은가?? 또한 어떤 태그가 어떤 기능을 하는지 본인이 이름을 정해줄 수 있기 때문에 수정사항이 생기면 찾기 쉬울것이다.

vs-code에서 styled-components

extention 강추

styled-components는 ``백틱안에서 사용하는 css가 자동완성이 안되서 불편하였는데 아래 사진과같은 extention을 설치하면 기존css를 사용하던것처럼 자동완성이된다.