[Hanaro] 23일차 / React 시작하기

React 시작하기

• React Concept
  • virtual-dom
    • from Fibers
      • Tree & Scheduler Alogirithm
    • renderer
      • 랜더링 담당
    • reconciler
      • DOM의 변경 관리 (비동기)
  • ReactDOM
    • render the REactElements
    • createElement(tag, attr, …children);
    • render(reactElement, reactRoot);
  • React.Component
    • render / ReactDOM / life-cycle
    • 컴포넌트 생성
      • const Sample = React.createClass({…});
      • class Sample extends React.Component {…}
      • const Sample = props ⇒ (<>…</>);
• React Concept
  • HTMLElement → Element → Node → EventTarget
  • Event 타입의 주요 속성
    • type
      • 이벤트 이름으로 대소문자로 구분하지 않는다.
    • isTrusted
      • 이벤트가 웹 브라우저에서 발생한 것인지(true), 프로그래밍으로 발생한 것인지(false) 판단
    • target
      • 이벤트가 처음 발생한 HTML 요소
    • currentTarget
      • 이벤트의 현재 대상 (이벤트 버블링 중에서 이벤트가 현재 위치한 객체)
    • bubbles
      • 이벤트가 DOM을 타고 버블링될지 여부 결정
  • addEventListener, removeEventListener, dispatchEvent
• React 설치 및 환경 구축
  • eslint 옵션 추가
    • 터미널에 yarn add -D eslint-plugin-jsx-a11y 입력
  • Prettier 설치 및 설정
    • 터미널에 yarn add -D prettier eslint-config-prettier eslint-plugin-prettier 입력
    • package.json에 "prettier": "prettier --write ." 추가
• JSX (JavaScript as XML)
  • Tree 자료구조 → Root Element → <React.Fragment /> (<>…</>): children은 예외
  • {} 사용, JS 구문 표현
    • const element = <h1>Hello, {name}!</h1>;
  • if 대신 3항 / 논리(&&, ||) 연산자 사용
  • CSS 클래스는 className으로, 그 외 style 키 값은 카멜 표기법으로 작성
  • 주석은 {/* ~ */}
  • HTML 태그는 소문자, 그 외 대문자로 시작 또는 카멜 표기법
• React Component
  • Component
    • 속성(Props)을 받고 상태(state)/메소드를 가진다.
    • 반복되는 UI 단위
    • 가능한 순수함수로 실행되도록 작성하고 데이터 영역과 UI를 분리
    • MyComponent.defaultProps = {…}
  • Class Component
    • extends React.Component 또는 createClass
    • constuctor, this.state, render(), …
    • LifeCycle 관리가 쉽다
  • Functional Component
    • react 16.8부터 사용, 직관적이고 가볍다.
    • render 필요 없고 JSX return;
• React Component Props
  • Props
    • props, children (React.Node)
    • 속성(변수, 함수 등) 전달
    • MyComponent.defaultProps = {…}
• Component Props, States, Variables
  • Variables / Functions
    • 변경된다고 해서 re-rendering 영향 없음
    • 값은 바뀌지만 화면(view)에는 영향 없음
  • Props
    • read-only in receiver
    • 랜더링 될 때 한번만 설정된다. (랜더링 후에 변경X)
  • States
    • 상태변경은 무조건 setState 사용
    • 부모 상태 변경 시 참조하는 모든 자식 컴포넌트 re-render
  • Component
    • 함수형 컴포넌트 == 순수 함수형 컴포넌트
    • Container Component를 적절히 사용
    • 상태 공유 단위로 분리 (useContext)
    • 최대한 독립적으로 작성
    • coupling을 최소화하여 단독으로 사용 가능하도록 작성
• Atomic Design
  • Atoms
    • UI의 최소 단위
    • Input, Button 등
  • Molecules
    • 한 개 이상의 Atoms를 구성하여 단일한 역할 수행
    • LoginForm, SearchForm 등
  • Organisms
    • 한 개 이상의 Molecules
    • Presentation 및 Container Components의 조합
    • NavBar(Nav + SearchForm), Header 등
  • Templates
    • Organisms를 조합하여 만든 화면 레이아웃(CSS)
  • Pages
    • Templates에 Data를 포함하여 완성된 최상위 컴포넌트
  • Component Oriented Develoment
    • Page 단위 디자인의 한계를 극복하기 위해 출현
    • 디자인을 5개의 계층으로 정의
    • 코드 재사용성, 가독성, 분업, 테스트 용이
    • 설계의 기준(단위) 설정 용이, 계층적
  • Presentation Component
    • 전달된 Props로 형태, 모양을 구현
    • 상태 특별히 없고 API 호출도 없다.
  • Container Component
    • 디자인보다 로직에 집중
    • Hooks와 API 호출
    • 주로 Presentation Components를 반환하거나 포함한다.