리액트가 좋다.
리액트를 쓰면 편리하다.
리액트 리액트 리액트 말은 많이 들었는데, 도대체 리액트가 뭔지 모르겠다. 그래서 리액트를 한번 정리해 본다.
React의 탄생
-
리액트가 등장하기 이전에도 다양한 프론트엔드의 라이브러리나 프레임 워크가 있었다. 하지만 web app의 크기가 커지면서 자바스크립트 파일도 커지고 복잡해지며, 통제하기가 어려워 졌다.
-
각 페이지마다 모든 페이지파일에 html,css,Javascript를 갖는 기존의 웹 페이지는 페이지를 이동할때마다 모든 파일을 로드해야하기 때문에 굉장히 느렸다.
-
그래서 처음의 파일만을 로드하고, 이후에는 자바스크립트를 통해 dom, html파일을 조작하는 싱글페이지 어플리케이션이 등장했다.
-
이후 구글에 의해 angular.js가 등장 했고, 이는 작은 조직들로 거대한 앱을 구성하도록 설계되어졌다.
-
하지만 사용자가 점점 많아져서, 이 사람들이 어디로 갈지, 어떤 식으로 행동할지 이어지는 것들에 대한 파악이 어려워지면서 이를 해결하기 위한 방법으로 페이스북에서 개발된 것이 바로
React 이다.
React의 특성
1. virtual Dom
- 리액트의 돔조작 방식은 화면에 보여지기를 원하는 state를 꾸리고, 이에 맞춰서 리액트가 dom을 조작하는 방식이다.
기존에는 하나하나 요소들에게 정확하게 명령했다는 점에서 차이점이 있다. - 이는 데이터 흐름이나 연관성을 파악하기가 좀더 쉬워졌다는 장점이 있다.
2. 컴포넌트
- 리액트는 재사용 가능한 컴포넌트를 만들고, 이것들로 웹사이트를 구성한다.리액트에 내장된 컴포넌트 라이브러리를 통해 기능을 불러오고, render() 메소드를 통해 ReactDom한테 전달하고,
얘는 현재의 dom과 비교해서 필요한 부분만 변화를 준다.
3.일방통행
-
위에 설명한 바와 같이
state -> component -> 가상돔 -> 실제돔과 비교 -> 화면 표기 이 렇게 일방향적으로 과정이 이루어 진다. -
그렇기 떄문에 오히려 디버깅이 원할해진다는 장점이 있다.
리액트의 한계
-
리액트는 UI라는 작은 영역만 담당하기 때문에 프로젝트에 필요한 다양한 기능들을 사용하기에는 한계가 있다.
-
많은 다른 기능들을 필요로 한다.
실제로 속도개선을 위한 기능만 5000개 다 알고 선택할 수 있을까?? -
프로젝트에 알맞는 라이브러리를 고르고, 이를 설정하고 유지보수하는 것이 굉장히 어려운일이 됨
청소를 편하려고 청소기를 샀는데, 청소기 청소를 위해 새로운 기구를 사야하고, 청소기 기구를 세척하는 기구를 세척하는 기구를 사야되는 상황????
해결책: Next.js
Next.js는 Pre-rendering HTML이라는 이름으로, SSR 과 CSR방식을 혼합해서 사용한다.
- SSR(Server Side Rendering):서버에서 html을 만들어온다.(fetch)
- CSR(Client Side Rendering):클라이언트에서 돔을 만들어 진행한다
- Pre-rendering: 고정적인 값은 우선 렌더링해둔다.
