리액트 기초5 - css in JS

👉 리액트에서 css를 넣는 방법

1. html 안에 style = {{ color: "blue",}} 형태로 넣기
2. App.css파일을 만들어 import
3. css in JS 방식

오늘 정리해볼 개념은 3. css in JS방식이다.

자바스크립트를 이용하여 css를 만들어낸다.
이 방식의 이점은 조건에 따라 어떠한 스타일 적용 또는 특정 로직을 적용할 수 있다.

이 방식을 이용하기 위해서 styled componet를 사용할 것이다.

[vsCode 환경]

1. 터미널에서 styled components 설치
   yarn add styled-components

2. extenstions 에서 vscode-styled-components 를 설치

[사용방법]

1. 스타일 컴포넌트 임포트 하기
   import styled from "styled-components";
2. 스타일 컴포넌트 만들기
   
3. 만든 스타일 컴포넌트 사용하기
   

div뿐 아니라 p 태그도 스타일 컴포넌트 제작 가능
const StP = styled.p ``;

---

여기까지 기본 개념이였고 활용예시를 좀 더 보자면

👉 props로 넘겨받은 값을 받아와서 스타일 컴포넌트 적용하기

👉 StBox가 반복되니 map함수와 switch문을 이용하여 코드 리팩토링을 해보겠다.

1. borderColor가 담겨있는 리스트 만들기
2. 담긴 리스트를 반환해주는 함수를 만들기
   이 부분은 borderColor에 맞는 박스이름을 출력해주기 위함
3. stBox를 map함수를 이용하여 출력

이렇게 코드 리팩토링을 해 주었다.
케이스에 맞게 박스 색상이 출력될 것이고
borderColor에 담겨있는 배열만큼 박스 리스트가 출력될 것이다.

코드 리팩토링은 아직 어렵지만 차근차근 반복하여 익숙해져서
내 것으로 만들어야겠다.