[React] css에 대해 알아보자 [styled component]

목차

 

이전 바닐라 css편 참고

https://be-senior-developer.tistory.com/125

React 스타일링에 대해 알아보자 [바닐라 css]

 

 

React에서는 css 스타일링의 방법이 여러가지가 있다.

그 중에서 styled component에 대해서 알아보자

 

 

기본적인 사용법

import styled from "styled-components";

const MessageWrapper = styled.div`
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  color: purple;
`;

function Lecture4() {
  return (
    <MessageWrapper>
      <div>hello</div>
      <div>huaksu</div>
    </MessageWrapper>
  );
}

export default Lecture4;

 

동적인 스타일링 방법

import styled from "styled-components";

const MessageWrapper = styled.div`
  display: flex;
  flex-direction: row;
  gap: 0.5rem;

  color: ${(props) => (props.color ? "red" : "blue")};
  background-color: ${({ highlight }) => (highlight ? "yellow" : "white")};
`;

function Lecture4() {
  return (
    <MessageWrapper color={false} highlight={true}>
      <div>hello</div>
      <div>huaksu</div>
    </MessageWrapper>
  );
}

export default Lecture4;

 

&를 통해 자식요소에 적용하고 미디어 쿼리도 활용하는 모습

import styled from "styled-components";

const MessageWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: ${(props) => (props.color ? "red" : "blue")};
  background-color: ${({ highlight }) => (highlight ? "yellow" : "white")};
  
  //이 styling요소 안 어느 이미지 요소든 영향을 미친다
  & img {
    width: 10rem;
    height: 10rem;
  }
  @media (min-width: 300px) {
    margin-bottom: 4rem;

    &h1 {
      font-size: 17rem;
    }
  }
`;

function Lecture4() {
  return (
    <MessageWrapper color={false} highlight={true}>
      <h1>title</h1>
      <img src="..." alt="..." />
      <div>hello</div>
      <div>huaksu</div>
    </MessageWrapper>
  );
}

export default Lecture4;

 

재사용 컴포넌트 생성과 컴포넌트 조합해서 활용하기

 

재사용 컴포넌트들을 만든 모습 (스프레드 연산자 활용)

//button component styling
import styled from "styled-components";

export const StyledButton = styled.button`
  border-radius: 10px;
  color: ${({ color }) => (color ? "red" : "blue")};
  width: 3rem;
  height: 1.5rem;
  border: 1px solid gray;
`;

//input component styling
import styled from "styled-components";

export const StyledInput = styled.input`
  border-radius: 2px;
  border: 1px solid gray;
  width: 5rem;
  height: 1.5rem;
`;

//form component styling
import { StyledButton } from "./Button";
import { StyledInput } from "./Input";
import styled from "styled-components";
const StyledDiv = styled.div`
  display: flex;
  flex-direction: column;
  gap: 10%;

  align-items: center;
`;

//스프레드 연산자로 남은 속성들이 input에 들어간다.
export function Form({ color, label, ...props }) {
  return (
    <StyledDiv>
      <StyledButton color={true}>{label}</StyledButton>
      <StyledInput {...props}></StyledInput>
    </StyledDiv>
  );
}

 

재사용 컴포넌트를 활용한 모습 

import { useState } from "react";
import { Form } from "./StyledComponent/Form";

function Lecture5() {
  const [message, setMessage] = useState("");
  return (
    <Form label={message} onChange={(e) => setMessage(e.target.value)}></Form>
  );
}

export default Lecture5;