리액트 토이 프로젝트 #2 - 투두리스트 Styled Components로 바꾸기

REASON·2022년 9월 4일

CSS React study styledcomponents 공부 리액트 토이프로젝트

토이 프로젝트

목록 보기

2/9

css 파일과 컴포넌트 파일을 분리해서 사용하다가 이번에 Styled Components를 적용해보았다.

컴포넌트 파일명도 통일시켜서 관리하는게 좋을까 싶어서 파일명도 변경해보았다.

styled-Components 적용

확실히 순수한 css 파일을 별도로 관리하는 것보다 자바스크립트 파일에서 스타일 컴포넌트를 사용하니 이전에 생긴 중복 스타일 문제라던가, 스타일 상속과 같은 재사용 부분이라던가, 스타일 컴포넌트 관리가 쉬워졌다.

남은 css 파일 하나만 스타일 컴포넌트로 만들면 css 파일을 다 없앨 수 있다!

state 관리는 어떻게 해야되나 일단 고민중..ㅎㅎ

사용 방법

npm i styled-components

Styled component 라이브러리 설치부터 하고 시작하면 된다.

import styled, { css } from 'styled-components';

라이브러리 설치가 완료됐다면 import 해서 불러오면 된다. { css } 도 불러와서 사용하면 스타일드 컴포넌트에서 변수처럼 사용할 수 있다.

사용방법은 그렇게 어렵지 않아서 금방 적용할 수 있었다.
컴포넌트처럼 사용할 수 있다는 장점 때문에 이번에 처음 사용해봤는데 css 파일을 분리했을 때보다 더 괜찮았다! (역시 다들 사용하는데는 이유가 있는..)

const 작명 = styled.만들HTML요소이름`
	적용할 css 속성들
`;

이것만 알면 일단 거의 다 배운 것과 같다.

나머지 변수라던가 상속해서 사용하는 방법은 조금씩 덧붙이면 되기 때문이다.

const TodoLists = styled.div`
  padding-top: 25px;
  height: 500px;
  width: 100%;
  overflow: scroll;
`;

이런식으로 div를 만들어서 스타일을 적용한 채로 바로 가져다 사용할 수 있다. 이렇게 사용하니 div 만들어서 className 짓고 css 파일 만들어서 className에 해당하는 스타일 넣고 하는 불편함을 덜 수 있었다.

const TodoList = () => {
  return (
    <>
      <TodoLists>
		// 이런식으로 사용!
      </TodoLists>
    </>
  );
};

props 사용하기

props를 사용하면 조건부 스타일도 적용할 수 있다.

버튼을 클릭했을 때 + 가 x 모양으로 바뀌게 하고 싶어서 여기에 적용했다.

const AddBtn = styled.div`
  기본 스타일은 생략!

  ${(props) =>
    props.addBtnClick &&
    css`
      transform: rotate(45deg);
      background: #b29ff3;

      &:hover {
        background: #9e8ae6;
      }
    `}
`;

스타일 컴포넌트도 컴포넌트기 때문에 props를 받아서 이 프롭스의 상태에 따라 조건부로 스타일을 입힐 수 있다.

위 코드만 살펴보면 addBtnClick이라는 프롭스가 true일 때 다음 스타일을 적용시킨다는 의미이다.

background: ${(props) => (props.nightMode ? 'black' : 'white')};

받은 props의 값에 따라 배경을 변경하는 코드이다.
이처럼 삼항 연산자를 사용하는 방법으로도 조건에 따른 스타일을 적용할 수도 있다.

스타일 재사용, 상속하기

먼저 중복되는 스타일이 발생했을 때 재사용하는 방법과 상속을 통해 상속 받은 스타일에서 추가적으로 필요한 스타일만 변경할 수도 있다.

1. 스타일 재사용하기

const Inputs = () => css`
  padding: 20px;
  border: 4px solid #94a8ff65;
  background-color: #e9edff6a;
  border-radius: 20px;
  box-shadow: 2px 5px 10px #b5c3ff3b;
  outline: none;

  &::placeholder {
    color: #94a8ff65;
  }
`;

const Input = styled.input`
  ${Inputs}
`;

const InputMemo = styled.textarea`
  ${Inputs}
`;

여러 곳에 공통으로 적용될 스타일이 있어서 공통적인 스타일만 따로 빼서 작성해주었다.
나같은 경우는 input과 textarea에 동일한 css를 넣고 싶은데 상속은 같은 html 요소만 가능한 것 같아서 이 방법으로 스타일을 재사용해서 해결했다. 😊

2. 상속하기

const Button = styled.button`
  border-radius: 20px;
  border: 4px solid #94a8ff65;
  width: 100%;
  height: 50px;
  font-size: 20px;
  color: #fff;
  background-color: #94a8ff;
  cursor: pointer;

  &:hover {
    background: ${(props) => (props.add ? '#a9b9ff' : 'none')};
  }
`;

const CancelButton = styled(Button)`
  color: #94a8ff;
  background: #fff;
`;