styled-component 설치, 사용하기 input 만들기

사내어드민만 개발하다 오랜만에 사용자 사이트 개발이라 컴포넌트의 재사용성을 높이기 위해 사용하였다.

 

이전 프로젝트때 맛보기로 사용해본적은 있지만

처음부터 설치부터 내가 직접 세팅 하는건 처음이다!!

 

일단 스타일드컴포넌트 설치 방법

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

설치가되었으면

In package.json 에 추가가 되었을 것이다.

 

{
  "resolutions": {
    "styled-components": "^5"
  }
}

그리고 페이지에 임포트 import 시켜서 사용하면 끝!

사실상 큰 어려움은 없다.

import styled, { css } from "styled-components";

styled-component 는 우리가 Template Literal 을 사용 할 때

 ${} 안에 일반 문자열 / 숫자가 아닌 객체를 넣는다는 것을 이용하면 사용하기 좀 더 쉬워진다.

 

import styled from "styled-components";

const SearchInput = styled.input`
  /* width: 500px; */
  height: 32px;
  font-size: 15px;
  border: 0;
  border-radius: 15px;
  outline: none;
  padding-left: 10px;
  border: 0.2em solid rgb(233, 233, 233);
`;


const Search: FC = () => {
  useEffect(() => {}, []);

  return (
      <SearchInput></SearchInput>
  );
};

기본으로 만들어본 컴포넌트이다.

module.css만 쓰다 컴포넌트형식으로 사용하니 

간편하고 아주 좋다!