Styled-component 의 장점 Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다. 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다. 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다. Styled-component는 CSS-in-JS는 스타일 기법 중의 하나로 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존에는 html에서 class 를 지정해 준 뒤, 그에 따라 변화되는 Action들에 의해 class를 바인딩해주는 구조로 되어있다. 그렇기 때문에, 동일한 디자인을 사용하는 여러개에서 액션을 줄 때는, 각각의 컴포넌트 별로 스타일을 지정해주어야 한다.(특히 position) 그러나, Styled-component를 사용하게되면, 이러한 번거로움이 줄어들게 되는 장점이 있다. css컴포넌트에서 변수까지 지정해 주어 해결

tab 구현하기 첫번째. class binding하여 현재 있는 탭 위치를 보여주기. ex) 각종 tab을 통해 분류하여 보여주기 tab 구현하기 과정 tab 의 네비게이션 부분에 클래스 바인딩 해준다. 탭을 클릭할때, 해당 tab이름을 불러온다. 해당 tab이름으로 선택된 tab에 'active' 클래스를 넣어준다.