[S3U3]React Custom Component

📖CDD

• Component Driven Development (CDD)
• 부품 단위로 UI 컴포넌트를 만들어 가는 개발
• 컴포넌트 재사용하기 유용하다.
• 상향식 개발에 가깝다.

📖CSS 방법론

프로젝트의 규모가 커지지고 같이 작업하는 팀원 수도 많아지면서 CSS는 더 복잡해지게 되었다. CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 커졌다.

📖CDD 개발 도구 개요

🏷️Styled Components

• CSS를 컴포넌트화 시켜주는 React 라이브러리이다.
• 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. import하기
   import styled from "styled-components"

Styled Components 문법

1. 컴포넌트 만들기
   컴포넌트 선언 후 styled.태그종류를 할당하고 백틱 사이에 CSS 작성하듯 작성해 준다. 만들어진 컴포넌트는 일반 컴포넌트 사용하듯 <컴포넌트명></컴포넌트명>으로 사용하면된다.

const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  return <BlueButton>Blue Button</BlueButton>;
}

2. 컴포넌트 재활용하기
   이미 만들어진 컴포넌트를 재활용해서 새로운 컴포넌트를 만들 수도 있다.
   컴포넌트를 선언하고 styled() 에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성한다.
   중복 재활용도 가능하다.

const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;
// 재재활용
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

3. props활용하기
   
   자바스크립트 문법 사용이 가능하므로 조건부로 렌더링을 작성 할 수도 있다.

   const Button1 = styled.button`
     background: ${(props) => (props.skyblue ? "skyblue" : "white")};
   `;
   
   export default function App() {
     return (
       <>
         <GlobalStyle />
         <Button1>Button1</Button1>
         <Button1 skyblue>Button1</Button1>
       </>
     );
   }

4. 전역 스타일 설정하기
   1. Styled Components에서 createGlobalStyle 함수를 import하기

   2. createGlobalStyle를 사용해 CSS파일 작성하기
   3. 만들러진 GlobalStyle 컴포넌트를 최상위 컴포넌트에 위치시키기

   import { createGlobalStyle } from "styled-components";
   
   const GlobalStyle = createGlobalStyle`
       button {
           padding : 5px;
       margin : 2px;
       border-radius : 5px;
       }
   `
   
   function App() {
       return (
           <>
               <GlobalStyle />
               <Button>전역 스타일 적용하기</Button>
           </>
       );
   }

   🏷️Storybook

• 컴포넌트 탐색기

• 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.

• 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다.

  Storybook 설치하기

1. npx create-react-app storybook-practice

2. npx storybook init

3. npm run storybook

   Storybook 작성하기

4. 컴포넌트를 작성할 파일 만들기 ex)Title.js

5. 파일명.stories.js 파일 만들기 ex)Title.stories.js
   /.storybook 안에 있는 Storybook 설정 파일에 의해서 컴포넌트 파일과 똑같은 파일 이름에 .stories를 붙여 파일을 만들면 알아서 스토리로 인식한다.