[2025 1학기 React.js 스터디] 한혜민 #5주차

📝 Sass란

복잡한 작업을 쉽게 처리할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성도 높여주어 유지보수를 쉽게 해줌. Sass에서는 두가지 확장자 (.scss/ .sass)를 지원함.

 

 

💡 시작

본격적으로 Sass를 사용하여 새로운 리액트 프로젝트를 만들어보면

 

 

💡 Button 컴포넌트 만들기

 

  src 디렉터리에 components 디렉터리를 생성 후 그 안에 Button.js 생성

 

 

components 디렉터리에 Button.scss 파일 생성

 

 

여기서 lighten() 또는 darken()를 사용하여 색상을 더 밝게하거나 어둡게 해줄 수 있음 !!!

 

App.js, App.scss 파일 생성

 

 

 

✅ 결과 확인

onClick 옵션 추가

 

Button.js 수정

App.js 수정

 

✅ 결과 확인

 

 

 

 

 

 

📝 Css Module이란

 

CSS Module을 사용하면 리액트 프로젝트에서 컴포넌트를 스타일링 할 때, CSS 클래스가 중첩되는 것을 방지할 수 있음.

 

 

💡 커스텀 체크박스 컴포넌트 만들기

 

새로운 프로젝트

 

CheckBox 컴포넌트 틀 준비

 

 

App 컴포넌트에서 렌더링하기

 

 

 

✅ 결과 확인

 

 

 

 

 

📝 styled-components

 

💡 styled-components 사용하기

$ npx create-react-app styling-with-styled-components
$ cd styling-with-styled-components
$ yarn add styled-components

 

위 명령어 입력 후 결과 확인하면

 

💡 App.js

 

💡 실행결과 확인

 

💡 Button 만들기

 

App.js / Button.js

 

결과 확인

 

 

 

💡 Dialog 만들기

 

우선 components 디렉터리에 Dialog.js 파일 생성

 

 

위 컴포넌트를 App.js에 렌더링해주면

 

 

결과 확인

 

 

 

📝 정리

리액트 컴포넌트를 스타일링 할 때 사용할 수 있는 도구들에 관해 알아봤다.  아직 완벽하게 이해는 못한 거 같다. 복습이 필요하다.

 

대표사진 뭐할지 모르겠어서 축제 사진으로 함