[Codestates] 2021. 7. 6 ~ 7

[React] 컴포넌트 디자인 2

• 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
  컴포넌트를 만들고 레고처럼 서로 조합하며 개발하는 방식을 말한다.
• 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.
  UI 컴포넌트 개발 도구. UI 컴포넌트를 쉽게 테스트 할 수 있도록 돕는다.
• 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
  프로젝트의 규모와 복잡도가 증가하고 다양한 디바이스가 생겨나면서 구조적인 css 작성이 필요해졌다.
CSS 전처리기 : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구.
CSS 방법론 : 대표적으로 BEM. Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법
CSS-in-JS : Styled-Component. 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다.
• 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.

    const Button = styled.a`
     display: inline-block;
     border-radius: 3px;
     padding: 0.5rem 0;
     margin: 0.5rem 1rem;
     width: 11rem;
   `;

• DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.

   const 변수 = useRef(null);

   ... 생략
   
   return (
   <input ref={inputEl} type="text" />
   )
   
   등으로 사용 가능