React 9 CSS 적용하기

- React css를 적용하는 방법은 제가 알고 있는 부분에서는 5가지가 있다.

1. 태그에 직접 적용하기

이것은 html안에 style을 적용하는 것이랑 동일하며 JSX문법에 속하고 태그 안에 style를 선언한 후 {{}} 중괄호 2개를 선언하여 중괄호 안에 적으면 된다.
css랑 조금 다르게 객체의 형태로 반환해야 한다.

예)

<div style={{ color: "while", width: "100px", height: "100px" }}>테그에 적용하기</div>

가시성도 안 좋아지고 모든 태그에 직접 다 적용해야 한다는 단점으로 잘 사용 안 하는 것으로 알고 있다. (그냥 안 씀.)

---

2. css파일을 import로 불러오기

이 방법은 기존의 html과 css파일을 불러와 사용하는 것이랑 비슷하다. 하지만 단점이 있는데 리액트는 싱글페이지이다. 즉, 상단의 파일에 선언이 되어 있으면 하위 파일에도 적용이 된다는 단점이 있다.
JSX는 html과 다르게 class를 사용하는 것이 아닌 className을 사용한다. 그 이유는 js문법에 class가 존재하기 때문에 요류를 방지하기 위한 것으로 알고 있다.

예)

import './style';

function App() {
  return (
  	<div className="div_box">작용하기</div>
  );
}

---

3. css module

2번의 방법과 비슷하나 다른 점이 있다면 모두 적용하기보다는 선언된 곳에만 적용이 되며 className적용하는 방법도 다르다.
말 그대로 모듈화 해서 불러오는 방식이다

예)

import styles from './app';

function App() {
  return(
    <div className={styles.div_box}>적용하기</div>
  );
}

---

4. styled-components

js파일에서 css compcnent를 선언해 사용하는 것이다. 이것은 같은 파일 안에서 적용하는 것이기 때문에 웹에서 불러오는 시간도 짧게 걸린다.
먼저 터미널에서 실행시켜 다운로드한 뒤 적용을 할 수 있다.

npm i styled-components

그 후 인포트로 import styled from 'styled-components';을 선언한 후 함수 밑 또는 위에 변수로 선언하고 변수 안에는 imoprt 뒤의 이름.태그를 선언하고 ``을 적는다.
그리고 ``안에 css를 적은 후 함수 return 안에 변수 명을 넣으면 된다.

예)

import styled from 'styled-components';

function App() {
  return (
    <DivBox>
      <Title />
      <NavTitle />
    </DivBox>
  );
}
export default App;

const DivBox = styled.div`
  display: flex;
`;

const Title = styled.h2`
  color: red;
`;

const NavTitle = styled.ul`
  display: flex;
  color: blue;
  font-size: 15px;
`;

사용을 많이 하는 것으로 알고 있다.

---

5. 라이브러리, 부트스트랩 등 사용

이것은 많은 사람들이 사용하는 방법일 것이다. 이미 누군가가 만든 것을 html head에 선언 또는 터미널을 이용해 다운로드한 뒤 import 불러서 사용하는 방식이다.
가지고 오는 만큼 코드를 작성하는 시간이 많이 단축되는 장점이 있다.
예시를 보여주기는 힘들지만 최근에 공부하면서 사용한 부트스트랩 링크를 하나를 넣어 놓겠다. 사용 방법은 홈페이지에 다 있으니 직접 환인 하면 좋을 것 같다.
https://react-bootstrap.github.io/