[React] 프로젝트 공용 컴포넌트 관리 - 한번만 작성하고 import해서 쓰자

▶프로젝트 공용 컴포넌트 관리 - 한번만 작성하고 import해서 쓰자

이번 글에서는 프로젝트에서 공용으로 사용하는 컴포넌트들을 관리하고 사용하는 방법에 대해 알아보도록 하겠습니다.

 

🔎 언제 활용?

---

전역으로 사용하는 컴포넌트의 경우 따로 components 폴더에서 관리하는 게 좋습니다.

왜냐하면 전역으로 사용하는 컴포넌트인데 각 파일에서 필요할 때마다 똑같이 써서 사용하는 것은

중복된 코드를 정말 많이 작성하는 것이 되는데요.

 

주로 버튼이나 input 등이 될텐데요.

 

🔎 폴더 관리

---

저 같은 경우에는 src 바로 하위 폴더로 components 폴더를 생성하고

컴포넌트에 맞게 폴더를 생성하고 컴포넌트와 스타일 파일을 함께 관리하고 있습니다.

폴더 관리

 

🔎 활용해보자

---

이제 전역으로 사용하게 될 버튼 컴포넌트를 작성해 줄겁니다.

그런데 매번 똑같은 모양, 색상, 크기의 버튼을 사용하지는 않을 것입니다.

 

따라서 해당 컴포넌트에게 전달되는 매개변수를 생각하면서 컴포넌트를 작성해주려고 합니다.

→ 전역에서 사용하지만 입맛대로 버튼의 모양이나 색상 등을 변경할 수 있도록 매개변수를 활용

[React] styled-components에서 속성값으로 스타일링 하기

 

 

📄 src/components/Button/Button.js 파일

import * as S from './style';

function Button(props) {
  const { variant, shape, size, children, ...rest } = props;

  return (
    <S.Button variant={variant} shape={shape} size={size} {...rest}>
      {children}
    </S.Button>
  );
}
export default Button;

여기서 children은 해당 태그 안에 있는 자식 엘리먼트들을 의미하는데요.

따라서 해당 컴포넌트를 사용하는 쪽에서 자식 엘리먼트로 text를 작성하게 되면 그 text가 들어가게 됩니다.

아무래도 사용하는 쪽에서 text를 작성하는 것이 가독성 면에서 좋겠습니다.

 

그런데 그 텍스트는 정작 원래 컴포넌트에서 작성되어야 적용이 되기 때문에 위와 같이

실제 text는 사용 컴포넌트 쪽에서 작성을 해주고

children이라는 매개변수로 가져와 해당 컴포넌트에서 작성해 주는 것입니다.

 

그러면 사용 컴포넌트 쪽에서 가독성은 유지되고

실제 컴포넌트에서는 그 값을 가져와 사용할 수도 있고

그렇죠?

 

📄 src/components/Button/style.js 파일

import styled, { css } from 'styled-components';

const variantCSS = {
  // 키값으로 css를 분리
  primary: css`
    background: ${({ theme }) => theme.PALETTE.primary[300]};
    color: ${({ theme }) => theme.PALETTE.fontColor};
  `,
};

const shapeCSS = {
  shape: css`
    border-radiusL 8px;
  `,
  round: css`
    border-radius: 50%;
  `,
};

const sizeCSS = {
  full: css`
    width: 100%;
    aspect-ratio: 8 / 1;
    font-size: ${({ theme }) => theme.FONT_SIZE.medium};
  `,
};

export const Button = styled.button`
  ${({ variant }) => variantCSS[variant]}
  ${({ shape }) => shapeCSS[shape]}
  ${({ size }) => sizeCSS[size]}
  cursor: pointer;
  border: none;
  :hover {
    opacity: 0.8;
  }
`;

위 코드는 좀 길지만 키값으로 css를 한번에 관리할 수 있는 코드를 알아보기 위해 작성해 보았는데요.

이렇게 작성해 두면 파라미터의 값에 따라 css를 한번에 구분하여 사용할 수 있겠습니다.

 

📄 src/pages/Home/components/Form/Signup/Signup.js 파일

import Button from 'components/Button/Button';

function SignupForm() {
  return(
    <div>
      <Button variant={'primary'} size={'full'}>회원가입</Button>
    </div>
  );
}
export default SignupForm;

위와 같이 사용하면 전달한 값에 따라서 전역으로 선언해둔 버튼 컴포넌트이지만 원하는대로 버튼의 모양, 색상 등을 변경할 수 있게 됩니다.