리액트의 CSS 적용 방법

Inline Style

• CSS를 직접 컴포넌트에 적용하는 방법
  => 두번의 중괄호 사용(첫번째는 JSX내에 JavaScript, 두번째는 JavaScript객체 생성)

function App() {
  return (
    <div
      style={{
        marginLeft: "50px",
        marginTop: "50px",
        color: "blue",
        background: "red",
        fontSize: "12px",
        width: "35px",
      }}
    >
      hello
    </div>
  );
}

className

• html의 class를 이용하는 방식으로 css 파일에 정의한 style을 JSX에 className 속성을 통해 적용

/* App.css */
.style{

  margin-left:50px;
  margin-top:50px;
  color:blue;
  background:red;
  font-size:12px;
  width:35px;
}

/* App.js */
function App() {

  return(

  	<div className="style">hello</div>
  )


}

• 다른 컴포넌트에서 같은 class 이름을 가진 경우에 충돌이 발생 할 수 있다
  => 이에 대한 해결책이 밑에 제시된 Styled Components, CSS Modules

Styled Components

• CSS-in-JS 라이브러리 중 하나로서 JS파일 내에 CSS작성 후 독립적인 컴포넌트로 활용
• NPM(Node Package Manager)를 통해 관리되는 패키지 이므로 간단한 명렁어를 통해 설치 가능

  $ npm i styled-components

설치가 잘 되었다면 package.json 파일에 추가 된 것을 확인 가능

"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"styled-components": "^6.1.11",
"web-vitals": "^2.1.4"
},

기본 구조

import styled from "styled-components";

function App() {
  return (
    <Div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
    </Div>
  );
}

const Div = styled.div`
  background-color: blue;
  display: flex;
  flex-direction: column;
  text-align: center;
`;

• 기본적으로 styled-components를 사용하여 나타낸 구조이다
• styled-components로 컴포넌트를 만들 시에는 대문자를 해주어야 한다

확장

• 똑같은 속성을 가진 컴포넌트에 각각 다른 색깔을 부여하고 싶다면 props를 이용할 수 있다

function App() {
  return (
    <Div>
      <Smalldiv bcolor={"red"}>hello</Smalldiv>
      <Smalldiv bcolor={"white"}>hello</Smalldiv>
      <Smalldiv bcolor={"green"}>hello</Smalldiv>
    </Div>
  );
}

const Div = styled.div`
  background-color: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
`;
const Smalldiv = styled.div`
  background-color: ${(props) => props.bcolor};
  width: 40px;
  height: 50px;
  display: flex;
  flex-direction: column;
  text-align: center;
`;

상속

• 기존 컴포넌트에 새로운 값을 부여하여 새롭게 나타내고 싶을때 사용, 여기서는 기존 Smalldiv 자체에 border-radius를 부여한 컴포넌트 완성하였다

function App() {



  return(

    <Div>
      <Smalldiv bcolor={"red"}>hello</Smalldiv>
      <Smalldiv bcolor={"white"}>hello</Smalldiv>
      <CircleSmalldiv bcolor={"green"}>hello</CircleSmalldiv>
    </Div>
  )


}

const Div= styled.div`
background-color: blue;
display: flex;
flex-direction: column;
align-items: center;

`;

const Smalldiv=styled.div`
background-color: ${(props)=> props.bcolor};
width: 40px;
height: 50px;
display: flex;
flex-direction: column;
text-align: center;

`;

const CircleSmalldiv= styled(Smalldiv)`
border-radius: 10px;

`;

as

• 기존 div 속성을 가진 Smalldiv 컴포넌트를 button으로 만들고 싶으면 중복으로 작성하지 않고 as를 통해 추가하면 된다.

function App() {



  return(

    <Div>
      <Smalldiv bcolor={"red"}>hello</Smalldiv>
      <Smalldiv bcolor={"white"}>hello</Smalldiv>
      <CircleSmalldiv as="button" bcolor={"green"}>
        hello
        </CircleSmalldiv>
    </Div>
  )


}

keyframes

• animation을 위한 작업과정

import styled,{keyframes}from 'styled-components';



function App() {


  const Circleani= keyframes`
  0%{

    background-color: red;
  }
  33%{
    background-color: green;
  }
  66%{
    background-color: blue;
  }
  100%{
    background-color: red;
  }
  
  `;
  const CircleSmalldiv= styled(Smalldiv)`
  border-radius: 10px;
  animation: ${Circleani} 3s linear infinite;

  `
    return(

      <Div>
        <Smalldiv bcolor={"red"}>hello</Smalldiv>
        <Smalldiv bcolor={"white"}>hello</Smalldiv>
        <CircleSmalldiv bcolor={"green"}>hello</CircleSmalldiv>
      </Div>
    );


  }

  const Div= styled.div`
    background-color: blue;
    display: flex;
    flex-direction: column;
    align-items: center;
  `;
  const Smalldiv=styled.div`
    background-color: ${(props)=> props.bcolor};
    width: 40px;
    height: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
  `;

가상 선택자

• 가상 선택자를 통해서 Smalldiv안에 div에 있는 컴포넌트의 색깔을 바꾸고 hover시에도 변경할 수 있도록 한다
• 두번째에 나온 hover 앞에 &는 상태 지정하는 것에도 사용이 된다

import logo from "./logo.svg";
import "./App.css";
import styled, { keyframes } from "styled-components";

function App() {
  const Circleani = keyframes`
  0%{

    background-color: red;
  }
  33%{
    background-color: green;
  }
  66%{
    background-color: blue;
  }
  100%{
    background-color: red;
  }
  
  `;
  const CircleSmalldiv = styled(Smalldiv)`
    border-radius: 10px;
    animation: ${Circleani} 3s linear infinite;
  `;
  return (
    <Div>
      <Smalldiv bcolor={"red"}>hello</Smalldiv>
      <Smalldiv bcolor={"white"}>
        <div>hellosdiv</div>
      </Smalldiv>
      <CircleSmalldiv bcolor={"green"}>hellos</CircleSmalldiv>
    </Div>
  );
}

const Div = styled.div`
  background-color: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
`;
const Smalldiv = styled.div`
  background-color: ${(props) => props.bcolor};
  width: 40px;
  height: 50px;
  display: flex;
  flex-direction: column;
  text-align: center;

  div {
    background-color: purple;
    &:hover {
      background-color: blue;
    }
  }
`;

export default App;

다른 컴포넌트에서 import

• style 컴포넌트를 한 파일에 모아 두고 import하여 코드의 중복을 줄일 수 있다

/*Styled.js*/
import styled, { keyframes } from "styled-components";

const Circleani = keyframes`
0%{

  background-color: red;
}
33%{
  background-color: green;
}
66%{
  background-color: blue;
}
100%{
  background-color: red;
}

`;
const Smalldiv = styled.div`
  background-color: ${(props) => props.bcolor};
  width: 40px;
  height: 50px;
  display: flex;
  flex-direction: column;
  text-align: center;

  div {
    background-color: purple;
    &:hover {
      background-color: blue;
    }
  }
`;
const CircleSmalldiv = styled(Smalldiv)`
  border-radius: 10px;
  animation: ${Circleani} 3s linear infinite;
`;

const Div = styled.div`
  background-color: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export { CircleSmalldiv, Div, Smalldiv };

/*App.js*/

import logo from "./logo.svg";
import "./App.css";

import { Div, Smalldiv, CircleSmalldiv } from "./Styled";

function App() {
  return (
    <Div>
      <Smalldiv bcolor={"red"}>hello</Smalldiv>
      <Smalldiv bcolor={"white"}>
        <div>hellosdiv</div>
      </Smalldiv>
      <CircleSmalldiv bcolor={"green"}>hellos</CircleSmalldiv>
    </Div>
  );
}

export default App;

CSS Modules

모듈 CSS 사용하기

• 모듈 CSS는 CSS-in-JS가 아닌 일반 CSS를 사용하면서 CSS의 스코프를 각 컴포넌트에 한정 시키는 방법
• 전역 네임 스페이스에 대한 의존성을 줄이고 코드의 충돌 방지
  => 파일 이름 뒤에 ".module.css"를 붙임 으로서 나타냄

/*box.module.css*/
.style{

    margin-left:50px;
    margin-top:50px;
    color:blue;
    background:red;
    font-size:12px;
    width:35px;
  }

 .style:hover{
    background-color: black;
 } 
  

//App.js

import React from "react";

import style from "./box.module.css";

function App() {
  return <div className={style.style}>클릭해봐</div>;
}

export default App;

동적 스타일 적용하기

인라인 스타일 동적 적용

• 인라인 스타일로 useState를 사용하여 클릭 할때 마다 배경색 변경

function App() {
  const [backcolor, setbackcolor] = useState("red");

  const handleClick = () => {
    setbackcolor(backcolor === "red" ? "black" : "red");
    //삼항 연산자 사용
  };

  return (
    <div style={{ backgroundColor: backcolor }} onClick={handleClick}>
      클릭해봐
    </div>
  );
}

Styled-components로 동적 적용

• 앞서 styld-components부분에서 다룬 정적 적용이 아닌 동적 적용 형태

import styled from "styled-components";
const Buttonclick = styled.div`
  width: 200px;
  height: 50px;
  background-color: ${(props) => (props.clicked ? "red" : "black")};
`;
function App() {
  const [clicked, setclicked] = useState(false);

  return (
    <Buttonclick
      clicked={clicked}
      onClick={() => {
        setclicked(!clicked);
        // set을 통한 동적 할당
      }}
    >
      클릭해봐
    </Buttonclick>
  );
}

모듈 css로 동적 스타일 적용

• useState를 사용하여 클릭 시에 clicked이란 값의 boolean 값에 따라 module.css에 있는 값들의 변화 유도

/*box1.module.css*/
.normal{
    width: 200px;
    height: 50px;
    background-color: red;
  }

 .clicked{
    width: 200px;
    height: 50px;
    color: white;
    background-color: black;
 } 
  

//App.js

import style1 from "./box1.module.css";
function App() {
  const [clicked, setclicked] = useState(false);
  return (
    <div
      className={clicked ? style1.normal : style1.clicked}
      onClick={() => setclicked(!clicked)}
    >
      클릭해봐
    </div>
  );
}

참조: https://velog.io/@hoonnn/React-CSS%EC%97%90-%EB%8C%80%ED%95%9C-%EC%8B%AC%EC%98%A4%ED%95%9C-%EA%B3%A0%EC%B0%B0
참조: https://velog.io/@sorious77/React-Styled-Components-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95-e9o4rnfq