Styled-components 적응하기

여태껏 줄곧 css와 sass를 써 왔던 입장에서 Styled-components는 앵간히 귀찮은 존재로 다가왔다.
간편하게 클래스 이름만 지정해서 바로 import시키면 될 것을 굳이 이렇게 번거롭게 해야 하나 싶었는데,

그래도 꾸역꾸역 적용 시키면서 하다보니 코드를 몇 줄 줄이는데 그치는 것이 아니라, component라는 이름에 맞게 상태 변수 또한 props로 내려줄 수 있기에 상태에 따라 색상이나 폰트 크기 등을 자유자재로 변경할 수도 있었다.

완전히 적응하기만 하면 더 이상 sass 안쓰고 styled-components만 쓸 것 같기는 하지만 그 적응하는 데 조금 시간이 걸릴 듯 하다.

• 라이브러리 설치하기
  npm install styled-components --save

• 적용하기

  
  import React, { useState } from 'react'
  import styled from 'styled-components';
  
  const Practice = () => {
  const [state, setState] = useState(false);
  	return (
     	<PracticeWrapper>
         	<div>Practice</div>
             <PracticeInput state={state} />
             <PracticeBtn onClick={() => {setState(!state)}}>state 상태변경</PracticeBtn>
         </PracticeWrapper>
     )
  }
  export default Practice;
  
  const PracticeWrapper = styled.div`
  	width: 100%;
  `
  const PracticeInput = styled.input.attr(props => ({
  	type: "password",
  }))`
  	width: 40%;
     height: ${state => (state ? "40px" : "50px")};
  `
  
  const PracticeBtn = styled.button`
  	width: 40px;
     height: 40px;
  `
  

  이외에도 많은 적용 방법이 있는데, 이는 더 많은 연습이 필요할 것 같다.