본문 바로가기

React

2024. 2.14 기록 (styled-components)

리액트를 사용하면서 나중에는 잘 쓸 일이 없겠지만, 현재 프로젝트 중,

이 라이브러리 고유의 기능들이 있어서 이번 프로젝트에서 유용하게 사용하였다.

사용한 기능은 다음과 같다.

 

1. prop으로 변수를 전달해줄 수 있다.

color: ${(props) => (props.primary ? "white" : "black")};

background-color: ${(props) => (props.primary ? "blue" : "white")};

 

 

자바스크립트를 통해서 default 값을 지정해줄 수도 있다.

 

 

2. 특정한 이벤트 (isActive) 등의 boolean 값을 통해 다른 값을 부여해줄 수 있었다.

            <Button
              key={member}
              isActive={selectedBtn === member}
              onClick={() => filteredFanLetter(member)}
            >

 

자녀 요소를 호출하는 방법은 css와 같은 방식을 채용하고 있다. 

redux와 더불어 현재 시점에서 많이 사용하지만, 추후에는 동작하는 기능을 잘 아는 것과 더 나은 기능들로 대체되어가는 것에 빠르게 적응하면 좋을 거 같다.