#1 basic react

React란?

• 어플리케이션 구조 중에서 View만을 담당하는 라이브러리
• React is a JavaScript library for building user interfaces
• 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 않고 그냥 기존 뷰를 날려 버리고 처음부터 새로운 데이터를 가지고 render함수를 호출하여 새로 렌더링 함으로써 어플리케이션의 구조를 간단화
  -> render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교
  -> 둘의 차이를 알아내 최소한의 연산으로 DOM 트리 업데이트

 

React 특징

1. VirtualDOM을 사용한 화면 조작
   • 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
   • 이전 Virtual DOM에 있던 내용과 현재 내용을 ‘diffing’ 알고리즘을 사용하여 변화를 확인
   • 바뀐 부분만 실제 DOM에 적용
   • 리액트와 virtual dom이 제공하는 것은 "업데이트 처리의 간결성"
     => 지속적으로 데이터가 변화하는 대규모 어플리케이션에 사용하는것이 적절
2. 컴포넌트(Components)와 단방향 데이트 흐름(Unidirectional data flow)
   • React는 Component로 구성, 개발 할 때 컴포넌트 단위로 고려하는 것이 좋음
   • React에선 데이터가 단방향으로 전송 ->  데이터 추적 및 디버깅이 상대적으로 쉬움. 이러한 특징을 살려서 Flux 패턴을 사용한 Redux라이브러리를 많이 활용함

 

Module Bundler

• 각각의 모듈들에 대해 의존성 관계를 파악한 후 모듈들을 하나의 파일로 그룹핑하는 소프트웨어
• 브라우저에는 모듈을 불러오는 기능이 없으므로 브라우저에 실행 가능한 자바스크립트 파일을 만들기 위해 번들러를 사용
• 대표적인 번들러 : webpack, parcel, ...
• 웹팩 로더 : svg, css 파일들을 불러오는 웹팩의 기능
  • ex) css-loader : css파일을 불러옴
  • babel-loader : 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법을 구버전 웹 브라우저에서도 실행 가능하도록 ES5 문법으로 변환

 

JSX

• JSX it is a syntax extension to JavaScript
• JSX 문법
  1. 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 반드시 부모요소 하나로 감싸야 한다 => <div></div> or <></>
  2. 자바스크립트 표현식 : JSX 내부에서 JS 코드를 { } 로 감싼다.
  3. 조건부연산자 : JSX 내부 자바스크립트 표현식에 if문을 사용할 수 없으므로 조건부연산자(삼항연산자)를 사용
  4. clssName : class 속성 대신 className 속성 설정
  5. 주석 : JSX 내부에서는 {/* 주석을 이렇게 작성 해야한다 */}

 

Components

• Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
• Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 

 

Props

• React passes JSX attributes to a user-defined component as a single object. 
  We call this object "props".
• 컴포넌트 속성 설정및 부모 컴포넌트의 데이터를 자식에게 전달할 때 사용
• props값은 해당 부모 컴포넌트에서만 설정 가능

 State

• State는 컴포넌트 내부에서 읽기(read)와 변경(update) 가능한 데이터
• this.setState() 메서드를 사용하여 State값을 update
• State값을 변경해서 화면(view)이 변경되면 render()가 자동으로 재실행

 

Life Cycle (React v16.3 이후)

• Mounting
   : constructor  ->  getDerivedStateFromProps  ->  render  ->  componentDidMount
• Updating - New props
   : getDerivedStateFromProps   -> shouldComponentUpdate -> render  -> getSnapshotBeforeUpdate -> componentDidUpdate
• UPdating - setState()
  : shouldComponentUpdate -> render  -> getSnapshotBeforeUpdate -> componentDidUpdate
• Unmounting
  : componentWillUnmount

 

FLUX 패턴/아키텍처

• Action –> Dispatcher –> Store –> View 구조를 통해 데이터를 전달, 업데이트 하는 패턴
• View에서 Dispatcher로 Action을 보낼 수 있으며, Dispatcher는 작업이 중첩되지 않도록 Action을 스케쥴링 (사실상 대기)
• FLUX 패턴/아키텍처를 좀 더 유연하게 사용할 수 있도록 ‘Redux’라는 라이브러리를 많이 사용