[React] React란

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

React란?

리액트(React, React.js, ReactJS)는 페이스북에서 제공해주는 자바스크립트 라이브러리의 하나로서 특히 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용된다.

💡 라이브러리와 프레임워크의 차이점

👉🏻 공통점: 프로그램을 쉽게 만들 수 있게 하는 공통적인 목적존재

👉🏻 차이점: 코드 흐름의 제어권

	라이브러리	프레임워크
흐름	내가 만든 코드를 내가 컨트롤 할 수 있음	누군가가 만들어 놓은 규칙에 따라 만들어야함
코드	활용 가능한 특정 기능에 대한 코드	일정한 형태의 틀을 가지고 있어 틀에 맞추어 코드 설계 및 구현
언어종류	React, Jquery	Angular, Vue, Spring, Django

React 특징

1. DataFlow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

💡 데이터 바인딩이란?

두 데이터 또는 소스를 모두 일치시키는 기법을 말한다. 상위 컴포넌트에서 하위 컴포넌트로 전달하는 데이터 흐름으로 이해하기 쉽고 데이터 추적 및 디버깅이 쉽다.

단방향 데이터 바인딩 - React

부모 컴포넌트 → 자식 컴포넌트로 전달하는 데이터 흐름

👉🏻 장점: 데이터 변화가 일어났을 때 성능 저하 없이 DOM 객체 갱신이 가능하며, 데이터의 흐름이 단방향이다 보니 데이터 추적과 디버깅이 쉽다.

👉🏻 단점: 양방향과 다르게 데이터 변화에 따른 화면 업데이트 코드를 매번 작성해야 한다.

양방향 데이터 바인딩 - Angular, Vue

데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신, 화면의 입력에 따라 데이터를 갱신한다.

👉🏻 장점: 단방향 데이터 바인딩에 비해 코드량이 크게 줄어든다.

👉🏻 단점: 변화에 따라 DOM 객체 전체를 렌더링 또는 데이터를 바꿔줘야 하므로 성능 이슈가 발생하며, 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있다.

2. Component 기반 구조

한 페이지 안에 독립된 작은 Component들을 만들고 이를 조립해 화면을 구성한다. 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높고, import를 통해 컴포넌트를 추가하여 사용할 수 있으며 어플리케이션이 복잡하더라도 코드 유지보수 및 관리가 용이하다.

💡 React Component의 생성 방식

React 16.8 버전 이후 'Hook'이 도입되면서 함수형 컴포넌트도 state와 Life Cycle을 사용할 수 있게 됨과 동시에 클래스형 컴포넌트보다 더 편해진 방법으로 사용할 수 있게 되었다.

⭐ React 공식문서에서는 함수형 컴포넌트와 훅을 사용할 것을 권장하고 있다.

1) 클래스형 컴포넌트

class를 선언
Component를 상속받아야함
render() 메소드가 반드시 존재해여함
state, Life Cycle 사용 가능
메모리 자원이 함수형 컴포넌트에 비해 많이 사용
컴포넌트가 복잡하며, 로직의 재사용이 힘듬

2) 함수형 컴포넌트

클래스형 컴포넌트에 비해 선언 방식이 간단
state, Life Cycle 사용 불가능 (React 16.8 버전 이후 hook으로 대체 사용가능)
메모리 자원이 클래스 컴포넌트에 비해 덜 사용됨
재사용성과 확장성이 높음

3. Virtual DOM

Virtual DOM은 가상의 Document Object Model을 말한다. 이 때, DOM은 html, xml, css 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다.

💡 Javascript 브라우저 동작원리

- DOM Tree 브라우저는 HTML을 전달받으면 브라우저의 렌더 엔진이 파싱하여 DOM Node로 이루어진 트리를 만든다.

- Attachment 노드 스타일을 처리하는 과정

- Render Tree생성 DOM 트리와 CSSOM 트리가 결합하여 실제 페이지를 렌더링하는 데 필요한 노드를 가지고 Render Tree를 형성

- Layout 각 노드들은 스크린의 좌표가 주어지며, 정확히 어디에 나타나야 할 지 위치가 주어짐

- Printing Render Tree가 화면에 내용을 표시하기 위한 전체적으로 탐색을 거쳐 print() 메서드가 호출되며, 렌더링 요소들에 색을 입히는 과정

Virtual DOM은 DOM의 변화가 생길 시 실제 DOM에 접근하여 조작하는 것이 아닌 DOM 작업을 가상화하여 미리 처리한 후 최종 결과를 Browser DOM과 비교 후, 실제 DOM에 Patch 한다. 즉 Virtual DOM은 최소한의 DOM조작을 통해 실행되게 도와준다.

4. Props and State

👉🏻 Props