[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 태그는 소문자, 그 외 대문자로 시작 또는 카멜 표기법