React 컴포넌트 css 스타일링 기본 / Style Components(prop로 확장, as, 속성 추가, 애니메이션, 가상 선택자)

 

React 컴포넌트 css 스타일링 기본

 

기본이라기 보다는, react컴포넌트를 별도의 css-in-js라이브러리 없이 순수하게 css로만 스타일하는 가장 기본적인 방법을 알아보겠다.

 

Inline Style

 

가장 간단하고 쉬운 방법은 React 컴포넌트에 css인라인 스타일을 바로 적용하는 것이다.

일반적인 웹 페이지에서 인라인 스타일을 적용할 떄처럼 html엘리먼트의 style속성을 이용하면 된다.

 

하지만, React는 자바스크립트로 작성하기 때문에 웹페이지에서 인라인 스타일을 적용할 때와 약간의 차이점이 있다.

 

-style 속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당되야 한다.

- CSS 속성명이 케밥 케이스(kebab case)이 아닌 카멜 케이스(camel case)로 작성되야 한다.

 

이때 카멜 케이스란 var camelCase; 와 같이 중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우에는 낙타와 모양이 비슷하다하여 카멜 케이스라고 한다.

 

import React from "react";

const btnStyle = {
  color: "white",
  background: "teal",
  padding: ".375rem .75rem",
  border: "1px solid teal",
  borderRadius: ".25rem",
  fontSize: "1rem",
  lineHeight: 1.5,
};

function Button() {
  return <button style={btnStyle}>Inline</button>;
}

 

External Stylesheet

 

React컴포넌트 파일에서 해당 css파일을 임포트 하는 방법

그 다음, 엘리먼트의 className속성을 이용해서 외부 파일에 정의된 스타일을 맵핑시켜주는 것

 

예를 들어, Button.css파일에 다음과 같이 스타일을 정의한다.

 

.btn {
  color: white;
  background: teal;
  padding: 0.375rem 0.75rem;
  border: 1px solid teal;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
}

 

그리고 버튼 컴포넌트가 작성된 Button.js파일에서 다음과 같이 위 css파일을 임포트한다.

이때 속성명을 class 대신에 className를 사용해야한다.

 

import React from "react";
import "./Button.css";

function Button() {
  return <button className="btn">External</button>;
}

 

이런 방식

 

CSS Modules

 

위에서 소개한 외부 스타일 시트를 사용하는 방법은 React앱의 규모가 커짐에 따라 css 클래스 이름이 겹치게 될 가능성이 커진다. 기본적으로 글로벌 네임 스페이스 (global namespace)를 사용하기 때문에, 만약 2개의 css파일에 동일한 클래스에 대한 정의가 되어 있다면, 해당 클래스가 적용된 엘리먼트는 2개의 스타일에 모두 영향을 받는다.

 

이 문제를 해결하기 위한 방법으로 각 css 파일에 고유의 네임 스페이스를 부여해주는 css모듈(css modules)이라는 기법이 있다. 

react컴포넌트에 css모듈을 통해 스타일을 적용하는 방법이다.

 

- 외부 스타일 시트를 작성할 떄, .css확장자기 아닌, .module.css확장자를 사용해야 한다.

 

- react컴포넌트 파일에서 임포트 할 때, 임포트된 css모듈의 이름을 명시적으로 지정해준다. (import module_name from "./my/style.module.css";) 이런 방식

 

- 엘리먼트 className 속성을 할당해줄 때, 해당 클래스가 어느css 소속인지 알려준다.

 

import React from "react";
import styles from "./Button.module.css";

function Button() {
  return <button className={styles.btn}>Module</button>;
}

export default Button;

 

요런 방식

 

---

 

Styled Components로 React 컴포넌트 스타일

 

CSS in JS?

 CSS in JS는 스타일 정의를 CSS파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

 

웹페이지를 HTML, CSS, JS 3개로 분리했던 것이 기존의 웹사이트를 개발할 때 기본으로 사용했던 방법입니다. 하지만 React, Vue, Angular와 같은 모던 js라이브러리가 인기를 끌면서 웹 개발의 패러다임이 바뀌고 있다. 최근에는 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있다.

 

따라서, 각 컴포넌트에 html, css, js를 몽땅 때려박는 패턴이 많이 사용된다. React는 jsx를 사용해서 이미 js가 html을 포함하고 있는 형태를 취하고 있는데, 여기에 css-in-js라이브러리만 사용하면 css도 손 쉽게 js에 삽입할 수 있다.

 

 

패키지 설치

Styled Components는 styled-components라는 npm패키지 명을 가지고 있다.

 

npm i styled-components

 

기본 문법

 

- html 태그에 대해서 이미 속성이 정의되어 있기 떄문에 해당 태그명의 속성에 접근한다.

 

import styled from "styled-components";

styled.button`
  // <button> HTML 엘리먼트에 대한 스타일 정의
`;

 

- React 컴포넌트를 스타일링 할 때는 해당 컴포넌트를 임포트 후 해당 인자로 넘기면 된다.

 

import styled from "styled-components";
import Button from "./Button";

styled(Button)`
  // <Button> React 컴포넌트에 스타일 정의
`;

 

고정 스타일링

 

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  background: white;
`;

function Button({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

 

이런 방식으로 사용이 된다.

 

import Button from "./Button";
<Button>Default Button</Button>;

 

이런 방식으로 스타일이 적용된 이 버튼 컴포넌트를 다른 React컴포넌트에서 사용한다면

 

<button class="sc-kgAjT beQCgz">Default Button</button>

 

브라우저에서 개발자도구를 누른 후, 소스를 봐보면 <button>html엘리먼트에 Styled Components가 자동으로 생성해준 클래스 이름이 적용되어 있음을 알 수 있다.

 

 

가변 스타일링( porps 한 개 전달 )

 

Styled Compnents는 React 컴포넌트에 넘어온 porps에 따라 다른 스타일을 적용하는 기능을 제공한다.

Tagged Template Literals을 사용하기 때문에 함수도 문자열 안에 포함시킬 수 있다.

 

import React, { useState } from "react";
import styled from "styled-components";

function Example() {
  const [email, setEmail] = useState("");

  return (
    <ExampleWrap active={email.length}>
      <Button>Hello</Button>
      <NewButton color="blue">Im new Button</NewButton>
    </ExampleWrap>
  );
}

const ExampleWrap = styled.div`
  background: ${({ active }) => {
    if (active) {
      return "white";
    }
    return "#eee";
  }};
  color: black;
`;

const Button = styled.button`
  width: 200px;
  padding: 30px;
`;

// Button 컴포넌트 상속
const NewButton = styled.Button`
  // NewButton 컴포넌트에 color가는 props가 있으면 그 값 사용, 없으면 'red' 사용
  color: ${props => props.color || "red"};
`;

export default Example;

 

- styled-component를 사용하는 장점 중 하나가 변수에 의해 스타일을 바꿀 수 있다는 점이다.

 

- 위 예시를 보면, email이라는 state값에 따라 ExampleWrap에 prop으로 내려준 active라는 값이 true or false로 바뀌게 된다.

 

- styled-component는 내부적으로 props을 받을 수 있고, 그 props에 따라 스타일을 변경할 수 있다.

 

- 해당 파일에서 정의한 css 를 export하여 다른 파일에서 import할 수 있다.

 

 

가변 스타일링 ( props 여러 개 전달 )

 

- prop 에 따라 바꾸고 싶은 css속성이 위와 같이 하나가 아니라 여러 개일 경우가 있다.

 

- 이럴 경우, Styled Components 에서 제공하는 css함수를 사용해서 여러 개의 css속성을 묶어서 정의할 수 있다.

 

- 예를 들어, primary porp이 넘어온 경우, 글자색을 흰색, 배경색과 경계색은 남색으로 변경하고 싶다면 다음과 같이 예제코드를 수정할 수 있다. && 연산자를 사용해서 primary prop이 존재하는 경우에만 css로 정의된 스타일이 적용되도록 하였다.

 

import React from "react";
import styled, { css } from "styled-components";

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  ${(props) =>
    props.primary &&
    css`
      color: white;
      background: navy;
      border-color: navy;
    `}
`;

function Button({ children, ...props }) {
  return <StyledButton {...props}>{children}</StyledButton>;
}

 

- ${(props) => ...} 부분은 props.primary가 true인 경우에 css 코드를 적용시킨다.

 

- Button 컴포넌트는 StyledButton 을 반환하며, 버튼 내용 children과 다른 속성 props을 styledButton에 전달한다. 이렇게 하면 Button컴포넌트를 사용하여 버튼을 생성하고 원하는 속성을 전달할 수 있다.

 

- 참고로 넘겨야할 prop 값이 많아질 경우, 위와 같이 ...props구문을 사용해서 children외에 모든 prop을 간편하게 전달할 수 있다.

 

예제 더 보기 & 속성 더 보기

 

... 생략

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box bgColor={"#574b90"} />
    </Wrapper>
  );
};

 

- BoxOne, BoxTwo 두가지 컴포넌트를 box라는 하나의 컴포넌트로 통합하고 bgColor라는 속성을 통해 각각 배경색을 지정해주었다. 처음의 코드보다 재 사용성이 크게 증가했다는 것을 알 수 있다.

 

위의 Box 컴포넌트와 같은 크기를 가진 Circle 컴포넌트 만들어보기

 

const Circle = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
  border-radius: 50%;
`;

 

- border-radius 속성을 제외하고는 Box컴포넌트와 다를게 없다. Styled Components에서는 이런 코드의 중복을 막기 위해 html의 태그 뿐만 아니라, Styled Components를 통해 만든 컴포넌트도 다시 정의하여 사용할 수 있다.

 

- 차이점이라면 styled(ComponentName)와 같이 컴포넌트 명을 괄호 안에 넣어줘야 한다는 것 하나뿐이다.

 

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

const Circle = styled(Box)`
  border-radius: 50%;
`

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box bgColor={"#574b90"} />
      <Circle bgColor={"black"} />
    </Wrapper>
  );
};

 

이런 방식으로!!

 

as 속성

 

만약, box가 예뻐서 다른 곳에서 버튼으로 사용하고 싶어질 수도 있다.

하지만 box는 div로 정의되어 있고, 원래의 box와 동시에 사용하면서 중복되는 코드도 만들고 싶지 않다면?

 

그럴 때에는 아주 간단하게 컴포넌트 태그에 as속성을 추가해주면 된다.

 

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"} />
      <Box as="button" bgColor={"#574b90"} />
      <Circle bgColor={"black"} />
    </Wrapper>
  );
};

 

이렇게 하고 브라우저에서 요소를 켜보면 div가 button으로 바뀐 것을 확인 할 수 있다.

 

속성 추가

 

required 속성을 가진 input태그가 여러 개 필요한 경우, 각각의 태그마다 required속성을  추가하는 것은 매우 번거롭고 귀찮다. 만약 수정할 일이 생긴다면, 하나씩 변경하는 것은 더더욱 귀찮다.

 

styled Components에서는 html태그의 속성도 지정할 수 있다.

 

const Input = styled.input.attrs({ required:true })`
    background-color: orange;
    margin-right: 5px;
`;

 

 

애니메이션

 

Styled COmponents를 통해 애니메이션을 넣기 위해서 keyframes를 import 해야 한다.

 

import {keyframes} from "styled-components";

 

circle에 색깔이 바뀌는 애니메이션을 추가하면

 

import {keyframes} from "styled-components";

const CircleAnimation = keyframes`
  0% {
    background-color:red;
  }
  33% {
    background-color:green;
  }
  66%
  {
    background-color:blue;
  }
  100% {
    background-color:red;
  }
`;

const Circle = styled(Box)`
  border-radius: 50%;
  animation: ${CircleAnimation} 3s linear infinite;
`;

const App = () => {
  return (
    <Wrapper>
      <Circle bgColor={"red"} />
    </Wrapper>
  );
};

 

여기서 주의! 애니메이션을 컴포넌트보다 먼저 정의해주어야 성공적으로 애니메이션이 적용된다.

순서가 바뀐다면 에러메시지가 뜨니 주의!

 

 

가상 선택자

 

선택자? 

 

말 그대로 선택을 해주는 요소

이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다.

 

 

먼저, 선택자를 알아보기 위해 Box컴포넌트 내에 span태그 하나를 추가해보았다.

 

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;

  display: flex;
  justify-content: center;
  align-items: center;

  span {
    background-color: black;
  }
`;

const App = () => {
  return (
    <Wrapper>
      <Box bgColor={"#cf6a87"}>
        <span>😊</span>
      </Box>
    </Wrapper>
  );
};

 

 

 

 

 

가상 선택자

 

span위에 마우스를 올렸을 때 (hover), 배경 색상을 바꾸기 위한 두가지 방법

 

// 1번 방법
const Box = styled.div`

생략...

span {
  background-color: black;
}
span:hover {
  background-color: white;
}
`;

// 2번 방법
const Box = styled.div`
span {
  background-color: black;
  
  &:hover {
    background-color: white;
  }
}
`;