react 왜 쓰나요

사실 단순 웹사이트를 만드려면 html 과 css js 만으로도 가능하다.

그렇다면 왜 react를 사용할까?

 

현대 웹은 단순한 페이지가 아닌 웹 애플리케이션이다.

수 많은 상태관리와 DOM요소를 직접 관리하고 코드를 정리하는 일은 매우 번거로운 일이다.

 

웹 개발을 할 때

 

DOM(Document Object Modal, html, head, body 같은 태그들을 js가 사용할 수 있는 객체) 관리

상태값 업데이트를 최소화

 

하며 기능 개발과 사용자 인터페이스를 구현하는 데 집중할 필요가 있었고

이에 react Angular Vue 가 등장하게 되었다

 

 

 

 

REACT

 

 

 

1. Virtual Dom 의 사용

 

 

SPA는

 

dom의 변경이 있을 때마다 렌더트리를 재생성하고 레이아웃을 만들고 페인팅하는 과정을 반복해야하는데

이는 곧 브라우저가 연산을 많이 해야하기 때문에 비효율적이다.

 

여기서 문제는 컴포넌트를 하나하나 조작할 때마다 저 과정이 반복해서 발생된다는 것인데

 

 

 

 

 

이때 React는 실제 브라우저가 관리하는 실제돔과

리액트가 메모리 상에서 관리하는 가상돔의 얕은 비교(깊은 비교는 마지막 depth까지 비교함)를 통하여

빠르게 변경된 컴포넌트를 찾아 한번에 업데이트한다.

 

실제 dom에서 직접 처리하는 것이 아닌 가상돔과 메모리에서 미리 변화를 처리해서 저장한 후에 실제 DOM과 동기화하는 것

 

 

 

 

+

state의 불변성을 유지하기 위해 가상돔의 값을 직접 변경하면 안 된다.

컴포넌트는 setState를 비교해서 업데이트가 필요한 경우에만 render 함수를 호출하는데

state를 직접 수정하게 되면 React가 render함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않는다.

 

 

 

2. 컴포넌트 단위 개발

 

레고 블럭과 같이 작은 단위로 개발한 것을 조립하듯이 합치는 것이다

가독성이 높아지고 재사용성이 높아진다

 

 

 

3. JSX 문법 지원

 

JSX + XML 확장 구문으로

const app = () => {
	return(
    	<>
        	<div>안녕하세요</div>
    	</>
    )	
}

return 문에 감싸져있는 html 문법과 유사한 코드가 jsx이다.

html을 작성하듯이 비슷하게 작성할 수 있다.

js 에서 UI관련 작업을 할 수 있기 때문에 가독성이 좋고 react가 에러 및 경고 메세지를 표시해주어서 개발이 용이하다.

 

-> 결국 브라우저는 html, css, js 코드를 읽기 때문에 jsx 코드를 이해하지 못한다.

jsx를 브라우저가 이해할 수 있게 변환해주어야하는데 이때

 

 ReactDOM.render()

 

함수를 사용해 페이지에 컴포넌트를 렌더링하고 react-dom 모듈을 불러온다.

 

=> 가상돔은 하나의 DOM 트리 구조로 이루어져야한다는 규칙 때문에 

 

document.getElementById('root')

 

렌더링 될 루트 element는 하나만 존재해야한다.

 

 

 

 

4. SSR, CSR 지원

 

next.js 를 사용한다면 SSR 사용이 가능하며

SPA의 SEO 이슈를 해결할 수 있다.

 

데이터를 보호하고 비용에 민감할 경우 CSR를 선택할 수 있고

정적인 컨텐츠나 노출이 많은 서비스를 사용해야하는 경우엔 SSR을 사용하는 것이 좋다.

 

 

 

 

참고 자료 :

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_5-%E1%84%92%E1%85%A1%E1%86%B8%E1%84%89%E1%85%A5%E1%86%BC-compositing