React - Components styled 디자인

※ 디자인은 정적인것이므로 함수 내부에서 하지 말고 css파일 import해서 사용하기!

 

🔎 styled-components
: Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-IN-JS 라이브러리 (인라인 스타일링)
- CSS를 컴포넌트화하여 JSX로 사용할 수 있음
- CSS에 props를 사용할 수 있음

 

✅ 설치하기

npm install --save styled-components

 

설치완료 확인 pakage.json

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
 }

 

 

✅ 적용하기

① import

import styled from 'styled-components';

🔎 styled-components 적용 방법
styled.tagName 과 같이 작성한 뒤, 적용하고자 하는 CSS 스타일 작성

 

② 기본 css 적용 (``;)

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

 

위 코드는 아래와 같은 의미의 코드임! 아래처럼 안적어도되니 편함!

let t = document.createElement("h1");
t.style={
  fontSize:"1.5em";
  textAlign:"center";
  color:"palevioletred";
}

 

③ div에 적용

return (
    <div>
      <Title>안녕</Title>
    </div>
  );

➡ 변수명을 tagName으로 넣어줘야 한다.

 

---

⭐ TIP!

스타일 컴포넌트 css 자동완성 확장팩 설치

 

---

 

⭐ 컴포넌트 스타일의 장점

- js파일과 css파일이 합쳐져서 관리가 쉬움 = 컴포넌트화 (재사용 가능)

- 사용할 때 tag처럼 사용할 수 있으므로 편리함