4.18 [React Custom Component ]

Lee·2023년 4월 18일
0

오.배.이.안& 회고

목록 보기
35/46
post-thumbnail

오배이안 🪙


Component Driven Development (CDD)

CDD 란?

컴포넌트 주도 개발이란 용어로 컴포넌트기반으로 개발을 하는 것으로,
기본적인 컴포넌트 단위부터 개발을 통해 재사용할 수 있는 UI 컴포넌트 를 만들어 레고를 조립하는 것과 같이 상향식으로 컴포넌트들을 조합해 하나의 웹을 구성하는 개발 방식을 말한다.


CSS 방법론

기술이 발전함에 CSS를 구조화시킬려는 시도들이 다양해 졌다.
대표적인 방법론들의 특징과 장단점이 정리가 잘 되어 있어 가져왔다.


React로 CDD 를 할 수 있게 도와주는 대표적인 개발도구 Styled-Component 와 Storybook


Styled-Component

CSS를 컴포넌트화 시켜 React 환경에서도 사용할 수 있게 해주는 라이브러리.
즉, React 에서 HTML+JavaScript + CSS 를 다 컨트롤 할 수 있도록 도와주는 라이브러리다!

Styled Components는 CSS in JS(자바스크립트로 CSS도 컨트롤하자!) 라는 개념이 대두되면서 나온 개발도구입니다. 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념입니다.


Styled-Component 사용 시 장단점

장점

  • CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일링 가능

  • 하나의 컴포넌트에서 작성한 스타일드 컴포넌트는 다른 JS 파일로 오염(중복적용) 되지 않는다.
    원래 CSS 파일의 경우 개발을 다 끝내고 빌드를 하면서 하나의 파일로 합쳐지는 작업을 하기 때문에 원치 않게 스타일이 겹칠 수 가 있다.

  • 페이지 로딩시간이 단축된다.

단점

  • JS 파일이 매우 복잡해진다. 스타일드 컴포넌트도 하나의 컴포넌트이기 때문에 ,,,

  • 다른 컴포넌트에서도 필요한 컴포넌트라면 export import 하면 된다. 근데 그렇게 되면 그냥 CSS 파일이랑 다를 바가 없다.

  • 협업시에 CSS 담당의 숙련도 이슈가 생길 수 있다. 워낙 많은 CSS 방법론들이 많아서,,, 그 중 하나가 스타일드 컴포넌트이기도 하다.


설치

React 파일 내부에서 터미널에 아래와 같이 입력

npm install --save styled-components

설치하고 난 후 package.json 에 아래의 코드를 추가하게 되면 여러버전의 style-component 가 설치되어 발생하는 문제를 줄여준다.

"resolutions": {
    "styled-components": "^5"
  }

이후 CSS를 사용할 컴포넌트에서 상단에 아래의 코드 입력 후 사용

import styled from "styled-components"

Styled Components 문법

CSS를 컴포넌트화 시켜 사용하기 때문에 컴포넌트부터 만들어야 한다.

const 컴포넌트명 = styled.태그종류`
  css속성1 : 속성값;
  css속성2 : 속성값;  
  `

버튼 CSS 컴포넌트 만들어보기  
  
const Redbutton  = styled.button`
  background : red;
  color : white;
  ` 

styled.태그종류를 할당 하고 해당 태그에 원하는 속성을 집어 넣기 위해선 백틱(``)기호를 사용해서 그 안에 속성들을 집어 넣어야한다.

import styled from 'styled-components';
import './App.css';

const Redbutton = styled.button`
background-color:Red;
color: white;
`


function App() {
return (
  <div className="App">
   <Redbutton>Redbutton</Redbutton>
  </div>
);
}

export default App;

이후 해당 CSS 컴포넌트를 사용하기 위해선 사용할 컴포넌트(App) 내부의 return 문 안에 해당 컴포넌트를 작성해준다. 이후 npm start 를 입력해 열어보면

속성으로 넣어준 값들이 들어 있는 버튼이 나올 것이다!

만약 hover 와 같은 가상 클래스를 사용하고 싶은 경우엔,

const Button = styled.button`

&:hover {
  background: cornflowerblue;
  color: white;
}
`;

&: hover 를 작성하면 가상 클래스시 원하는 속성을 정할 수 있다.!


Redbutton 컴포넌트를 재활용해 새로운 컴포넌트도 만들 수 있다.

const RedButton  = styled.button`
background : red;
color : white;
`  
//RedButton에 padding을 준 컴포넌트 
const BigRedButton = styled(RedButton)`
padding : 100px; 
`

새로운 컴포넌트를 만들고 styled 뒤에 .태그명이 아닌 재사용할 컴포넌트(재사용할거임)을 넣어줘야한다.

const 새로운컴포넌트명 = styled(재사용할컴포넌트)`
 속성 : 값;
 `

Props로 활용하기

Styled Component로 만든 CSS 컴포넌트도 리액트 컴포넌트처럼 props로 값을 전달 받을 수 있다.

해당CSS가 사용될 컴포넌트가 부모 컴포넌트 일 것이고 CSS 컴포넌트가 자식 컴포넌트로 props 를 통햇 데이터를 전달 받는다. 이때 전달 받는 데이터에 따라 여러 형태의 CSS 스타일을 줄 수 있다.

mport styled from 'styled-components';
import './App.css';

// 빨간색 작은 버튼
const Redbutton = styled.button`
background-color:Red;
color: white;
`
// 빨간색 작은 버튼을 재사용한 빨간색 큰 버튼
const BigRedButton = styled(Redbutton)`
padding : 100px; 
`
// props를 가진 컴포넌트 
const Button1 = styled.button`
background-color: ${(props)=>(props.color? props.color:"white")}
`
 
function App() {
 return (
   <div className="App">
   <Redbutton>Redbutton</Redbutton>
   <BigRedButton>BigRedbutton</BigRedButton>
     
     // props로 값 전달해서 배경색을 변경시켜주기 
   <Button1 color="yellow">버튼1</Button1>
     <Button1 >버튼1</Button1>
   </div>
 );
}

export default App;

Button1이라는 컴포넌트 내부에는 props 가 존재한다.
props 값을 보면 삼항조건 연산자로 color라는 값이 들어오면 그 값을 배경색으로 지정하고 color 값이 없으면 하얀색으로 배경을 지정했다.

상위 컴포넌트인 App()컴포넌트 내부에 있는 Button1 컴포넌트를 보면 props로 전달해주는 값인 color="yellow" 가 있는걸 볼 수 있다.

이를 통해 Button1 컴포넌트의 배경색은 노란색이 되는 것이다.!
만약 color 자체를 전달해 주지 않게 되면 그냥 하얀색 버튼1이 보일 것이다.

이처럼 CSS 컴포넌트도 props를 통해 데이터(값)을 전달해줄 수 있다.!


전역 스타일 설정

전역에 스타일을 설정하고 싶을 경우 상단에 아래의 코드 추가

import { createGlobalStyle } from "styled-components";

아래의 컴포넌트로 전역 스타일 작성

const GlobalStyle = createGlobalStyle`
	button {
		padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}`
  

원하는 컴포넌트에서 return 문의 최상위에 작성!

function App() {
	return (
		<>
		    //최상위에 전역CSS 컴포넌트 작성
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}

Storybook

Storybook이란?
React에서 CDD를 하기 위한 도구이고 컴포넌트를 문서화 및 시각화 할 수 있다.

Storybook을 사용하는 이유?

Storybook을 사용하게 되면 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있기 때문에 사용


설치

React 프로젝트를 만들고 터미널에 아래의 명령어 입력!

npx storybook init

설치가 다끝나면.storybook 폴더와 stories폴더가 생성될 것이다.

이후 아래의 명령어를 입력하면 리액트처럼 하나의 패이지가 로딩된다.

npm run storybook 

사진 출처 : 코드스테이츠

0개의 댓글