[React] const StyledComponents = styled.Love `🖤`;

🎨 Styled-Components란?

• CSS in JS 기술이자 인기 터지는 React 라이브러리

  React 스타일 적용방식
  1) CSS
  2) CSS-in-CSS (Sass, Bootstrap, TailwindCSS 등)
  3) CSS-in-JS (styled-components 등)
  
  

• styled-components 설치하기

   npm install styled-components
   // npm install styled-components@5

---

🎨 Global Style

// App.js
import React from 'react';
import Example from './components/Example';
import normalize from 'styled-normalize';
import { createGlobalStyle } from 'styled-components';

// GlobalStyle 적용
const GlobalStyle = createGlobalStyle`
${normalize}

div {
  padding: 30px;
}

span {
  color: hotpink;
  font-size: 18px;
  font-weight: bold;
}

button {
  width: 60px;
  border: none;
  margin-top: 20px;
  cursor: pointer;
  background-color: pink;
}
`;

const App = () => {
  return (
    <>
      <GlobalStyle />
      <div>
        <h1>안녕 클레오파트라</h1>
        <span>세상에서 제일가는 포테이토칩</span>
        <br />
        <button>클릭</button>
        <Example />
      </div>
    </>
  );
};

export default App;

// Example.jsx
import React from 'react';

const Example = () => {
  return (
    <>
      <h1>딸기가 좋아 딸기가 좋아</h1>
      <span>딸기 딸기 딸기 딸기 예에에에에에</span>
      <br />
      <button>click</button>
    </>
  );
};

export default Example;

Global Style

• Styled-Components가 제공하는 createGlobalStyle() 함수를 사용한다.

• Global 말 그대로 전역 즉, 모든 컴포넌트에서 공통으로 적용되는 스타일을 의미한다.
  → 웹 페이지 배경색, 글꼴 등 공통으로 사용되는 스타일에 효율적이다.

• createGlobalStyle() 함수를 사용하면 CSS 파일 없이도 전역 스타일 쉽게 생성할 수 있다.

• createGlobalStyle()를 App.js(현재 최상위 컴포넌트) 상단에 추가해 주면, 모든 하위 컴포넌트 스타일에 적용할 수 있다.

• 기본적으로 우선순위가 높다.

• Styled-Components 문법에서 스타일을 꾸며줄 때 tagged tamplate literal (``)을 사용한다.
  
  

---

🎨 Reset CSS vs Normalize CSS

Reset & Normalize 왜 차이가 나는 걸까?

• 브라우저에서 제공하는 기본 스타일이 브라우저 (Chrome, Safari, Edge 등) 마다 다르다.
• Reset CSS vs Normalize CSS는 크로스 브라우징을 위해 각 브러우저의 기본 스타일을 무효화한다.
  
  

Reset CSS / Normalize CSS 설치하기

   npm i styled-reset
   npm i styled-normalize

1. Reset CSS

• 브라우저의 내장 스타일을 초기화 시켜주기에 Reset CSS을 적용하면 급격하게 웹페이지가 달라진다.
• 겉으로 볼 때 태그 구별이 불가해진다. Reset CSS를 적용한 뒤, 아무런 스타일도 추가하지 않으면, 해당 웹페이지 상의 모든 HTML 요소가 동일하게 보인다.

2. Normalize CSS

• 어느 브라우저에서든 일관적인 모습으로 나타난다.
• 브라우저의 내장 스타일을 최대한 유지하고, 브라우저 간에 상이한 부분만 스타일을 통일시켜 준다.
• 코드의 우선순위 등의 측면에서 충돌이 일어날 가능성이 적다.
• 일반적으로 React 프로젝트에서 Normalize CSS가 가장 대중적으로 사용되고 있다.

3. 어떤 걸 사용해야 할까?

Reset CSS

• 브라우저의 내장 스타일에 전혀 의존하지 않고 모든 HTML 요소를 하나부터 열까지 직접 스타일을 할 경우
• 규모가 있는 장기 프로젝트나 회사 전체를 위한 디자인 시스템을 만들 경우

Normalize CSS

• 브라우저의 내장 스타일을 최대한 따르면서 필요한 부분만 스타일을 변경하거나 추가하고 싶을 경우
• 모든 HTML 요소를 처음부터 스타일 할 여력이 되지 않고, 일정이 빡빡한 소규모 프로젝트일 경우
  
  

결론은 무엇을 사용하든 정답은 없다는 것 아닐까?
자신의 상황에 가장 적합하고 효율적인 방법을 선택하자!! 그것이 그대가 가는 길이노라 🎢

Reset / Normalize 참고 사이트

---

🎨 styled-components 적용

import React from 'react';
import styled from 'styled-components';

const ContentDiv = styled.div`
  margin: 40px;
  padding: 30px;
  border: solid 2px;
  background-color: aliceblue;
`;

const ContentH2 = styled.h2`
  width: 200px;
  margin: 0 auto;
  text-align: center;
`;

const App2 = () => {
  return (
    <ContentDiv>
      <ContentH2>Content</ContentH2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos excepturi corrupti quo
        blanditiis! Adipisci amet corporis ipsum odio minima aliquid quisquam! Dignissimos natus
        laborum qui veritatis quaerat eaque! Nemo, ullam.
      </p>
    </ContentDiv>
  );
};

export default App2;

styled-components

• React 인라인으로 스타일을 적용할 때와 다르게 기존 CSS 문법으로 프로퍼티 작성 가능하다.

const 변수명 = styled.태그명`
	background-color : red;
`

---

🎨 props에 따른 조건부 스타일

import React from 'react';
import styled from 'styled-components';

const ContentDiv = styled.div`
  margin: 40px;
  padding: 30px;
  border: solid 2px;
  background-color: aliceblue;
`;

const ContentH2 = styled.h2`
  color: ${(props) => (props.name === 'hello' ? 'hotpink' : 'black')};
  width: 200px;
  margin: 0 auto;
  text-align: center;
`;

const App2 = () => {
  return (
    <ContentDiv>
      <ContentH2 name="hello">Content</ContentH2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos excepturi corrupti quo
        blanditiis! Adipisci amet corporis ipsum odio minima aliquid quisquam! Dignissimos natus
        laborum qui veritatis quaerat eaque! Nemo, ullam.
      </p>
    </ContentDiv>
  );
};

export default App2;

props

• props를 사용해서 조건에 따라 스타일을 적용한다.

• 문자열 리터럴 안에 자바스크립트 코드를 넣을 때 처럼 ${ } 안에 코드를 입력한다.

• 삼항연산자를 이용해 props.name의 조건이 참이면 hotpink 글자색을, 거짓이면 black 글자색을 출력한다.
  
  

확장해서 사용하기

import React from 'react';
import styled from 'styled-components';

const ContentDiv = styled.div`
  margin: 40px;
  padding: 30px;
  border: solid 2px;
  background-color: aliceblue;
`;

const ContentH2 = styled.h2`
  color: ${(props) => (props.name === 'hello' ? 'hotpink' : 'black')};
  width: 200px;
  margin: 0 auto;
  text-align: center;
`;

const Content = styled(ContentH2)`
  border: 1px solid blue;
`;

const App2 = () => {
  return (
    <ContentDiv>
      <ContentH2 name="hello">Content</ContentH2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos excepturi corrupti quo
        blanditiis! Adipisci amet corporis ipsum odio minima aliquid quisquam! Dignissimos natus
        laborum qui veritatis quaerat eaque! Nemo, ullam.
      </p>
      <Content>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
      </Content>
    </ContentDiv>
  );
};

export default App2;

확장하기

• ContentH2의 스타일을 Content로 확장해서 사용할 수 있다.
  
  

---

🎨 다양한 방법으로 버튼 만들기

1. Global Style 적용

// App3.js
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { ButtonOne } from './components/ButtonOne';
import { ButtonTwo } from './components/ButtonTwo';
import { ButtonThree } from './components/ButtonThree';
import { ButtonFour } from './components/ButtonFour';

// 글로벌 스타일 적용
const GlobalStyle = createGlobalStyle`
button {
  width: 200px;
  height: 80px;
  border-radius: 10px;
  margin: 30px;
  font-size: 20px;
}
`;

const App3 = () => {
  return (
    <>
      <GlobalStyle />
      <ButtonOne>Global / Styled</ButtonOne>
      <ButtonTwo>Global / Styled</ButtonTwo>
      <ButtonThree>Global / 확장</ButtonThree>
      <ButtonFour name="Four">Global / props</ButtonFour>
    </>
  );
};

export default App3;

2. 기본 styled-components 적용

// ButtonOne.jsx
import styled from 'styled-components';

// 일반 styled-components 스타일 적용
export const ButtonOne = styled.button`
  background-color: gold;
`;

// ButtonTwo.jsx
import styled from 'styled-components';

// 일반 styled-components 스타일 적용
export const ButtonTwo = styled.button`
  background-color: lightgreen;
  color: white;
  box-shadow: 5px -5px greenyellow;
  font-weight: bold;
`;

3. ButtonTwo 확장해서 ButtonThree 적용

// ButtonTree.jsx
import styled from 'styled-components';
import { ButtonTwo } from './ButtonTwo';

// 확장하기
export const ButtonThree = styled(ButtonTwo)`
  border: 4px solid purple;
  border-radius: 50px;
  color: purple;
`;

4. props에 따른 조건부 스타일로 적용

// ButtonFour.jsx
import styled from 'styled-components';

// props에 따른 조건부 스타일
export const ButtonFour = styled.button`
  background-color: ${(props) => (props.name === 'Four' ? 'powderblue' : 'red')};
  border-radius: 50px 70px;
  border: 5px dotted yellow;
`;

---

🎨 Module

1. 기본 코드

[ App.js ]

import React from 'react';
import './App.css';
import Question from './components/Question';

const App = () => {
  return (
    <>
      <nav className="box">
        <ul>
          <li id="detail" className="text">
            상세정보
          </li>
          <li id="qa" className="text">
            Q&A
          </li>
          <li id="review" className="text">
            Review
          </li>
        </ul>
      </nav>
      <Question />
    </>
  );
};

export default App;

[ Question.jsx ]

import React from 'react';

const Question = () => {
  return (
    <div className="box">
      <h2 className="text">Q&A</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos excepturi corrupti quo
        blanditiis! Adipisci amet corporis ipsum odio minima aliquid quisquam! Dignissimos natus
        laborum qui veritatis quaerat eaque! Nemo, ullam.
      </p>
    </div>
  );
};

export default Question;

CSS

1. 부모 컴포넌트에서 import한 CSS는 자식까지 자동으로 적용된다.

2. 자식 컴포넌트에서 새로 CSS를 적용하게 되면 부모의 스타일은 자식 컴포넌트에 import된 스타일이 덮어 쓰여지게 된다.

=> 따라서 리액트에서도 기본적으로 CSS 선택자 우선순위가 적용되며, 컴포넌트에 스타일을 사용하면 결국 다른 컴포넌트 스타일에도 영향을 미친다.

아래에 import한 CSS를 살펴보자!

부모 컴포넌트 App.js가 import한 App.css 스타일이 아닌,
자식 컴포넌트 Question.jsx가 import한 Question.css의 스타일이 적용되었다.

[ App.js ]

import "./App.css";

[ App.css ]

body {
  padding: 30px;
}

div {
  margin: 40px;
  background: rgb(214, 243, 255);
}
h2 {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  color: rgb(206, 74, 131);
}

[ Question.jsx ]

import './Question.css';

[ Question.css ]

div {
  background: rgb(255, 220, 226);
  margin: 30px;
  padding: 30px;
}

h2 {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  color: rgb(132, 196, 153);
}

p {
  font-weight: bold;
}

그런데 만약...

App.js에 일반 태그가 아니라 태그에 클래스 이름을 넣어주고,
App.css에서 클래스 이름을 선택한 뒤, 스타일을 적용하면 과연 어떻게 될까?

2. 일반 CSS

[ App.js ]

import "./App.css";

[ App.css ]

body {
  padding: 30px;
}

.box {
  margin: 40px;
  background: rgb(214, 243, 255);
  padding: 20px;
}

.text {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  color: rgb(206, 74, 131);
  font-weight: bold;
}

p {
  font-weight: bold;
  padding: 20px;
}

[ Question.jsx ]

import './Question.css';

[ Question.css ]

.box {
  background: rgb(255, 220, 226);
  margin: 30px;
  padding: 30px;
}

.text {
  width: 200px;
  margin: 0 auto;
  text-align: center;
  color: rgb(132, 196, 153);
}

p {
  font-weight: bold;
}

일반적인 CSS

1. App.js에만 클래스 이름을 선택한 CSS 스타일을 적용하니 하늘색 배경이 잘 적용된 걸 볼 수있다.

2. 그런데 역시, 자식 컴포넌트 Question.jsx에도 클래스 이름을 선택한 CSS 스타일을 적용하니 바로 자식 컴포넌트 CSS 스타일이 덮어 쓰여지면서 분홍색 배경이 적용되었다.

=> 따라서 클래스를 통해 우선순위를 높여도 결국 컴포넌트끼리 클래스 이름이 중복되면 소용 없어진다. 특히 컴포넌트로 분리해 작업하는 리액트의 특성상 클래스 이름이 겹칠 위험성은 더 높다.

이를 해결하기 위해 CSS 파일 이름에 .css를 module.css로 바꿔주자!

module.css를 사용하면 class명에 고유값을 추가해도 겹치지 않는다!

3. Module.css

[ Question.jsx ]

import React from 'react';
import styles from './Question.module.css';

const Question = () => {
  return (
    <div className={styles.box}>
      <h2 className={styles.text}>Q&A</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos excepturi corrupti quo
        blanditiis! Adipisci amet corporis ipsum odio minima aliquid quisquam! Dignissimos natus
        laborum qui veritatis quaerat eaque! Nemo, ullam.
      </p>
    </div>
  );
};

export default Question;

[ App.js ]

import React from 'react';
import styles from './App.module.css';
import Question from './components/Question';

const App = () => {
  return (
    <>
      <nav className={styles.box}>
        <ul>
          <li id="detail" className={styles.text}>
            상세정보
          </li>
          <li id="qa" className={styles.text}>
            Q&A
          </li>
          <li id="review" className={styles.text}>
            Review
          </li>
        </ul>
      </nav>
      <Question />
    </>
  );
};

export default App;

module 적용

• Question.css 파일명 → Question.module.css로 바꿔준다.

• Question.jsx 클래스명 → {styles.클래스명}으로 바꿔준다.

• App.css 파일명 → App.module.css로 바꿔준다.

• App.js 클래스명 → {styles.클래스명}으로 바꿔준다.

=> 이렇게 하면 자동으로 클래스명이 겹치지 않도록 처리해준다.

nav와 div 모두 box라는 style을 받고 있지만, 클래스명이 다르다!

4. Module.css 주의점

• 적용하고자 하는 컴포넌트 이름과 반드시 일치시켜줘야 한다.

Example.jsx 파일 → Example.module.css 파일

• module에서 태그로 지정해주고 싶을 때는 아래와 같은 양식을 적용해야 한다.

// Example.modeule.css 파일
.section h1 {
    font-size: 50px;
}

// Example.jsx 파일
<div className={styles.section}>
    <h1>hello world</h1>
    <p className={styles.contents}>hello world</p>
<div/>