코딩공부/T.I.L

2022-02-14 컴포넌트 디자인 방법론 성취목표

지구야 사랑해 2022. 2. 14. 10:07

Read Me

소요시간 : 1 min
 

이전 유닛들에서 React Twittler 등 여러가지 React App을 만들어보며 프론트엔드 개발에 익숙해지셨나요? 이번 유닛에서는 React로 프론트엔드를 구축할 때, 보다 구조적으로 코드를 작성하는 방법에 대해 배워보겠습니다.

아래 Achievement Goals를 기준으로 삼아 학습하시기 바랍니다.

Before You Learn

  • JSX 문법의 개념에 대해 이해하고 활용할 수 있다.
  • Component의 개념에 대해 이해하고 작성할 수 있다.
  • State & Props의 개념과 차이에 대해 이해하고 상황에 맞게 적용할 수 있다.
  • React Effect Hook에 대해 이해하고 활용할 수 있다.
  • Lifting State up의 개념을 이해하고 있다.

Achievement Goals

  • 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
  • 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.
  • 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
  • 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.
  • DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.