[React] Custom Component

Chapter1. Component Driven Development
1.Component Driven Development(CDD)의 필요성과 이점에 대해서 이해한다.
2.구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
3.CSS 방법론들의 특징과 장단점을 이해한다.
Chapter2. CDD 개발 도구
4.Styled Components의 기본 사용법을 익힌다.
5.HTML과 CSS로 작성된 요소를 Styled Components 컴포넌트로 바꿀 수 있다.
6.UI 개발 도구의 필요성을 이해한다.
7.Storybook의 기본 사용법을 익힌다.
Chapter3. useRef
8.useRef 의 필요성에대해 이해한다.
9.useRef 가 필요한 상황들을 기억한다.
10.useRef 의 사용법을 이해한다.

1.Component Driven Development(CDD)는 리액트의 컴포넌트를 이용하는 것과 유사한 상황에서 고안됬다고 생각하는데 기능적인 부분뿐만 아니라 내부 디자인까지도 연동시켜 말 그대로 하나의 컴포넌트가 즉각적인 하나의 부품이 될 수 있는 좋은 시스템이라고 생각한다. 이 특정 CDD들을 얼마나 가지고 있냐에 따라서 그 브랜드의 다른 기능들을 확장해 나갈 때 중복되는 부분들을 빠르게 해결할 수 있어 새로운 사이즈에 들어갈 페이지를 만든다고 해도 일정 비율대로 키우거나 조절하는등의 작은 노력으로 문제를 해결할 수 있을 것 같다.

2.시작은 누구나 아는 CSS에서 SASS -> BEM -> CSS Modules -> Styled Components로 점차 발전해나갔는데 CSS의 구조적인 패턴이 없다는 단점을 해결하기 위해서 CSS전처리기 라는 개념이 등장하고 대표적인 것이 SASS다. 특정 설정들을 변수로 지정해 불러오는 방식으로 일을 단축할 수 있다. 하지만 컴파일된 CSS의 용량이 너무 커지게 되자 새로운 CSS방법론이 대두되었지만 공통적인 방향성은 코드의 재사용, 코드의 간결화, 코드의 확장성, 코드의 예측성등을 가지고 있다. BEM은 일관성을 위해 클래스명을 길게 작성하다보니 선택자가 장황해지고 캡슐화의 개념이 사라진다는 단점이 있어 다시 새로운 방식을 찾았는데 거기서 등장한 것이 JS기준으로는 Styled-Component가 있다. 주 기능으로는 기능 또는 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공한다.

3.CSS, SASS, BEM, Styled-Component 의 특징 및 장단점은 아래와 같다.
 CSS- 기본적인 스타일링 방법 / 비교대상들이 CSS를 기반으로 발전했기 때문에 장점이 없다 / 일관된 패턴을 가지기 힘들고 !important를 남용
 SASS- CSS전처리기 / 변수,함수,상속 개념을 활용해 재사용이 가능하며 CSS의 구조화가 가능 / 전처리 과정이 필요하고 디버깅이 어려우며 CSS파일의 거대화
 BEM- 클래스명에 패턴을 부여하는 방법론 / 네이밍으로 가독성, 일관성을 가져 문제가 해결되며 전처리가 필요없음 / 이름이 장황하고 클래스 목록이 너무 많아짐
 Styled-Component- 컴포넌트 기반으로 CSS를 사용하게 하는 라이브러리 / 네이밍, 최적화, 캡슐화를 신경쓸 필요 없이 편하게 사용가능 / JS에 붙어있기 때문에 페이지 로딩에 불리함

4.npm install --save styled-components로 설치한 후 package.json에 {"resolutions": {"styled-components": "^5"}}를 추가한 후 styled를 import하면 된다.(import styled from "styled-components")
전역 설정은 import { createGlobalStyle } from "styled-components";를 통해 createGlobalStyle를 가져온 후 CSS를 작성하듯 작성할 수 있다. 또한 이 부분을 컴포넌트로 만든 후 수입해서 사용하는 방식도 가능하다.

기능은 원하는 컴포넌트 명을 선언한 후 styled.기능`CSS`순서로 적용하며 내부 css의 줄바꿈 구분은 ;를 이용한다. 예를 들면 const BlueButton = styled.button``과 같다.

또한 위에서 선언했던 컴포넌트 BlueButton을 다시 호출해 그 값을 변경하는 방식도 가능하며 중복된 값들이 적용될 경우 제일 최신에 들어간 내용이 기존 내용을 덮어씌운다.
const RedButton = styled(BlueButton)`
  background-color: red;
`;

props를 이용하는 방식을 통해 삼항연산자로 같은 기능을 다르게 구현할 수도 있다.
const Button = styled.button`background: ${(props) => (props.skyblue ? "skyblue" : "white")};`;
    <Button1>Button1</Button1>           //props가 없어 하얀색 버튼
    <Button1 skyblue>Button1</Button1>   //props를 통해 skyblue색 적용

마지막으로 porps를 그대로 이용하는 방식도 있다.
background: ${(props) => (props.color ? props.color : "white")};
background: ${(props) => props.color || "white"};

5.가능하다.(커리큘럼 실습 완료)

6.개발도구를 이용해서 개발을 하는 편이 더 좋다는 정도는 이해하겠지만 아직 과제를 풀지 않아서인지 직접적으로 필요성을 느끼지는 못했다.

7.npx storybook init를 이용해 설치를 한 후 npm run storybook로 실행할 수 있다.

8,9.focus, text-selection, media-playback, 애니메이션 적용, d3.js/greensock 등 DOM기반 라이브러리 활용 같은 예외적인 상황에서 useRef로  DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

10.아래와 같은 방식으로 useRef를 사용할 수 있다.
간단하게 요약하자면 버튼을 클릭하면 input창 내부로 focus가 이동되서 바로 무언가를 입력할 수 있게 한다.
function TextInputWithFocusButton() {
  const nowRef = useRef(null);   //nowRef라는 변수를 선언하고 useRef를 할당한다.
  const onButtonClick = () => {  //클릭시에
    nowRef.current.focus();      //nowRef로 포커스를 바꿔준다.
  };
  return (
    <>
      <input ref={nowRef} type="text" /> 
      <button onClick={onButtonClick}>Focus the input</button> //말 그대로 집중!
    </>);
}

 

뭔가 새로운 기능이 많이 있는데 내일 과제만 7시간이라 많은 연습이 될 것 같다..