2023-11-14 본 캠프 29일차 / 48일차 TIL

2023-11-14 본 캠프 29일차 / 48일차 TIL

 

주요 진행사항

- 알고리즘 문제풀이

- 리액트 강의 수강

- 수준별 학습 진행

 

수준별 학습 내용 정리

- styled components의 활용

1. 폴더 구조화

styled components를 모범적인 예시로 사용하기 위해서는 스타일 컴포넌트 파일만 따로 분리하는 방법이 있다.

 

위와같이 styled components를 위한 파일을 모듈화한다면, 파일의 구조화나, 가독성 측면에서 이점이 있다.

import * as S from "./Button.styled.js"
import * as Styled from "./styles.js"

...
return <S.ButtonContainer >
	<S.ButtonContent>
	</S.ButtonContent>
</S.ButtonContainer>

 

import 역시 as를통해 코드의 길이를 단축시킬 수 있다.

 

2. 코드 재사용

styled components는 코드 재사용성이 좋다.

상속의 개념을 통해서 코드르르 확장시킬 수 있는 방법들이 있다.

 

1) 변수화 하여 재사용

const commonButtonStyles = css`
  background-color: blue;
  color: white;
  padding: 10px 20px;
`;

const PrimaryButton = styled.button`
  ${commonButtonStyles}
  /* 추가 스타일 정의 */
`;

const SecondaryButton = styled.button`
  ${commonButtonStyles}
  /* 추가 스타일 정의 */
`;

 

2) 기존 스타일에 확장된 스타일 적용

const SharedButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
`;

const PrimaryButton = styled(SharedButton)`
  /* 추가 스타일 정의 */
`;

const SecondaryButton = styled(SharedButton)`
  /* 추가 스타일 정의 */
`;

 

3. Theme를 이용한 전역스타일 적용

styled components의 ThemeProvider 모듈을 사용하면 전역적인 스타일을 적용할 수 있다.

기본적으로 사용법은 context.api의 provider와 비슷하게 사용하며, ThemeProvider로 묶은 컴포넌트는 모두 지정한 theme를 사용할 수 있다.

import { ThemeProvider } from 'styled-components';

const App = () => {
  const theme = {
		backgroundColor: black;
		color: white;
	}
  return (
    <ThemeProvider theme={theme}>
				<InnerComponent />
    </ThemeProvider>
  );
};

// InnerComponent.jsx
const InnerComponent = () => {
	...
	return <StyledDiv>...</StyledDiv>
}

const StyledDiv = styled.div`
		color: ${(props) => props.theme.color};
    background-color: ${(props) => props.theme.backgroundColor};
`