React]Tailwind + Styled Components

오늘은 저번에 프로젝트에서 사용한 Tailwind + Styled Components 문법에 대해 자세하게 정리해보려고한다.
(이번 프로젝트에서 사용하기로 하여 확실한 이해가 필요할거같아 정리한다.)

 

Tailwind + Styled Components

(각각의 라이브러리와 프레임워크는 이전 글에서 정리한적이있기 때문에 둘을 결합한 문법을 사용하는 이유와 장점에대해만 정리하겠다.)

 

Tailwind + Styled Components 사용 이유와 장점

1.TailwindCSS를 사용시 태그 내에 작성되는 className이 많아져 가독성이 떨어지고, 코드가 지저분해짐

ex)

<div className = bg-[#D9D9D9]/[.1] w-[600px] h-[600px] text-white text-lg font-bold rounded-[24px] rounded-tl-[0px] flex flex-col space-y-8 justify-center items-center;

 

위처럼 많은 css스타일이 들어갈경우 코드가 길어져서 가독성이 떨어짐.

 

2. 유지 보수시에 해당 태그를 코드 내에서 찾아 className을 바꿔주어야하는 복잡함이 발생

 

3.동일 컴포넌트를 재사용 할 경우 편의성을 도모 하기위해 사용

 

4.Styled Components의 문법을 통해 동적인 스타일 적용 가능

 

 

이 정도를 장점으로 정리할 수 있겠다.

다음은 사용법에 대해 정리해보겠다.

 

Tailwind + Styled Components 사용법

 

 

Tailwind + Styled Components의 사용법은 의외로 쉽다.

개념은 TailwindCSS 문법을 Styled Components처럼 태그하여 적용시키는 방식이다.
ex)

<div className = bg-[#D9D9D9]/[.1] w-[600px] h-[600px] text-white text-lg font-bold rounded-[24px] rounded-tl-[0px] flex flex-col space-y-8 justify-center items-center;

아까 예를 들은 위의 코드를 뒤집어보자면,

 

const StyledForm = tw.div`
  bg-[#D9D9D9]/[.1] w-[600px] h-[600px] text-white text-lg font-bold rounded-[24px] rounded-tl-[0px] flex flex-col space-y-8 justify-center items-center
`;

function Form () {
return(
<StyledForm>
<APP/>
</StyledForm>
);
};

export default Form;


const StyledForm = tw.div`
  bg-[#D9D9D9]/[.1] w-[600px] h-[600px] text-white text-lg font-bold rounded-[24px] rounded-tl-[0px] flex flex-col space-y-8 justify-center items-center
`;

이런식으로 styled component 처럼 아래에 선언후 똑같이 TailwindCSS문법을 적어주고 ,
결국엔 선언화 한것을 본문에 태그하면되는것이다.

 

또한 응용해보자면,
하나의 컴포넌트를 상속의 개념처럼 사용 할 수 있다.

const DefaultContainer = tw.div`
	flex
	items-center
`

const RedContainer = tw(DefaultContainer)`
	bg-red-300
    `

이런식으로 작성하면 DefaultContainer의 스타일을 적용받고 그대로 배경 색만 추가된 RedContainer가 적용된다.

 

말고도 많은 응용이 있는거같다.

그것은 프로젝트 진행하면서 추후 추가해서 정리해둘 예정이다

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript