[React] 컴포넌트에 styled-components 로 스타일 적용하기

개인프로젝트로 열심히 기능 구현을 하고 styled-component를 처음 활용해보려는데.. 시작부터 난관에 막혔다 🥹

일반적인 div 태그 등에는 잘 적용이되는데 내가 만든 컴포넌트에는 아무리 시도해도 적용이 안됐다

겨우겨우 해결하고 원인을 좀 더 알아봤다

 

** 튜터님께 여쭤보니 globalStyle을 제외하고는 따로 분리를 잘 하지 않는다고 한다! jsx 파일에서 필요한 곳에서 styled component 생성해서 사용해주면 된다

 

기존 코드

지금 스타일을 적용하려는 컴포넌트는 NavButton이고 이 컴포넌트는 button을 감싸는 Button에 추가 기능이 적용된 컴포넌트다

// Home.styles.js
import styled from "styled-components";
import NavButton from "../components/Button/NavButton";

export const NavButtonToDex = styled(NavButton) 
  width: 100px;
   height: 80px; 
; 

// Home.jsx
import { LogoImg, NavButtonToDex } from "../styles/Home.styles";

const Home = () => {
  return (
    <CenterAlignBox $gap={50}>
      <LogoImg src={logo} />
      <NavButtonToDex page={"Dex"}>포켓몬 도감으로 이동</NavButtonToDex>
    </CenterAlignBox>
  );
};

// NavButton.jsx
import { useNavigate } from "react-router-dom";
import { getPath } from "../../shared/Router.jsx";
import Button from "./Button.jsx";

const NavButton = ({ page, children }) => {
  const navigate = useNavigate();
  const navHandler = (page) => {
    const path = getPath(page);
    navigate(path);
  };

  return (
    <Button
      onClick={(e) => {
        navHandler(page);
      }}
    >
      {children}
    </Button>
  );
};

// Button.jsx
const Button = ({ onClick, children, ...props }) => {
  return (
    <button onClick={onClick} {...props}>
      {children}
    </button>
  );
};

 

기능에는 전혀 문제도 없고 에러나 경고도 안떠서 더 해결이 어려웠다..

한참 구글링을 하고 헤매다가 개발자 도구로 브라우저에 렌더링된 버튼을 보니 아무 스타일이 적용되지 않고 있었고, Home.jsx에서 NavButton에 인라인 방식으로 스타일을 적용해봤는데 아예 적용이되질 않았다.

 

 

수정

다른 부분은 더 수정한 것이 없고 NavButton.jsx에서 전달받은 props를 모두 Button으로 전송하도록 수정했다.

(Button에서도 button으로 나머지 props를 모두 전달해줘야하는데 이 부분은 이미 설정돼있었다.)

const NavButton = ({ page, children, ...rest }) => {
  const navigate = useNavigate();
  const navHandler = (page) => {
    const path = getPath(page);
    navigate(path);
  };

  return (
    <Button
      onClick={(e) => {
        navHandler(page);
      }}
      {...rest}
    >
      {children}
    </Button>
  );
};

 

 

원인

1. 내가 따로 만든 컴포넌트인 NavButton, Button은 실제로 브라우저에서 렌더링되는 HTML 요소가 아니다!!!

jsx 문법으로 HTML 요소처럼 편하게 사용하고 있지만, 하위의 HTML 요소들을 렌더링하기 위한 함수다.

(<NavButton/>은 NavButton() 과 같은 동작이라고 한다)

 

2. React는 컴포넌트에 전달된 props들을 자동으로 HTML 태그의 요소로 변환해주지 않는다. props를 어떻게 활용할지는 개발자가 직접 설정해줘야 한다.

 

3. styled-component는 스타일을 적용할 원본 컴포넌트를 렌더링하면서 작성된 스타일들을 props로 전달한다.

 

작동되지 않은 이유를 정리해보면

1. 나는 NavButton으로 style 속성으로 적용하고싶은 props들을 전달하고 있었지만, 그걸 받아서 사용하지 않았음

2. NavButton은 실제로 브라우저에 렌더링되는 요소가 아니다. NavButton에 style을 적용해봤자 소용없다. 실제 HTML 요소인 태그까지 이 속성들을 전달하기위해 나머지 속성들을 모두 props로 전달해주는 방식을 활용해야 한다!!