[React]Custom Component

CDD(Component Driven Development)이란 무엇인가?

• CDD란 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 의미한다.
• UI 컴포넌트를 재활용할 수 있다.
• 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발

CSS in JS

• 기술의 발달로 사용자들은 다양한 디바이스(환경)에서 인터넷을 이용하기 시작했다. 이에 따라 CSS또한 복잡해지기 시작했으며, 따라서 CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었다.

• CSS의 진화과정

  CSS - SASS - BEM - CSS Modules - Styled Components

  이러한 방법론들에서도 문제점(장황한 클래스명 선택자, 불필요하게 큰 마크업 등)이 발생하기 시작했다.
  결국 CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생해서 이 문제를 정확하게 해결결하게 되는데, 대표적으로 Styled-Component가 있다.

Styled Components

Styled Components는 CSS를 작성할 때 생기는 불편함(네이밍에 대한 고민, 너무 긴 파일, 겹쳐버리는 스타일 속성 등)을 CSS를 컴포넌트화 시켜서 해결해주는 라이브러리이다. CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게된다.

Styled Components 설치하기

1. 터미널에 명령어를 입력해 라이브러리를 설치 가능

   $ npm install --save styled-components

2. package.json에 다음 코드를 추가(권장사항. 근데 그냥 추가하자.)

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

3. Styled Components를 사용할 파일로 import

   import styled from "styled-components"

Styled Components 문법

컴포넌트 제작

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

이를 작성해보자면

const ExampleButton = styled.button`
	color: white;
    background-color: black;
`

• ES6의 Templete Literals 문법을 사용(백틱 사용)

import styled from "styled-components";

const ExampleButton = styled.button`
	color: white;
    background-color: black;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용
  return <ExampleButton>버튼임</ExampleButton>;
}

• 이벤트 적용

const 컴포넌트 이름 = styled.태그종류`
	&:이벤트{
    이벤트에 적용할 css속성1: 속성값;
    이벤트에 적용할 css속성2: 속성값;
    }
`;

컴포넌트 재활용해서 새로운 컴포넌트 제작

 const 컴포넌트 이름 = styled(재활용할 컴포넌트)`
	추가할 css속성1: 속성값;
    추가할 css속성2: 속성값;
`;

컴포넌트를 재활용하면 재활용할 컴포넌트의 속성을 그대로 물려받는다.

const ExampleButton2 = styled(ExampleButton)`
	width: 400px;
`

재활용한 컴포넌트를 재활용할 수 있다.

import styled from "styled-components";

const ExampleButton = styled.button`
	color: white;
    background-color: black;
`

//만들어진 컴포넌트를 재활용해 컴포넌트를 제작
const ExampleButton2 = styled(ExampleButton)`
	width: 400px;
`
//재활용한 컴포넌트를 다시 재활용
const RedExampleButton2 = styled(ExampleButton2)`
  background-color: red;
`;

export default function App() {
  return (
    <>
      <ExampleButton>Example Button</ExampleButton>
      <br />
      <ExampleButton2>ExampleButton2</ExampleButton2>
      <br />
      <RedExampleButton2>RedExampleButton2</RedExampleButton2>
      <br />
    </>
  );
}

Props 활용하기

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 활용 가능

 const 컴포넌트 이름 = styled.태그종류`
	css속성: ${(props) => 함수코드}
`;

1. props를 이용한 조건부 렌더링

 const ExampleButton = styled.button`
	background-color: ${(props)=> props.red?"red":"white"}
    `

삼항연산자를 활용해 ExampleButton에 red라는 props가 있으면 이를 배경색으로 하고, 없으면 흰색으로 배경색을 한다.

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

const ExampleButton = styled.button`
  background-color: ${(props) => (props.red ? "red" : "white")};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <ExampleButton>Button1</ExampleButton>
      <ExampleButton red>Button1</ExampleButton>
    </>
  );
}

2. Props 값으로 렌더링

• props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용가능하다.

 const ExampleButton = styled.button`
  background-color: ${(props) => (props.color ? props.color : "white")};
`;
<ExampleButton color='lightgreen'>Button1</ExampleButton>

• 반드시 삼항연산자를 사용해야 하는 것은 아님. JS코드라면 무엇이든 활용 가능함.

 const ExampleButton = styled.button`
  background-color: ${(props) => props.color || "white")};
`;
<ExampleButton color='lightgreen'>Button1</ExampleButton>

전역 스타일 설정하기

전역 스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 import 해줌

import { createGlobalStyle } from "styled-components";

전역으로 지정하고 싶은 스타일을 작성

const Global = createGlobalStyle`
	button {
	background-color: red
    margin : 2px;
    border-radius : 5px;
	}
`

이 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 적용됨

function App() {
	return (
		<>
			<Global />
			<Button>전역 스타일임 ㅇㅇ</Button>
		</>
	);
}