1. 리액트의 탄생 배경 생각 정리
-
ajax의 도입과 자바스크립트를 통한 비동기적인 움직임으로 페이지 전체를 다시 렌더링 하기보다 부분적으로 내용을 변경하는 것(리렌더링)이 가능해졌다.(페이지 전체가 깜빡거리고 다시 로드되는 문제 개선) 하지만 SPA를 통한 CSR의 발전을 거듭하며 동적으로 변화해야 될 양이 너무 많아졌고 그 결과 잦은 리렌더링을 통해 속도와 성능이 떨어지게 되었다.
-
리액트는 이런 문제를 개선하고 애초에 무엇을 어떻게 수정해야 할지 복잡하게 생각하기 보다 view자체를 새로 만들어서 그냥 덮어씌어 버린다는 개념으로 접근하는 방식을 제공한다.
핵심은 virtual dom의 원리이다. dom의 작업을 완전히 없앨 수는 없겠지만 virtual dom을 통해 변경사항을 최소한의 연산으로 업데이트 할 수 있게 한다. -
추가적으로 리액트는 뷰, 앵귤러와 함께 CSR을 강력하게 지원하는 형태로 만들어진 라이브러리이다.
-
렌덩링 발전과정 참조: https://velog.io/@kysung95/SSR-vs-CSR-%EB%8B%B9%EC%8B%A0%EC%9D%98-%EC%84%A0%ED%83%9D%EC%9D%80-feat.-ssg
* 리액트 개요 :
기존 프레임 워크들은 어떤 변화를 줄지 고민해야 하고 복잡해지는데 리액트는 이런 고민을 해결하기 위해 기존 뷰를 아예 날려버리고 처음부터 새로 렌더링하는 방식을 구현했다. 변경될 내용을 생각하는게 아니라 그냥 어떻게 뷰로 보여질지만 생각하면 되는것이다.
하지만 이 또한 DOM의 일이 증가하게 되는것이고 메모리도 많이 사용하게 되는데 이런 단점을 극복하면서 최대의 성능을 내고자 만든것이 바로 리액트이다. 그 방법은 밑에서 소개한다.
* 컴포넌트 :
- 리액트에서 특정부분이 어떻게 생길지 정하는 선언체
- 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의한다.
- 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있다.
2. 리액트의 작동방식을 알기 위한 기본 개념!
-
리액트 컴포넌트의 최초실행 - 초기 렌더링
어떤 UI관련 프레임워크, 라이브러리든 맨 처음 보여줄 초기 렌더링이 필요한데 리액트에서는 이를 위해 render함수라는게 있다.
render(){}
이 함수는 컴포넌트가 어떻게 생겼는지를 정의한다. 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환하게된다.컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있게되고 이때 render함수를 실행하면 재귀적으로 내부 컴포넌트까지 모두 렌더링하게 된다. 즉 다시 최상위 컴포넌트로 돌아와 렌더링 작업이 끝나면 지니고 있는 정보를 통해 실제 DOM과 유사한 객체를 만들고 이를 통해 HTML을 만들어 우리가 원하는 실제 페이지에 DOM요소에 주입한다.
-
컴포넌트의 데이터 변경으로 다시 실행되는 - 리렌더링
리액트는 업데이트 한다기 보다 조화과정을 거친다라고 표현한다. 컴포넌트에서 데이터의 변화가 있을때 뷰가 변형되는 것처럼 보이지만 실제론 새로운 요소로 갈아끼우기 때문이다.
이 작업또한 render함수가 하게 되는데 새로운 데이터로 다시 render함수를 호출하면 새로운 결과를 바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render함수가 만든 컴포넌트 정보를 비교한다. 그리곤 자바스크립트를 통해 둘의 차이를 최소한의 연산으로 찾아내 dom트리를 업데이트한다. 즉 결국 최소한으로 바뀐 부분만 변경해서 virtual dom을 반영한다.
3. virtual Dom:
-
딱 한번의 리렌더링, 전 virtual dom과 비교해 메모리에서 변경 내용들 찾아 한번에 모아서 수정하므로 리렌더링시 실제 dom부담 완하 속도 개선
-
Dom이란?
Document Object Model의 약어로 객체로 문서구조를 표현하는 방법으로 XML이나 HTML을 사용하여 작성
- virtual Dom을 사용하여 view를 변경하는 과정
- 자바스크립트는 기존의 렌더링 되어있던 Dom을 복사하여 하나의 가상 dom을 만들어낸다.
(자바스크립트의 객체형태) - 데이터를 업데이트하면 전체 UI를 virtual dom에 리렌더링 한다.
- 이전 virtual dom에 있던(현재 실제 dom에 반영된 내용) 내용과 현재 내용(현재 virtual dom)을 비교한다.
- 바뀐 부분을 내용들을 통해 이전 virtual dom을 업데이트 후 한번만 실제 dom에 전부 적용한다.
>>> 조금 더 구체적으로!!
컴포너트들 렌더링- 새로 데이터만듬 - 메모리상에 자바스크립트 객체의 형태로 뷰(virtual dom)생성 - 분석(전virtual dom과 차이 비교 수정부분 업데이트) -업데이트 내용 실제 dom에 반영(모든 수정부분을 단 한번의 렌더링으로 업데이트!)
>>> 기존 dom api를 사용하면 dom의 변화가 생길때 마다 리렌더링 했어야 했는데 이 문제를 개선할 수 있다.
만약 for문을 돌려서 10개의 내용을 수정한다고 하면 하나 하나 바뀔때 마다 리렌더링 과정이 일어나서 속도와 성능에 좋지못함.
변경된 내용들이 실제 반영이 되면 그 내용에 layout부터 할지 paint부터할지 composition부터 다시 작업할지 crp에 흐름에 따라 리렌더링된다.
참조 DIffing:
virtual dom이 업데이트되면 리액트는 업데이트 이전의 virtual dom 스냅샷과 비교하여 정확히 어떤 virtual dom 요소가 바뀌었는지 검사한다. 이 과정을 말한다.
4. 리액트 사용을 위한 환경
참조: create-react-app : 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고(생략보단 알아서 다 설치해줌) 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구입니다.
기존의 브라우저에 없던 모듈 기능을 수행하기 위해 각 파일(모듈)들을 마치 하나의 파일인 것처럼 묶듯이 연결해줄 수 있는 번들러
- 모듈 : 함수나 변수, 클래스등을 모아놓은 파일
- 패키지 : 모듈들을 하나로 모아둔 폴더 느낌
- 라이브러리 : 패키지나 모듈을 모아놓은것
대표적인 번들러 : 웹팩, parcel, browserify
- 웹팩구조
- 웹팩 로더(파일들을 불러오는 역할)
- 웹팩의 file loader(웹 폰트나 미디어 파일 등을 불러오는 역할)
- 웹팩의 바벨로더(자바스크립트 파일들의 최신 문법으로 작성된 코드를 es5문법으로 변환)
- 바벨로더를 통해 코드를 변환하는 이유: 구버전의 웹브라우저와의 호환을 위함과 컴포넌트의 jsx또한 자바스크립트 정식 문법이 아니기 때문에 es5형태의 코드로 변환해 주어야 한다.
5. JSX :실제는 자바스크립트의 객체!
: 자바스크립트로 일일이 만들기 불편함을 개선한 가독성좋은 문법, 형태가 html이나 xml과 비슷하며 html문법을 그대로 따르며 컴포넌트도 jsx안에서 작성될 수 있다.
import logo from "./logo.svg";
import "./App.css";
function App() {
const name = "뤼액트";
return (
<>
<h1>{name === "리액트" ? "안녕" : <h2>잘 작동하니?</h2>}리액트 안녕!</h1>
<h1>잘 작동하니?</h1>
</>
);
}
export default App;-
JSX : 자바스크립트의 확장 문법 XML과 매우 비슷하게 생겼으며 브라우저 실행전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환되게 된다.
-
ReactDom.render(렌더링할 내용JSX형태작성, 렌더링 될 document요소설정):
컴포넌트를 페이지에 렌더링 하는 역할을 하며 모듈을 불러와 사용할 수 있다. index.js에 존재
- import와 export의 개념
참조 : https://pooney.tistory.com/85
참조 : https://codingmania.tistory.com/333
* 지금은 자바스크립트 자체에서도 import를 지원하고 있다. 하지만 import만 사용하면 전달되는 js파일들을 모두 다운로드 후 프로그램을 실행해야 하는데 이런 문제를 개선시켜주는게 번들러이다. 번들러는 여러개의 파일들을 마치 하나의 파일처럼 묶어서 전달해준다.(실제 브라우저에 한개만 넘어간다고 한다.)
