[React]리액트의 css 적용 방법

🐾 리액트의 css 적용 방법

1.📍 css 파일

css파일을 한개 만든다
해당 css파일을 사용하고 싶은 js 파일에서 import를 한다
- 모든 컴포넌트에 영향을 미친다
(html 파일이 하나, 그 속에 영향을 미치는 대상은 전체)

d04cssfile.js

import './d05cssfile.css';

function CssFile(){
  return(
    <>
      <h1>css파일을 따로 만들어서 컴포넌트에 적용시키기</h1>
      <p>
        css파일을 만들고 해당 경로를 사용하고자 하는 
        js 안에서 import 해주면 된다
      </p>
    </>
  );
}

export default CssFile;

d05cssfile.css

h1{
  font-size: 50px;
}

p{
  color: blue;
}

2. 📍html안에서 style태그

- react에서는 사용안함

3. 📍인라인

html과 동일한 이름으로 만들어진 jsx (p, h1...)
에 style 속성에다 적용시키고자 하는 css 스타일을
자바스크립트 객체로 만들어서 대입한다
이때 css 속성 이름이 객체의 key가 되고,
css 속성 값이 객체의 value가 되는데, value는 반드시
문자열로 작성을 해야하며, key는 특수문자 사용이 안되기에
카멜표기법으로 변경하여 적용

보통 공통적으로 모든 페이지에 대해서 적용되어야 하는 css (전역 css, global css)는 css 파일로 만들고
나머지는 각각의 컴포넌트 별로 css를 만든다

d03inline.js

function Inline(){
    return(
      <>
        <h1 >인라인 스타일 적용방법</h1>
        <p style={
          {
            color:'red', 
            marginLeft:'20px',
            border : '1px solid black'
          }
        }>
          리액트의 jsx 중 html 태그와 이름이 똑같이 만들어져있는
          jsx에서 inline 스타일을 입히기 위해서는 
          style 속성에 적용시킬 css속성들을 "객체"로 대입
        </p>
      </>
    );
  }
  
  export default Inline;

4.📍 컴포넌트별로 스타일 주기

html X --> js만 사용하면 되네?
css파일도 js로 만들면 안되나?

css in js

css를 js 파일로 만들자
컴포넌트 단위로 css를 만들자
--> 내가 만든 컴포넌트를 남이 사용할수 있음 + 내가 다른
프로젝트 할때도 갖다 쓸수 있다(마치 PP 템플릿처럼)

library 설치

   - emotion
    
   - styled-components

라이브러리 설치

- 설치할 위치(내가 설치할 프로젝트 폴더 안에서 설치)
- npm install 라이브러리 이름   

npm install --save @emotion/react @emotion/styled

d06emotion.js

import styled from '@emotion/styled';

function EmotionComponent(){
  return(
    <Box>
      <Title>이모션을 활용한 컴포넌트</Title>
      <p>이모션 컴포넌트입니다</p>
    </Box>
  );
}

let Box = styled.div`
  background-color : silver ;
  width:800px;
`;

let Title = styled.h1`
  margin:0;
  font-size:36px;
`;

export default EmotionComponent;

App.js

import EmotionComponent from './day02/d06emotion';

function App() {
  return (
 <EmotionComponent/>
  );
}

export default App;