styled-components

현업에서 많이 사용하고 있는 styled-components 핵심 적인 부분들은 배우며 기록하고자 합니다.

기존에 우리가 알고 있는 기본 정익 방식 중 하나이다. 불편하다고 하기에는 자주 사용하는 방식이다보니 싫다 좋다의 개념은 아니었다. 기본적인 적용 방법은 위에 코드와 같다 직관적으로 훨씬 더 깔끔하고 스타일을 적용하는 부분과 분리 되있다 보니 직관적으로도 보기 편하다.

앞서 기본적으로 적용한 BoxOne과 BoxTwo 코드를 보면 background-color 색을 제외하고는 같은 코드이다 여기서 드는 생각은 반복되는 코드를 사용하고 싶지 않을수 있다.props를 사용하는 문법도 쉽게 적용이 가능합니다. boxColor라는 값을 임의

props로 전달하여 배경색을 변경해 보았니다. 이제는 Box라는 컴포넌트 안에 있는 속성 전부를 받아온 원 모양 디자인을 하고 싶다면 어떻게 해야 할까 알보겠습니다.변수로 할당 된 Box를 styled(Box)로 넣어주면 Box 컴포넌트 안에 있는 속성 까지 전부 쓸

버튼을 하나 만들어 보았습니다 근데 어떤 이유로 button HTML 태그를 사용하고 싶지 않다면 어떻게 해야 할까 예를 들어 href으로 사용하고 싶다는 경우라면 Login 를 사용하게 되면 사진에 보이는 것 처럼 태그 형태가 바뀐 것을 볼 수 있다.예를 들어 굉장히