styled-components의 장점

props로 조건부 렌더링이 가능하다.

 

📍 검색 창 입력값 존재 여부에 따라 해당 요소의 border-radius 값을 다르게 주고 싶을 때:

1. 검색 창 입력값 존재 여부에 따라 ture, false를 가지는 hasText 라는 변수로 상태 관리를 해준다. 

2. 컴포넌트에 hasText를 props로 내려보낸다. 

3. 다음과 같이 border-radius 값을 조건부 렌더링으로 걸어준다.

 border-radius: ${(props) =>

    props.hasText ? activeBorderRadius : inactiveBorderRadius};

 

이렇게 하면 입력값이 있을 때, 즉 hasText가 true일 때 컴포넌트의 class명을 삼항연산자로 다르게 줘서 css 코드를 별도로 적어주는 것보다 더 간편하게 처리할 수 있다. 

 

자동완성 input 창에 입력값이 아무것도 없을 때

자동완성 input 창에 문자열 입력값이 있을 때

 

🔽 props를 내려보낸 코드

 

 

 

🔽 class 이름을 다르게 주는 코드