React란?
- 어플리케이션 구조 중에서 View만을 담당하는 라이브러리
- React is a JavaScript library for building user interfaces
- 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 않고 그냥 기존 뷰를 날려 버리고 처음부터 새로운 데이터를 가지고 render함수를 호출하여 새로 렌더링 함으로써 어플리케이션의 구조를 간단화
-> render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교
-> 둘의 차이를 알아내 최소한의 연산으로 DOM 트리 업데이트
React 특징
- VirtualDOM을 사용한 화면 조작
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링
- 이전 Virtual DOM에 있던 내용과 현재 내용을 ‘diffing’ 알고리즘을 사용하여 변화를 확인
- 바뀐 부분만 실제 DOM에 적용
- 리액트와 virtual dom이 제공하는 것은 "업데이트 처리의 간결성"
=> 지속적으로 데이터가 변화하는 대규모 어플리케이션에 사용하는것이 적절
- 컴포넌트(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 문법
- 감싸인 요소 : 컴포넌트에 여러 요소가 있다면 반드시 부모요소 하나로 감싸야 한다 => <div></div> or <></>
- 자바스크립트 표현식 : JSX 내부에서 JS 코드를 { } 로 감싼다.
- 조건부연산자 : JSX 내부 자바스크립트 표현식에 if문을 사용할 수 없으므로 조건부연산자(삼항연산자)를 사용
- clssName : class 속성 대신 className 속성 설정
- 주석 : 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’라는 라이브러리를 많이 사용
'Frontend' 카테고리의 다른 글
CSS 레이아웃 (0) | 2020.10.24 |
---|---|
HTML, CSS (0) | 2020.10.24 |
0. React intro (0) | 2020.10.24 |
Redux in React (0) | 2020.10.24 |
Redux (0) | 2020.10.24 |