[React] styled-components에서 속성값으로 스타일링 하기

▶styled-components에서 속성값으로 스타일링 하기

이번 글에서는 styled-components에 속성값을 주면서 스타일을 속성값에 따라 다르게 주는 방법에 대해 알아보도록 하겠습니다.

 

🔎 이건 언제 사용?

---

우선 방법을 알아보기 전에 언제 사용할 수 있는지 예를 들어 이야기 해보겠습니다.

예를 들어 버튼을 눌렀을 때 컴포넌트의 background-color를 변경하고 싶을 때 많이 유용하다고 생각이 들었는데요.

 

이걸 모른다면 background-color 하나 때문에 스타일 컴포넌트를 하나 더 만들어야 할지도 모릅니다...

 

🔎 사용해보자

---

우선 기본적으로 코드를 아래와 같이 작성하였습니다.

단순하게 버튼을 클릭하면 form의 state를 '로그인' 또는 '회원가입'이 되도록 했습니다.

import {useState} from 'react';
import styled from 'styled-components';

function HomePage() {
  const [form, setForm] = useState('');

  const onClickForm = (e) => {
    const {innerText} = e.target;
    setForm(innerText);
  };

  return (
    <div>
      <LoginSelector onClick={onClickForm}>로그인</LoginSelector>
      <SignSelector onClick={onClickForm}>회원가입</SignSelector>
      <div>{form}</div>
    </div>
  );
}

export default HomePage;

const LoginSelector = styled.button`
  background-color: blanchedalmond;
`;

const SignSelector = styled.button`
  background-color: aquamarine;
`;

실행 화면은 다음과 같습니다.

이제 버튼을 클릭하면 다른 버튼은 회색이 되도록 스타일 컴포넌트를 수정해보려고 합니다.

즉, form의 state을 가지고 스타일 컴포넌트를 수정하면 됩니다.

 

우선 스타일 컴포넌트에 인자로 값을 넘겨준다면 스타일 컴포넌트를 정의해 주는 부분에서 그 인자를 가지고 받은 값에 따라 스타일 코드를 작성해 주면 됩니다.

function HomePage() {
  // ...
  
  return (
    <div>
      <LoginSelector mode={form} onClick={onClickForm}>
        로그인
      </LoginSelector>
      <SignSelector mode={form} onClick={onClickForm}>
        회원가입
      </SignSelector>
      <div>{form}</div>
    </div>
  );
}

export default HomePage;

const LoginSelector = styled.button`
  background-color: ${({mode}) =>
    mode === '로그인' ? 'blanchedalmond' : 'gray'};
`;

const SignSelector = styled.button`
  background-color: ${({mode}) =>
    mode === '회원가입' ? 'aquamarine' : 'gray'};
`;

위 코드에서 LoginSelector와 SignSelector를 사용하는 부분에서 mode={ form }을 추가하여 지금 state로 관리되고 있는 form을 전달해 주었습니다.

그러면 스타일 컴포넌트는 이 form 값을 받아서 이 form 값이 '로그인'일 때와 '회원가입'일 때를 true와 false로 하여 스타일을 적용해 주었습니다.

 

이때는 콜백함수 형태로 작성을 해줍니다.

실행화면은 위와 같이 해당 버튼을 누르면 form의 state가 바뀌면서 스타일도 콜백함수가 실행되며 같이 바뀌는 모습을 볼 수 있습니다.