[React] Start to React

songtak·2020년 11월 9일
0

React

목록 보기
1/3
post-thumbnail

What is React?

"사용자 인터페이스를 만들기 위한 JavaScript 라이브러리"

리액트를 사용하는 가장 큰 이유 중의 하나는 UI를 자동으로 업데이트를 해준다는 점이다.
API 통신이나 사용자 이벤트를 통해서 프로그램의 상태값을 기반으로 UI를 자동으로 업데이트한다.

공부를 하다보면 리액트를 라이브러리로 봐야하는가 프레임워크를 봐야하는지의 논의가 자주 등장한다.
나의 생각을 말하자면 리액트 자체는 라이브러리지만, 리액트에 리덕스라던지 라우트 등 여러 가지를 결국엔 같이 사용한다는 점에선 프레임워크를 사용하고 있다고 생각한다.

👋 기본 사용 단어

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

View: 사용자에게 보이는 부분

Component: 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용

Rendering: 사용자에게 view를 보여주는 것 (컴포넌트의 데이터 변경으로 다시 실행되는 리렌더링)

초기 렌더링: React는 이를 다루는 render함수가 있음 (어떤 UI관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요)

DOM: DOM은 트리 형태 라서 특정 노드를 찾거나 수정, 제거, 삽입 가능
(DOM자체는 빠르지만 웹브라우저를 연산하고 리페인트 하는 과정에서 시간 허비)

Virtual DOM: 가상돔, 업데이트 처리 간결성
(빠른 렌더링을 위해서는 돔 변경을 최소화 해야한다. 그래서 리액트는 메모리에 가상 돔을 올려놓고 이건과 이후의 가상 돔을 비교해 변경된 부분만 실제 돔에 반영하는 전략을 채택함)

node.js: 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임

런타입: 컴퓨터가 실행되는 동안 프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상 머신의 상태

바벨: ECMAScript 6를 호환시켜줌, JS코드를 변환해 주는 컴파일러
리액트에서는 JSX 문법을 사용하기 위해 사용함.
(JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아님,
바벨에서는 여러 문법을 지원할 수 있도록 preset과 plugin을 설정함. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있음)

웹팩: 번들러의 한 종류
모듈화된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다 웹브라우저를 리로딩, 편의성과 확장성이 좋음

JSX: 자바스크립트 확장 문법

  • 코드로 보면 XML 형식이지만 실제로는 자바스크립트 객체
  • 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환
  • VirtualDOM에서 컴포넌트 변화를 감지 할 때 효율적으로 처리하기 위해 컴포넌트 내부는 하나의 DOM트리 구조여야함.
    (예를 들어 return 부분에 <> </>이거를 사용해 하나로 감싼 것 처럼)
  • 자바스크립트 표현식 사용 가능
    (JSX내부에서 코드를 { }로 감싸면 됨)

⛑ 사용시 주의사항

1. render함수는 순수 함수로 작성한다.
render 함수는 순수 함수여야 하므로 인수 state가 변하지 않으면 항상 같은 값을 반환해야 한다.

2. state는 불변 변수로 관리한다.
컴포넌트의 상태값을 수정할 때는 기존 값을 변경하는 게 아니라 새로운 객체를 생성해야 한다.

복잡도⬇️ 버그 발생 확률⬇️ 렌더링 성능⬆️

profile
멋쟁이 개발자

0개의 댓글