Cloning Styled Components

스타일 컴포넌트는 리액트를 위한 라이브러리같은 것.

js에서 css를 쓸 수 있게 해주고, html을 얻을 수 있음.

template literal을 이용하여 카피해서 만들수 있다.

 

 

argument에 들고 싶은 element를 받고, 적용하고 싶은 css도 받은 다음에

css를 적용한 element를 리턴하는 function을 만드려한다.

 

 

See the Pen 200916-4 by hwd3004 (@hwd3004) on CodePen.

 

 

 

 

 

 

 

 

See the Pen 200918-1 by hwd3004 (@hwd3004) on CodePen.

 

괄호 제거 가능.

똑같이 함수가 적용되고, styled()한거랑 똑같이 됨.

하지만 argument를 바꾼 상태.

string인 하나의 argument가 나오는데, 입력한 string이 나오게 됨.

이게 styled component가 동작하는 방식.

 

template literal의 장점 중 하나로, 이렇게 함수를 호출하면 styled` `에서 ` ` 사이에 입력한 string들은

arguments로 들어가게 됨.

 

 

 

 

See the Pen 200918-2 by hwd3004 (@hwd3004) on CodePen.

 

html 태그를 만드는 함수를 만들어서 동시에 css를 적용하려할때,

 

 

 

 

 

 

See the Pen 200918-3 by hwd3004 (@hwd3004) on CodePen.

 

styled(...)는 function이 아니다 하고 에러가 뜬다.

이 말은 function을 2번 호출했다는 의미이다.

function을 호출하고, 바로 또 function을 호출한거랑 같다.

 

function 안에 function을 리턴하는걸로 바꿔야한다.

 

 

 

 

See the Pen 200918-4 by hwd3004 (@hwd3004) on CodePen.

이렇게 스타일 컴포넌트를 클로닝하는 함수 styled를 만들어보았다.