[Learning React] 1장 - 리액트 소개

1.0 리액트 소개

 - Why React? (피트 헌트)

 - 작은 라이브러리

 - JS 안에서 HTML 코드 작성 가능 (JSX)

 - 전처리 필요 => 웹팩

 - 생산성 높음

1.1 튼튼한 토대

 - 사전 학습: JS (배열, 객체, 함수, ...)

 - 함수형 프로그래밍

 - 가독성, 재사용성, 테스트 가능성 좋은 패턴 더 많이 활용 -> 더 뛰어난 JS 개발자로 성장

 - 컴포넌트를 사용한 UI 구현

 - 컴포넌트 compose (합성), prop과 state를 이용하여 로직 추가

 - 리액트 훅스; 컴포넌트에 대한 상태 로직 재사용 가능

 - 훅스와 서스펜스; 데이터 읽어올 때 도움

 - 라우팅, 테스팅, 서버 사이드 렌더링

1.2 리액트의 과거와 미래

 - 페이스북 엔지니어 조던 워크가 리액트 개발

 - JS Conf (자바스크립트 컨퍼런스)

 - View 단의 라이브러리 (JS 애플리케이션의 UI 나 뷰 계층 담당)

 - 리액트 네이티브; 리액트로 모바일 앱 개발 위한 라이브러리

 - 리액트 VR

 - 리액트 라우터, 리덕스, MobX (상태 관리)

 - 리액트는 모든 use case에 적합한 도구를 제공하지 않고 특정 기능만 구현해 제공하는데 관심 있음

   => 라이브러리

 - 2017년 리액트 파이버; 리액트 렌더링 알고리즘을 마법적인 기법 사용하여 재작성

 - 2019년 리액트 훅스 릴리즈 (여러 컴포넌트 간에 상태가 있는 로직 추가 및 공유)

 - 리액트의 비동기 렌더링 최적화 => 서스펜스

1.3 코드 예제 사용법

 - 파일 저장소 (깃헙 참고)

 - 리액트 개발자 도구

    - 리액트 컴포넌트 트리를 들여다 볼 수 있음

    - 프로덕션에서 리액트 실행하는 경우도 내부를 살펴볼 수 있음

    - 디버깅 시 유용

 - 노드 설치하기

    - npm

      - node package manager

      - package.json (프로젝트와 프로젝트의 의존성 기술)

      - npm install/remove 패키지-이름

      - npm install

    - yarn

      - 2016년 페이스북 발표한 도구

      - 의존 관계 더 신뢰성 있게 관리

      - npm install -g yarn

      - yarn add/remove 패키지-이름

      - yarn

 

---