[C/F TIL] 46~47일차 - React Coustom Component

Code States
Front-end boost camp
Today
I
Learned

🍑 46일차 리액트 커스텀 컴포넌트~? + 47일차 과제

---

🍑 CDD

• Component-Driven Development
  
• 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발
• 상향식 개발에 가까움

🍑 CSS in JS 탄생 배경

• CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성 대두
  -- 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야 할 팀원 수도 많아짐
  -- 다양한 디바이스들의 등장으로 더 복잡해진 CSS
• CSS 전처리기(CSS Preprocessor) 등장
• SASS(Syntactically Awosome Style Sheets) : CSS를 만들어주는 언어
  -- 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수 적용
  -- 반복되는 코드를 한 번에 선언으로 여러 곳으로 재사용할 수 있도록... 등
  -- SCSS 코드를 읽어서 전처리한 다음 컴파일 해서 전역 CSS 번들 파일을 만들어주는 전처리기 역할
  -- 하지만... 장점보다 더 많은 문제점 발견
  

🍑 CSS in JS

• CSS도 컴포넌트 영역으로 불러들이기 위해 탄생
• 대표적으로 Sytled-Components : 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴 제공
• CSS 방법론들의 특징, 장단점
  

🍑 Styled-Components

• React 환경에서 사용 가능
• CSS를 컴포넌트화 시킴으로써 CSS 활용 시 여러가지 불편함 해결
  -- class, id 이름 생성 불필요
  -- CSS 파일 안에서 내가 원하는 부분 찾기 힘듦 해결
  -- CSS 파일이 너무 길어져서 파일을 쪼갤 필요 없음
  -- 스타일 속상이 겹치는 것 방지
• CSS in JS 라이브러리를 사용하면 CSS도 쉽게 JavaScript안에 넣어 줄 수 있다.
  -- 즉, HTML, JS, CSS 까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발 가능

🍑 Styled-Components 설치

• 터미널에 다음 명령어 입력

# with npm
$ npm install --save styled-components@latest

# with yarn
$ yarn add styled-components

• 사용할 파일로 불러오기

import styled from "styled-components"

🍑 Styled-Components 문법

✔️ 컴포넌트 만들기

-- Templete Literals 사용 : 따옴표가 아닌 백 틱(`)사용

//Styled Components로 컴포넌트를 만들고
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용하면 됩니다.
  return <BlueButton>Blue Button</BlueButton>;
}

✔️ 컴포넌트 재활용해서 새로운 컴포넌트 만들기

-- 컴포넌트를 선언하고 styled()에 재활용할 컴포넌트 전달 후 추가하고 싶은 스타일 속성 작성

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

//만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있습니다.
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

//재활용한 컴포넌트를 재활용할 수도 있습니다.
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

export default function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      <br />
      <BigRedButton>Big Red Button</BigRedButton>
    </>
  );
}

✔️ Props 활용하기

-- 리터럴 문법 ${} 을 사용하여 js코드 사용
-- props를 받아오려면 props를 인자로 받는 함수를 만들어 사용

• Props로 조건부 렌더링하기
  
  -- 삼항 연산자를 활용해 Button 컴포넌트에 skyblue 라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue를, 없으면 white를 지정

//받아온 prop에 따라 조건부 렌더링이 가능합니다.
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

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

• Props 값으로 렌더링하기
  
  -- props 값을 통째로 활용해 컴포넌트 렌더링에 활용
  -- 똑같이 삼항 연산자를 사용하고 있지만 props.color가 없다면 white를, props.color가 있다면 Props.color의 값을 그대로 가져와서 스타일 속성값으로 리턴

• 삼항연산자 아니어도 가능
  

//받아온 prop 값을 그대로 이용해 렌더링할 수도 있습니다
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있습니다.
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

✔️ 전역 스타일 설정하기

• Styled Components 에서 createGlabalStyle 함수를 불러온다

import { createGlobalStyle } from "styled-components";

• 다음 함수를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일 설정

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

• GlobalStyle 컴포넌트를 최상위 컴포넌트에 사용

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}

• 예제 : Practice버튼 위에 hover효과

import styled from "styled-components";

const Practice = styled.button`
  padding: 1rem;
  font-size: 2rem;
  background: pink;
  transition: 0.5s;

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

export default function App() {
  return <Practice>Practice!</Practice>
}

🍑 Storybook

• 링크 바로가기 : https://storybook.js.org/
• UI 개발(Component Driven Development)을 하기 위한 도구
• 복잡한 개발 스택을 시작하거나 특정 데이터를 데이터베이스로 강제 이동할 필요 없이 전체 UI 한눈에 보고 개발 가능
• 버그를 사전에 방지할 수 있도록 도와줌
• 테스트 및 개발 속도 향상
• Storybook 지원 주요 기능
  -- UI 컴포넌트들을 카탈로그화하기
  -- 컴포넌트 변화를 Stories로 저장하기
  -- 핫 모듈 재 로딩과 같은 개발 툴 경험 제공하기
  -- 리액트를 포함한 다양한 뷰 레이어 지원하기

🍑 46~47일차 수업을 마치며...

오늘 페어분과의 수업으로 아직 감을 잡을 수가 없었던 리액트에 대해 탁~! 감을 잡아볼 수 있었다. 페어 프로그래밍은 아직 다 구현하지 못해서 오늘 복습하고 css 기능 더 넣어볼 예정~