Styled Component

본래 웹은 html, css, 자바스크립트로 나누어져 구조, 스타일, 동작을 나누어 코드를 작성하였다. 그러나 이는 이점도 있지만 파일이 분산되는 단점도 있다. 이를 해결하기 위해 react Dom을 이용해 html과 자바스크립트를 한 곳에 작성 할 수 있게 되었고, 여기서 배우는 styled component의 개념을 도입해 css를 리액트에 사용할 수 있게 되었다.

styled Component 시작하기

우선 styled component를 사용하고 싶은 리액트 파일의 터미널에 코드를 입력하고 실행해주면

npm install styled-components

styled component가 설치가 되고, 파일앞에 코드를 작성하면 해당 파일에서 styled-component를 이용할 수 있다.

import styled from "styled-components"

styled component 사용하기

리액트에서 styled component를 사용하는 것은 css작성하는 법과 리액트의 컴포넌트 다루는 법만 알고 있다면 어려울 것이 없다. 리엑트에 컴포넌트를 만들어 css를 넣어주고, 이것을 리액트의 컴포넌트를 사용하는 것 처럼 사용하면 된다. 컴포넌트이기에 변수의 첫 문자를 대문자로 해주는 것을 잊지말자.

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: #BF4F74;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

위 코드를 보면 Title Wrapper라는 두개의 styled component를 만들고, 이를 렌더링 하는 부분에 일반 컴포넌트와 마찬가지로 사용하는 것을 알 수 있다. 사용할 태그는 stlyed.뒤에 작성하고 백틱 사이에 css를 작성하는 방식으로 작성을 하면 된다.

styled component 재활용하기

재활용 하는 방법은 아주 간단하다. 새로운 컴포넌트를 만들고 이전에 만든 컴포넌트를 불러온 뒤 추가할 css성질을 넣으면 되는 것이다.

const NewWrapper = styled(Wrapper)`
  margin: 30px;
`;

이렇게 사용하게 되면, 위의 Wrapper 컴포넌트의 css속성에 margin: 30px;이 추가 되는 것이다.

props를 이용한 css값 변경

때로는 css값을 자바스크립트의 문법으로 바꾸는 경우가 있을 수 있다. 이때 props를 이용해 해당 styled component로 값을 넘겨주어 사용할 수 있다.

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: ${(props)=>props.skyblue ? "black" : "white};
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: ${(props)=> props.color ? props.color: "white"};
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper color="skyblue">
    <Title skyblue>
      Hello World!
    </Title>
  </Wrapper>
);

Title에는 props변수가 skyblue이면 색을 skyblue로 바꾸는 것이고,
Wrapper에는 props변수에 값을 받고 그 값을 색으로 변경하는것이다.

잘 변경된 것을 볼 수 있다.

styled component 공식문서

https://styled-components.com/

공식문서는 영어로 되어있어 보기가 좀 어렵긴 하지만 꾸준히 보는 연습을 해야 한다.