리액트에서는 다양한 방식으로 컴포넌트를 스타일링할 수 있습니다. 이번 장에서는 자주 사용하는 4가지 방식을 알아보도록 하겠습니다. 먼저 이번 예시에서는 create-react-app을 이용해 새로운 프로젝트를 만듭니다. styling-react 프로젝트를 만들고 열어주세요. $ yarn create react-app styling-react $ cd styling-react $ yarn start 9.1 가장 흔한 방식, 일반 CSS 기존의 CSS 스타일링에 불편을 겪지 않고, 새로운 기술을 배우고 싶지 않다면 일반 CSS를 계속 사용해도 괜찮습니다. 실제로 소규모 프로젝트에서는 새로운 스타일링 시스템을 적용하는 것이 불필요할 수도 있습니다. 방금 만든 프로젝트에는 App.js 파일과 App.css 파일..

22-23/22-23 리액트 스타터 1 2022. 12. 1. 10:00

INDEX 9장 컴포넌트 스타일링 1. 가장 흔한 방식, 일반 CSS 1.1 이름 짓는 규칙 1.2 CSS Selector 2. Sass 사용하기 ● Sass에서 지원하는 두 가지 확장자 .scss .sass 2.1 utils 함수 분리하기 2.2 sass-loader 설정 커스터마이징 2.3 node_modules에서 라이브러리 불러오기 3. CSS Module 3.1 classNames 3.2 Sass와 함께 사용하기 3.3 CSS Module이 아닌 파일에서 CSS Module 사용하기 4. styled-components 4.1 Tagged 템플릿 리터럴 4.2 스타일링된 엘리먼트 만들기 4.3 스타일에서 props 조회하기 4.4 props에 따른 조건부 스타일링 4.5 반응형 디자인 5. Qu..

21-22/21-22 리액트 스타터 -2 2022. 1. 3. 13:00

일반 CSS : 컴포넌트 스타일링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 작성 CSS Module : 스타일 작성 시, CSS 클래스가 다른 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식. 9.1 가장 흔한 방식, 일반 CSS CSS 작성 시, 가장 중요한 점 : CSS 클래스를 중복되지 않게 만드는 것 9.1.1 이름 짓는 규칙 컴포넌트 이름-클래스 형태 (예: App-header) BEM 네이밍 : 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식 (예: .card_title-primar..

21-22/21-22 리액트 마스터 2021. 11. 15. 13:00