Intro

• 부모 컴포넌트에서 자식 컴포넌트로 props 를 넘기고 있다.
• 해당 props 는 부모 컴포넌트의 state 로써 버튼을 누를 때마다 true / false 값으로 변환되고 있다.
• 해당 props 가 true 이고 false 일 때마다 의 border-color 를 바꿔주고 싶은 상황이다.

이 상황에서 나는 받아온 props 를 이용하여 inline 으로 style 을 적용하고 있었다.

// parent component

<CategoryContainer 
isCategoryActive={isCategoryActive}
/>

// child component

function CategoryContainer({ isCategoryActive }) {
  return (
    <Category 
    onClick={handleCategory} 
    style={{borderColor: isCategoryActive === false ? "#cccccc" : "#767676"}}
    />
  );
}

하지만 inline style 보다는 가능하다면 곧바로 styled-component 에 적용 시키는 것이 옳다는 피드백을 받아 적용시켜 보았다.

일단 부모 컴포넌트는 건드리지 않았다.

// child component

function CategoryContainer({ isCategoryActive }) {
  return (
    <Category 
    onClick={handleCategory}
    isCategoryActive={isCategoryActive} 
    />
  );
}

const Category = styled.div`
  border: 1px solid ${(props) => props.isCategoryActive ? "#cccccc" : "#767676"}
`;

inline style 을 보다 컴포넌트 내부가 깔끔해 졌다.