styled-components props

 

 

직면한 문제상황은 다음과 같았습니다.

aside 라는 Wrapper 가 컴포넌트를 감싸고 있었기 때문에 다음과 같이 padding 20px 이 모두 적용 되어있습니다.

그런데 다음처럼 문제가 생겼습니다.

ㅋㅋ 딱봐도 문제가 많아보이네요. 

우선 디자인 나온대로 구현을 하려면 저 눈에 가시같은 padding을 없애주어야하는 상황이였습니다.

asideWrap은 styled-components 로 구현이 되어 있었죠.

 

그러면 어떻게 해결을 해야할까? 고민을 했습니다.

현재 저는 chatState 라는 state 를 사용하여 컴포넌트를 렌더링하고 있습니다.

즉, chatState가 'chat' 이 될때 위의 화면이 렌더링이 되는 것이죠. 그렇다면, 이것을 이용해서 styled-component에 state를 props 해서 padding 값을 달리하면 되지않을까? 라고 생각을 했습니다.

 

한번 해보기로 했습니다.

다음처럼 chatState props 를 넘겨주었습니다.

 

다음처럼 typescript에서는 props의 타입을 정해주어야했습니다.

물론 any라서 안쓰는것과 같지만요.. (꼭 공부해서 수정하겠습니다..)

 

이제 다음과 같이 props 를 사용한 3항연산자로 padding 값을 달리줄 수 있었습니다.

 

padding 값이 사라진 모습입니다.