[리액트 React] 스타일 컴포넌트(Styled Components) 지역,전역 스타일

• 지역 스타일링
• 전역 스타일링
• default style 제거

 

스타일 컴포넌트 설치 방법

• 확장 > vscode-styled-components 설치
• 터미널에 yanr add styled-components 입력(난 npm add styled-components 이렇게 입력했는데 보안 외에 문제는 없다 함)
•  package.json에 "styled-components": "^6.1.8" 있으면 제대로 설치된 것

---

지역 스타일링

• 스타일을 입힐 컴포넌트를 만든다(지역 스타일링), 변수 선언 = 스타일. 스타일입힐 태그명 `백틱 내부에 스타일 입력`
• 선언된 변수 명을 태그명에 넣는다 <div> => <변수명>
•  border: 1px solid ${(props) => props.borderColor}; props로 borderColor 을 전달받는다

import styled from "styled-components"; // 스타일 컴포넌트 연결

// 태그에 스타일을 입힌, 스타일된 컴포넌트 만들기

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

 

• 3개의 div에 각각 박스 선을 다르게 줄 수 있게 조건문을 사용

// 박스의 색
const boxList = ["red", "blue", "green"];

// 색을 넣으면, 이름을 반환하는 함수
const getBoxName = function (color) {
  switch (color) {
    case "red":
      return "빨간 박스";

    case "blue":
      return "파란 박스";

    case "green":
      return "초록 박스";

    default:
      return "검정 박스";
  }

 

 

• div에 컴포넌트로 스타일을 입힌다 <StBox borderColor="red"> 빨간 박스 </StBox>
• map 함수로 boxList배열을 반복한다, 인덱스가 3개니까 3개가 나옴
• switch문으로 boxList의 color를 기준으로 텍스트를 반환하게 한다
• 결론, boxList배열 인덱스만큼 반복하며 switch문의 조건에 맞춰 텍스트를 넣어주고 StBox에 입력된 스타일을 넣어준다(컬러는 list에 입력된 값)

    <StContainer>
      {boxList.map(function (box) {
        return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
      })}
    </StContainer>

 

더 쉬운 정리

1.  boxList - 이 배열을 반복할 거야!
2. box - 배열 안에 인덱스 명을 이거로 할 거야!
3. getBoxName(box) - 스위치 문 함수에 인덱스를 매개변수로 보내 작동시킬 거야
4. 인덱스가 red면 스위치문 결과로는 빨간 박스가 나오니까 스위치문에 매개변수를 보내면 각 색마다 설정해 둔 텍스트가 나온다

---

전역 스타일링

• createGlobalStyle로 전역 스타일링 컴포넌트 생성, 생성한 전역 스타일 컴포넌트를 애플리케이션의 최상위 컴포넌트에 추가해 주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용된다.
• 반복되는 스타일, 또는 프로젝트에서 자주 사용되는 색 등을 전역 스타일로 분리해 컴포넌트를 연결하여 사용하면 더욱 간결하고 오류를 줄일 수 있다

const GlobalStyle = createGlobalStyle`
body{  
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  }`;

export default GlobalStyle;

 

• 만들어둔 지역스타일링된 컴포넌트 가져와서 props에 값을 입력하여 전달했다
• TestPage 컴포넌트에서 반복되는 스타일을 GlobalStyle 컴포넌트를 만들어 전역스타일로 분리하여 컴포넌트를 연결해 주면 적용된다

   <TestPage title="제목입니다" contents="내용입니다" />

     <GlobalStyle />

 

---

default style 제거

• 모든 요소는 기본적으로 크기, 바깥여백, 안쪽여백 등 기본 스타일이 적용되어 있다, 이것을 모두 지우기 위한 것
• Css 파일을 만들어 준다(Reset.css)
• 구글에 스타일 리셋으로 검색하면 소스가 나온다 복사 > css파일에 붙이기
• index.js에 import 하면 끝

    <div>
      <span>default style 테스트</span>
      <h1>이건 h1태그입니다.</h1>
      <p>나는 p태그 입니다</p>
    </div>
  );