React - css 적용

Css 적용 방식

1. 인라인 스타일

• 태그의 style 프로퍼티에 {} 형태로 css를 바로 적용한다.
  

2. 일반 css 파일

• css파일을 import 해온 후 적용한다. className 속성으로 클래스명 지정
• react app 전체에 적용되기 때문에 동일한 클래스명을 가진 태그에 css가 적용될 위험이 있다.
  

3. module.css 파일

3-1. 클래스를 하나만 지정할 경우

• module.css를 임의의 이름으로 import 해온다 (import 한 객체는 module.css에서 정의한 클래스명 속성을 가지고 있다)
• module.css 의 클래스명을 해쉬값으로 변경한 이름의 클래스를 가져와서 사용한다.
  
  
  

3-2. 클래스를 여러개 지정할 경우

1. 템플릿 리터럴
   • 템플릿 리터럴로 클래스이름 간에 공백을 넣어 할당한다.
2. 배열과 join
   • [].join(" ") 으로 공백을 넣어 각 클래스이름을 문자열로 합친다.
3. classnames 라이브러리
   • classnames()의 인자로 여러 클래스이름을 넣는다.
   • npm install classnames로 설치 필수
4. classnames의 Names, bind 사용
   • 클래스명을 문자열로 바로 넣을 수 있다.

4. styled components

• npm install styled-components로 설치

5. Sass

Syntactically Awesome Style Sheets로써 CSS 전처리기 종류 중 하나.

• npm install sass로 설치
• .scss, .sass 의 확장자를 사용한다.
• 변수를 선언할 때 $를 붙여서 사용
• & 기호는 선택한 요소의 클래스명 그대로를 지칭한다.
• scss에서 공통으로 사용할 값(변수값, 믹스인)은 .scss 를 만들어서 관리
  • scss파일명은 _로 시작 ex) _util.scss

5-1. 기본 사용방법

5-2. @mixin (믹스인)

• js 함수처럼 반복적으로 스타일을 사용하기 위한 문법

5-3. 스타일 상속

5-4. @for

• #{} 보간으로 값을 넣어야 한다.
• through와 to 차이
• through는 마지막을 포함하고 to는 마지막을 포함하지 않는다.
  

5-5. @if

5-6. @each

6. react에서 image 처리

src폴더 내부의 이미지는 import로 가져와야한다.
상대경로로 바로 src속성으로 가져오는것은 안된다 왜????

정적파일 경우 일반적으로 public에서 관리하지만
src안에 넣는 이미지는 보통 코드와 관련이 있는 이미지와 외부에 노출시키고 싶지 않은 이미지도 src에 넣는다

src에 넣어도 빌드 후 static에 들어가도 / 루트경로로 들어가면 stataic 도 접근할수있지않나???