style component를 활용한 조건부 렌더링

여러 선택지가 렌더링 된 후에 이들 가운데 user가 선택한 선택지들만 다른 효과(이번 프로젝트에서는 background-color와 color만 다르게 효과를 주었다.)를 주는 방법으로 style component를 통해 props를 주고 그 props를 style 부분에서 받아 조건부 렌더링하는 방법을 공부했다.

<MatchTag value={value} tagInfo={tagInfo} key={id}>
  {value}
</MatchTag>

const MatchTag = styled.li`
color: ${({ value, tagInfo }) =>
    tagInfo.includes(value) ? 'white' : '#737373'};
  background-color: ${({ value, tagInfo }) =>
    tagInfo.includes(value) ? '#00c7ae' : 'white'};
`;

먼저 UI에 해당하는 코드에서 props로 value와 tagInfo를 props로 넘겨주고,
style 선언에 해당하는 코드에서 props를 바로 구조 할당 분해로 받아 includeS() 메서드를 통해 tagInfo가 value 가운데 포함하는 녀석들과 포함하지 않은 녀석들의 값을 다르게 주었다.
ft.래영 멘토님의 도움 없이는 생각하기 힘들었을 것 같다..