[React] React 완벽 가이드 섹션 6 : 리액트 컴포넌트 스타일링

https://www.udemy.com/course/best-react/

---

* css 파일로 빼서 jsx파일에 import하는 방식

: 파일 내 모든 컴포넌트 요소에 영향을 미침

 

1. 동적 스타일

1) 인라인 스타일

<label style={{color: !isValid ? 'red' : 'black'}}>hi</label>

- 라벨의 색상을 state 값에 따라서 동적으로 적용 가능

- 인라인 style은 최우선순위기 때문에 css파일을 오버라이드 함

 

2) css 클래스

<div className={`className1 ${!isValid ? 'className2' : ''}`}>

.className1.className2 {
   color: black;
}

- 템플릿 리터럴을 이용하여 동적으로 클래스 이름 추가 가능

- css 파일에서 클래스 이름에 따른 css를 설정해주면됨

 

2. styled components

- 컴포넌트 별 스타일을 지정할 수 있는 패키지

npm install --save styled-components

위 명령어로 패키지 설치

 

스타일 상수를 선언하여 어느 jsx파일에서도 불러서 사용할 수있는 button 스타일을 지정가능

import styled from 'styled-components'; //패키지 import

const Button = styled.button`
    color: white;
	
    /*선택자 있을때*/
    &:focus {
    	...
    }
`;

- 이렇게 사용하는 button은 styled-components가 만든 랜덤 클래스이름이 붙여진다.

 

 

- styled-components는 props를 이용하여 동적 스타일을 더 쉽게 가능하다

const Button = styled.button`
    color: ${props => (props.invalid ? 'red' : '#333')};
`;

 

- 미디어 쿼리를 쓸 수있다.

const Button = styled.button`
    @media (조건) {
    	...
    }
`;

 

3. css모듈

1) 사용 방법

ⓐ 확장자가 .module.css 인 css 모듈 파일을 생성한다. (스타일 작성)

ⓑ jsx파일에 import 이름 from 'xxx.moudule.css'; 로 불러온다.

ⓒ 스타일을 적용하고 싶은 컴포넌트에 className={이름.css에서작성한클래스명} 을 해준다.

ex) <button className={style.button} >

 

- 장점은 css을 파일을 따로 분리해서 사용하여 컴포넌트별 스타일을 지정가능하게함

 

2) 동적 스타일 방법

<div className={`${styles['form-control']} ${!invalid && styles.invalid}`}>

- 템플릿 리터털 이용해서 가능 스타일 객체는 []으로 감싸준다.

 

 

 

 

 

+ 섹션 7 리액트 디버깅 하기

1) 크롬 개발자 도구에서 직접 코드 한줄한줄씩 실행 가능

2) 리액트 DevTool 이용 (크롬 확장프로그램에서 다운 가능)