리액트를 다루는 기술 개정판 [Intro, JSX, Component]

book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=315016880

싸니까 믿으니까 인터파크도서

 

1. 리액트 시작 (리액트는 프레임워크가 아닌 라이브러리!)

  . MVC (Model-View-Controller) vs MVVM (Model0View-View Model)

    . 공통점: Model과 View가 있다.

      . 모델: 애플리케이션에서 사용하는 데이터를 관리하는 영역 

      . 뷰: 사용자에게 보이는 부분 

      . 컨트롤러: 사용자에게서 어떤 작업을 받으면 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영 

 

  . 리액트 이해

    . 뷰를 수정하려면 코드 관리가 어려우니, 수정이 생기면 뷰를 새로 렌더링하자 > 성능을 아끼고 편하게 구현한 것이 리액트!

    . 구조가 MVCC, MVW가 아닌, 오직 View만 신경 쓰는 라이브러리

    . 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 생김새와 작동방식이 정의된다.

 

  . 초기 렌더링

    . render() {} : 컴포넌트가 어떻게 생겼는지 정의하는 함수 (뷰의 생김새와 작동방식을 담은 객체를 반환)

    . 렌더링이 끝나면, 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 이를 DOM 요소 안에 주입한다.

 

  . 조화 과정 

    . 리렌더링 (뷰 업데이트): 새로운 요소로 갈아끼우는 작업 

    . 이 작업도 render 함수가 맡아서 한다.

    . render()가 뷰 생성 > 이전 DOM 트리에서 수정된 컴포넌트 비교 > 최소한의 연산으로 DOM 트리 업데이트

 

  . Virtual DOM

    . DOM (Document Object Model) : 객체로 문서 구조를 표현하는 방법. HTML or XML로 작성

    . 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. 

    . 일반 DOM은 동적 UI에 최적화되어 있지 않다. (HTML 자체는 정적 > 자바스크립트가 이를 동적으로 만듦)

    . Virtual DOM: DOM 업데이트를 추상화함으로써 처리 횟수를 최소화하고 운영 효율화 

    . 리액트의 DOM 업데이트 절차 

      1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.

      2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.

      3. 바뀐 부분만 실제 DOM에 적용한다.

    * 리액트는 "지속적으로 데이터가 변화하는 대규모 애플리케이션"에서 진가를 발휘할 수 있다. (업데이트 처리 간결성!)

 

  . Node.js

    . 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 (웹 브라우저 환경이 아닌 곳에서도 JS 사용 가능)

    . nvm: Nodejs를 여러 버전으로 설치하여 관리

    . yarn: npm보다 빠르고 효율적인 캐시 시스템과 기타 부가 기능을 제공

 

2. JSX

  . 프로젝트 생성 시 만들어지는 node_modules directory의 라이브러리들을 import해서 활용할 수 있다.

    . 모듈 import는 원래 Node.js에서 지원하는 기능.

    . Bundler (WebPack)를 통해 브라우저에서도 사용할 수 있게 됨 > 번들러가 모듈들을 모두 합쳐 하나의 파일을 생성 (index.js)

    . Webpack의 로더 기능을 통해 SVG, CSS 파일도 import 할 수 있다. (css-loader, file-loader, babel-loader 등)

 

  . 컴포넌트 생성 

    . function 키워드 사용시 함수형 컴포넌트 생성 (함수에서 반환하는 내용을 렌더링하게 됨)

    . 반환하는 내용의 작성 문법을 JSX라고 부른다.

 

  . JSX란 

    . 자바스크립트의 확장 문법 (XML과 매우 유사)

    . 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 변환됨 

 

  . 장점 

    . 보기 쉽고 익숙하다 

    . HTML 태그를 사용할 수 있고, 컴포넌트도 작성할 수 있다 (높은 활용도)

 

  . ReactDOM.render: 컴포넌트를 페이지에 렌더링하는 역할 (렌더링할 JSX, document 내부 요소를 인풋으로)

  . React.StrictMode: 리액트의 레거시 기능들을 사용하지 못하게 하는 기능 

 

  . 문법 

    . (Virtual DOM에서 컴포넌트 변화를 효율적으로 감지할 수 있도록) 컴포넌트의 여러 요소를 반드시 부모로 감싸야 한다. 

    . 감싸기 위해서 div 대신 Fragment라는 기능을 사용할 수도 있다. (* div와 Fragment의 차이는?)

    . 자바스크립트 표현식을 쓸 수 있다. JSX 내부에서 코드를 { }로 감싸면 된다.

    . let과 const는 scope가 함수 단위가 아닌 블록 단위 

    . if문 대신 조건부 연산자, AND 연산자를 사용한 조건부 렌더링 

    . 주로 한줄이 넘어갈 때 전체 코드를 괄호로 감싼다.

    . OR 연산자를 활용하여 undefined이면 렌더링하지 않도록 조치한다. (JSX 내부에서는 괜찮음, p.69)

    . 스타일 객체 선언 시 대시(-) 는 사용하지 않고, 카멜 표기법으로 작성한다.

    . class 대신 className

    . 주석: {/* ~ */}

 

3. 컴포넌트

  . 클래스 컴포넌트 vs 함수형 컴포넌트

    . 클래스형: state 기능 및 LifeCycle 기능 사용 가능, 임의의 메서드 정의 가능

    . 함수형: 메모리 자원 덜 사용, 파일 크기 더 작음 (Hooks를 통해 클래스형처럼 비슷하게 사용할 수 있어짐)

    . 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다.

 

  . Reactjs Code Snippet으로 간편하게 함수 선언하기: rsc 입력후 엔터

  

  . export를 해줘야 다른 파일에서 import하여 해당 클래스를 불러올 수 있다.

  . 컴포넌트에 state를 설정할 때는 다음과 같이 constructor로 초기값을 설정하며, 반드시 super(props)를 호출한다.

 

  . props

    . 컴포넌트 속성을 설정할 때 사용하는 요소 

    . 부모 컴포넌트에서 설정할 수 있다.

    . children: 컴포넌트 태그 사이의 내용을 보여주는 props 예: <Component> children </Component>

    . 필수 props나 props의 타입을 지정할 때는 propsType을 사용한다.

      . array, arrayOf(다른 prop types), bool, func, number, object, string, symbol, node, instanceOf, oneOf, objectOf 등

    . isRequired를 활용하여 필수 props를 지정한다.

   . 클래스형에서는 this.props를 활용하여 비구조화 할당한다.

 

  . state

    . 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. (props는 부모 컴포넌트에서만 수정할 수 있다.)

    . 클래스형 컴포넌트의 state

    . this.setState에 객체 대신 함수 인자를 전달할 수도 있다 (함수 사용시 비동기적 업데이트로 인한 한계 극복 가능, p.109)

    . setState의 두 번째 파라미터로 콜백 함수를 등록하면, 원하는 작업을 수행할 수도 있다.

 

  . useState (함수형에서 Hooks를 이용해 state 활용하기)

    . useState 함수의 인자에는 상태의 초깃값을 넣어 준다. (객체가 아니어도 된다)

    . 함수를 호출하면 [원소의 현재 상태, 원소의 상태를 바꿔주는 함수] 배열이 반환됨

      . 상태를 바꿔주는 함수를 Setter 함수라고 부른다.

    . state는 꼭 세터 함수를 통해 객체를 업데이트해야 한다.