리액트 역사, 개념 설명

Why React?

 

리액트 역사

facebook : javascript library(2013)

react native (2015)

hooks v16.8 (2019)

SSR+ v18 (2022)

SPA : 한어플리케이션 내에서 렌더링

CSR : 클라이언트에서 리액트 코드를 다운받아서 실행

SSG: 스테틱 사이트 제너레이터 (ex.gatsby)

 

프레임워크 vs 라이브러리

앵귤러, 스프링 vs 리액트

자율성이 떨어짐, 강력한 워크 플로우 큰 문제를 품

Vue.js 는 프레임워크와 라이브러리 사이 :경량형 프레임워크, 제공안되는 프레임워크 툴도 있음.

라이브러리:

진입장벽 낮음

작은 문제 UI Routing 등등

 

 

리액트 철학

자바스크립트 라이브러리

React → “Renders UI and responds to(reacts to) events“

⇒ Components

: A highly cohesive building block for UIs loosely coupled with other components.

React :

Root

Navbar

Logo

Article

Button

Content

등등의 컴포넌트들을 만드는 것

 

 

컴포넌트를 나누는 기준

• 재사용성

DRY - don’t repeat yourself

• 단일책임

SR - single responsibility

 

리액트 동작 원리

• 함수형 컴포넌트: 함수로 만든 컴포넌트
  • 대문자로 시작
  • JSX 문법
  • props, useState, render

• useState
  • 상태값을 변경한 요소와 그 상위 트리만 업데이트
  • DOM Tree → 실제 브라우저 돔 트리
  • Virtual DOM Tree - react 가지고 있는 가상 돔 트리
• 데이터를 State = 내부상태 , Props = 외부 전달 파라미터 | 로 나타내는 render 가 있다
• 상태 변경될때마다 re-render 된다
• 실제로 변경된 부분만 화면에 업데이트 된다

 

리액트 훅이란?

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

: 클래스 컴포넌트(초기) → 함수형(2019)

클래스 만들기 어려움, this 바인딩 이슈 , 로직 재사용 어려움

• 리액트 훅 개념

함수형 컴포넌트에서 상태와 라이프사이클을 hook 하는(hook into) ,가져오는 기능

→ 재사용 가능한 로직을 훅으로 만들어두기(값은 재사용하지 않음)

use-로 시작함

useState, useCallback

useEffect

useUser