2023-11-15 본 캠프 30일차 / 49일차 TIL

2023-11-15 본 캠프 30일차 / 49일차 TIL

주요 진행사항

- 알고리즘 문제풀이

- 리액트 강의 수강

 

리액트 강의 수강 내용 정리

- 리액트 컴포넌트 스타일링

(1) CSS

기존 자바스크립트와 동일하게 CSS를 통한 방식이다.

이 방식에서 문제점은 프로젝트 전역에서 사용이 가능하다는 것이다.

만약 규모가 큰 프로젝트 내에서 다른 항목에 같은 클래스를 적용시켰을 때 의도치않은 스타일 적용이 발생 할 수 있다.

---

(2) Styled Components

Styled Components는 서드파티 라이브러리로 npm을 통해 프로젝트에 적용할 수 있다.

Styled Components의 장점은 다음과 같다.

- 컴포넌트와 스타일을 함께 유지하여 가독성, 유지보수성을 높힌다.

- 고급 기능을 사용할 수 있다 (theme, global...)

- 자바스크립트 내부에서 CSS를 사용하면서 적용 범위를 제한한다.

 

설치

npm install styled-components 

yarn add styled-components

 

사용

import {styled} from "styled-components";

const StDiv = styled.div`
	background: black
`

 

결과 

해당 코드는 변환되어 고유한 클래스를 생성한다.

---

(3) CSS Module

CSS Module은 리액트 프로젝트에서 컴포넌트를 스타일링할 때 클래스가 중첩되는 것을 막아준다.

내장된 기능이기 때문에 별도의 설치는 필요없다.

 

/*Card.module.css*/

.card-container {
	background:red;
    padding:1rem
}

.title {
	color:blue;
}

 

// Card.jsx

import styles from "./Card.module.css";

const Card = () => {
	return (
    	<div className={styles['card-container']}>
        	<h1 className={styles.title}>카드</h1>
        </div>
    )
}

 

결과

해당 코드는 변환되어 고유한 클래스를 생성한다.

---

결론적으로 기본적인 CSS를 사용하는 것이 아닌 고유한 클래스를 생성할 수 있는 styled components 또는 CSS Module을 사용하는 것이 좋다. 두가지 방식은 개인 코딩스타일에 따라서 사용하면 되겠다.