React.js Styled component - 리액트 스타일드 컴포넌트

Styled Components

---

https://styled-components.com/

styled-components

 

React에서 UI를 만들다 보면 스타일링 때문에 고민하는 경우가 많으실 거예요.

CSS 파일은 따로, JavaScript 코드는 따로... 서로 다른 파일들을 왔다 갔다 하면서 작업하다 보면 헷갈리기도 하고, 혹시 모르게 다른 곳의 스타일과 겹쳐서 원치 않는 결과가 나올까 봐 걱정되셨죠?
이런 고민을 한방에 해결해 주는 마법 같은 도구가 바로 스타일드 컴포넌트입니다!

 

또한, 스타일드 컴포넌트는 컴포넌트에 스타일을 적용하는 기술입니다.

컴포넌트에 디자인코드까지 넣으려면 코드가 많아지는 경우가 있습니다.

또한 제이에스 문법에 맞게 까멜사인으로 변경해야 합니다.

이 때 스컴을 사용하면 코드가 훨씬 간결해 집니다.

즉, 빽틱 안에서 CSS를 그대로 사용할 수 있습니다.

---

예를 들어 보겠습니다.

const ReactButton = (props) => {
  const style = {
    color: "white",
    backgroundColor: "purple",
  };
  return <button style={style}>{props.children}</button>;
};

 

JS 타입의 스타일

import styled from "styled-components";
const StyleButton = styled.button`
  color: white;
  background-color: purple;
`;

 

스타일드컴포넌트 스타일 적용

 

프롭스가 필요 없습니다.

카멜사인 안쓰고 css 문법을 그대로 씁니다.

빽틱이 몇가지 코드를 줄여 줍니다.

스타일을 컴포넌트와 따로 관리할 수 있습니다.

---

핵심은 이것입니다:

---

CSS를 JavaScript 안에 바로 작성!: 

더 이상 별도의 CSS 파일을 만들 필요가 없습니다. 

여러분이 평소에 아는 CSS 코드를 JavaScript 파일, 즉 React 컴포넌트를 만드는 파일 안에 그대로 작성합니다.

---

CSS가 곧 React 컴포넌트!: 

스타일드 컴포넌트를 사용하면 여러분이 작성한 CSS 스타일 블록 자체가 재사용 가능한 React 컴포넌트가 됩니다. 

<div>나 <button>처럼 일반 HTML 태그를 사용하듯이, 직접 스타일을 입힌 컴포넌트를 만들어서 사용할 수 있는 거죠.

---

---

왜 스타일드 컴포넌트가 중요할까요? (장점)

스타일 충돌 걱정 끝!: 

각 컴포넌트의 스타일은 독립적으로 작동해서 다른 곳에 영향을 주지 않습니다. 

마치 '나만의 CSS' 공간을 가진 것처럼 안전하게 스타일을 입힐 수 있어요.

---

코드 관리의 편리함: 

컴포넌트의 로직과 스타일이 한 곳에 모여 있으니, 코드를 읽거나 수정할 때 훨씬 찾기 쉽고 직관적입니다.

 

Props를 이용한 동적 스타일링: 

React의 Props를 이용해서 조건에 따라 스타일을 쉽게 변경할 수 있습니다. 

예를 들어, primary라는 Props를 넘기면 버튼 색깔이 파란색으로 바뀌는 식으로요.

 

---

간단한 예시 (한눈에 보기)

import styled from 'styled-components'; // 스타일드 컴포넌트 라이브러리 불러오기

// styled.button`...`으로 버튼 컴포넌트에 스타일 입히기
const StyledButton = styled.button`
  background-color: blue; /* 배경색은 파랑 */
  color: white;           /* 글자색은 흰색 */
  padding: 10px 20px;     /* 여백 주기 */
  border-radius: 5px;     /* 모서리 둥글게 */
  border: none;
  cursor: pointer;

  // 마우스가 올라갔을 때(hover) 배경색 바꾸기
  &:hover {
    background-color: darkblue;
  }
`;

// 실제 React 컴포넌트처럼 사용하기
function App() {
  return (
    <div>
      <StyledButton>클릭하세요!</StyledButton> {/* 나만의 스타일 버튼! */}
    </div>
  );
}

jsx

 

어떠세요?

스타일드 컴포넌트의 매력이 느껴지시나요?  

마치 CSS와 JavaScript가 멋지게 협업하는 느낌이죠!

이걸로 복잡한 UI도 깔끔하게 스타일링할 수 있게 될 겁니다.

---

 

설치하기

 

npm install styled-components

 

스타일드 컴포넌트 설치

---