React -Styled Components

이번 2차 프로젝트는 scss 대신 styled component를 이용하여 모든 태그를 스타일링 해보자!

📍 설치

$ npm install styled-components

📍 사용

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

const App = () => {
  return <Title>styled-components!!</Title>;    // 2
};

const Title = styled.h1`       
  font-size: 32px;             
  text-align: center;          
  color: purple;               
`;                             

export default App;

1. styled-components의 styled를 import 해준다.
2. 함수 바깥에 컴포넌트로 사용할 이름을 정해주고 styled. 뒤에 해당되는 태그를 붙여준다. style 속성은 백틱(`) 안에 넣어준다.
3. UI가 렌더링 되는 return문 안에서 컴포넌트를 html 태그의 형태로 선언한다. styled-component는 셀프클로징도 가능하다.
   
   
   

📍 styled-component 파일 분리하기

import styled from "styled-components";

export const Nav = styled.div`
  width: 100vw;
  height: 123px;
`;
export const Container = styled.div`
  display: flex;
  margin: 0 auto;
  align-items: center;
`;

스타일드컴포넌트 파일에서 styled를 import 하고 컴포넌트를 export 한 뒤

import * as S from "./AppStyle";

const App () => {
  return(
    <>
    <S.Nav />
    <S.Container />
    </>
  )
}

* 선택자를 사용하면 AppStyle.js에 있는 모든 export한 컴포넌트를 import 할 수 있다.
S로 받았기 때문에 사용할 때는 S.[컴포넌트명]으로 사용해주면 된다.

📍 props 활용

우리팀은 공통적으로 많이 사용되는 색상을 theme.js이라는 파일에서 아래와 같이 지정 후 export해주었다.

const theme = {
  mainColor: "#62B2F2",
};

export default theme;

스타일드 컴포넌트에서 이 theme color를 사용하기 위해서는 아래와 같은 방식으로 props를 사용하면 된다.

export const SearchContainer = styled.div`
  background-color: ${props => props.theme.mainColor};
`;

- props와 state 활용하여 버튼 색상 변경하기

import styled from "styled-components";

const APP () => {
  const [changeColor, setChangeColor] = useState(false);
  const handleChangeColor = () => {
    setChangeColor(!changeColor);
  };
  return <HotelCategory onClick={handleChangeColor} primary={changeColor} />
}
  
const HotelCategory = styled.div`
 border: 1px solid ${props => (props.primary ? "#52ABF3" : "#dee2e6")};
`

changeColor라는 boolean타입의 state를 만들고, 값을 변경해주는 함수를 만들어주었다.

onClick 이벤트 내에서 함수를 실행시키고, primary값에 changeColor를 넣어 버튼을 클릭할 때마다 primary의 값이 변경되도록 코드를 작성했다.

styled-component 내에는 삼항연산자를 사용하여 background-color primary의 값이 true일 때 #52ABF3 색상이, false일 때는 #dee2e6이 적용되도록 했다.

➡️ 이처럼 styled-component를 사용하면 props를 이용하여 스타일 속성 내에 조건식을 작성하는 것이 가능하기 때문에 하나하나 inline-style로 조건식을 작성하는 것보다 가독성이 좋아진다