styled components 파일로 스타일 관리 하자

안녕하세요!

여러분 잘 지내셨나요? 벌써 목요일이네요... 정말 시간이 어떻게 지나가는지 모르겠습니다 ㅜ 요즘 계속 바쁜 하루하루를 보내는 것 같습니다...ㅎ 모두 힘내자구요..!

네! 오늘도 React에 대한 포스팅을 남겨보려고 합니다! 바로 가보실까요?

---

styled components로 코드를 편하고 효율적으로 관리하자!

react 를 사용하면서 항상 효율과 관리에 대해 생각을 안할 수 없는데 함수에 styled 까지 넣으면 한 컴포넌트 코드의 길이가 길어질 수 밖에 없죠

그래서 우리는 컴포넌트에서 styled를 따로 때서 코드를 줄여보겠습니다

방법!

// Box.style.jsx
import styled from "styled-components";

export const Box = styled.div`
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: red;
`;

이렇게 저는 Box.styld.jsx 파일명으로 따로 분리를 시켜주었습니다

그러면 이제 원래 파일로 들어가서

// Box.jsx

import * as St from "../header/Box.style";
// 중간 생략
return (
	<St.Box></St.Box>
)

import * as St from "../header/Box.style"; import를 시켜주고

기존에 <Box></Box> 처럼만 사용해도 됐지만 앞에 St. 을 붙여주어

<St.Box></St.Box> 태그 명을 넣어 똑같이 적용해주시면 됩니다

네! 오늘은 이렇게 styled components 파일로 스타일 관리하는 방법에 대해 알아보았습니다!

그 동안 사용할줄몰라서 계속 한 폴더에서 style을 넣었는데 협업을 하면서 약간 민폐아닌 민폐가 될 수 있을 것 같아서 호다닥 알아보고 공부해서 결국 성공했네요..ㅎ

비록 작은 일이지만 저에게는 굉장히 뿌듯한 일이기 때문에 이렇게 velog에 작성해봅니다!

네! 오늘은 이렇게 짧게 남기고 들어가보도록 하겠습니다 그러면 오늘도 화이팅입니다..!

그리고 우리는 또 행복하자구요!