2021.08.09(Mon.) <Styled Components>

거의 '마약' 같습니다. 하지만 안심하세요! 합법입니다!!

1. Styled Components?

• JS파일 안에서 간단하게 CSS작업을 할 수 있게 된다.
• 파일이 하나뿐이라고?? => 용량이 적다 + 직관적이다 + 작성할 때 빠르다.
• className도 많이 사용하지 않기 때문에 중복이나 오타를 막을 수 있고, 어떤 부분이 잘 못 되어 있는지 찾기 편해서 유지 보수도 편하다.

2. 어떻게 사용할 수 있을까?

• npm install --save styled-components으로 설치한다.

import styled from "styled-components";

const Text = styled.h2`
  font-size: 5em;
  margin: 1em;
  color: #d90429;
`;

const BackGround = styled.section`
  padding: 5em;
  background: #d9ed92;
`;

export default function App() {
  return (
    <BackGround>
      <Text>Hello Styled Components!</Text>
    </BackGround>
  );
}

위 코드를 Sandbox에서 만들었다.

3. Props 사용하기

• 컴포넌트를 재활용 할 때 사용할 수 있다.
• 이때, props로 주어진 style이 우선으로 적용된다.
• props 자체로 style이 직접 적용되어서 className은 역시 필요 없다!
• 다른 속성이나 수치도 줄 수 있기 때문에 state 없이, 애니메이션 스피드 적용에도 탁월하다.
• useRef를 이용하면 이벤트 이후, 일어나는 리 렌더링에 대해 데이터를 방어할 수 있다. 예를 들어, 동영상 재생, 멈춤 버튼을 눌렀을 때 페이지가 렌더링 된다면, 동영상은 계속 시작점으로 돌아가 버려서 똑바로 재생될 수 없을 것이다. 이때, 재생, 멈춤 버튼을 useRef로 사용하면 재생, 멈춤 버튼이 눌릴 때, 그 버튼의 동작만 하고 렌더링은 되지 않기 때문에 잘 작동하게 된다.

import styled from "styled-components";

const Text = styled.h2`
  font-size: 3em;
  margin: 10px;
  color: #d90429;
  text-shadow: ${(props) => (props.shadow ? '5px 5px 10px #f72585' : 'none')}
    `;

const BackGround = styled.section`
  padding: 0.5px;
  background: #d9ed92;
`;

export default function App() {
  return (
    <BackGround>
      <Text>Hello Styled Components!</Text>
      <Text shadow>This is Shadow Text</Text>
    </BackGround>
  );
}

shadow를 props로 주어 그 부분만 그림자를 주었다.