[React] props에 따른 조건부 스타일링

일반 CSS 클래스를 사용해 조건부 스타일링을 해야 할 때는 className을 사용해서 조건부 스타일링을 해 왔다. styled-components에서는 조건부 스타일링을 간단하게 props로도 처리 가능하다.

• 앞에서 작성한 Button 컴포넌트를 다시 한 번 확인해보자.

// StyledComponent.jsx - Button
import styled, { css } from 'styled-components';
/* 단순 변수의 형태가 아니라 여러 줄의 스타일 구문을 조건부로 설정해야 하는 경우에는
css를 불러와야 합니다. 
*/
const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;
 
  /* & 문자를 사용하여 Sass처럼 자기 자신 선택 가능 */
  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }
 
  /* 다음 코드는 inverted 값이 true일 때 특정 스타일을 부여해 줍니다. */
  ${props =>
    props.inverted &&
    css`
      background: none;
      border: 2px solid white;
      color: white;
      &:hover {
        background: white;
        color: black;
      }
    `};
  & + button {
    margin-left: 1rem;
  }
`;

이렇게 만든 컴포넌트는 props를 사용해 서로 다른 스타일을 적용할 수 있다.

<Button>안녕하세요</Button>
<Button inverted={true}>테두리만</Button>

스타일 코드 여러 줄을 props에 따라 넣어 주어야 할 때는 CSS를 styled-components에서 불러와야 한다. CSS를 사용하지 않고 다음과 같이 바로 문자열을 넣어도 작동하기는 한다.

${props =>
  props.inverted &&
  `
      background: none;
      border: 2px solid white;
      color: white;
      &:hover {
        background: white;
        color: black;
      }
    `};

그런데 이렇게 하면 해당 내용이 그저 문자열로만 취급되어 에 VS Code 확장 프로그램에서 신택스 하이라이팅이 제대로 이루어지지 않는다는 단점이 따른다. 그리고 더욱 치명적인 단점은 Tagged 템플릿 리터럴이 아니기 때문에 함수를 받아 사용하지 못해 해당 부분에서는 props 값을 사용하지 못한다...

❓🤔 조건부 스타일링 할 때 넣는 여러 줄의 코드에서 props를 참조하지 않는다면
👉 굳이 CSS를 불러와서 사용하지 않아도 상관없다.

❓🤔 하지만 props를 참조한다면?
👉 반드시 CSS로 감싸 주어서 Tagged 템플릿 리터럴을 사용해야 한다.