.gif)
2021.12.07 초안작성
2021.12.08 update
2021.12.13 update
2022.11.26 update
리액트(React)
리액트는 사용자 인터페이스(ui)를 구축하기 위한 자바스크립트 라이브러리이다. 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하고, 선언적이고 효율적이며 유연하다.
리액트의 등장배경
세월이 지남에 따라 web app의 크기가 커지면서 자바스크립트의 중요성이 점점 더 커졌고, 리액트, 뷰, 앵귤러같은 SPA(Single Page Application)이 등장했다.
SPA: html, css, js파일들을 최초 1회만 로드하고, 이후엔 js파일을 통해 dom또는 필요한 html파일을 조작하는 방식을 취한다. SPA와 반대되는 의미로 페이지 별로 서버에서 받아오는 방식에 대해 MPA(Multi Page pplication)이라고 한다.
리액트의 장점(특징)
1/ 가상 DOM(Virtual DOM)
DOM을 직접 조작하는 것은 Imperative(명령적)하다. 즉, 변경되어야 하는 요소들 하나하나를 정확하게 명령하여 모든 단계를 하나하나 지정해줘야한다. 그래서 고려해야할게 많아지고, 모듈화가 어렵다.
반면 리액트는 Declarative(선언적)이다. React는 화면에 어떻게 그려줘야 하는지만 알려주고, DOM조작은 React-DOM라이브러리가 알아서한다. 예를 들어, 화면에 보여지기 원하는 state(js객체)가 청사진이 되고, React-DOM 라이브러리가 이 청사진을 바탕으로 DOM을 조작해서 화면에 구현한다.
2/ 컴포넌트 컨셉
컴포넌트들이 모여서 각기 다른 의미를 가지는 UI의 웹페이지가 되고, 이 웹페이지가 모여서 웹사이트를 구성하게 된다.
state를 기준으로 자바스크립트 함수를 이용해서 화면에 어떻게 보여지기 원하는지 작성하는 것에 따라 하나의 컴포넌트(js객체)를 구성한다.
그리고 리액트 내장 컴포넌트 라이브러리 기능에 내장된 render()메서드를 통해 React-DOM라이브러리에게 렌더링될 컴포넌트를 전달한다. 최종적으로 React-DOM라이브러리가 현재DOM과 전달받은 컴포넌트를 비교해서 필요한 부분만 변화를 주어 화면에 보여준다.
3/ 단방향 데이터 흐름
리액트는 [state=>component=>가상dom=>실제dom과 비교=>화면에 그리기]과정이 일방향적으로 이루어지는 단방향 데이터 바인딩을 가진다. 즉, 데이터 흐름 방향으로 요소들 간의 연관성을 파악하기 더 쉬워져 복잡성을 줄고 디버깅이 편리해진다.
4/ JSX문법
리액트에서 state와 컴포넌트는 jsx문법을 기반으로 한다. jsx문법은 자바스크립트를 확장한 문법으로 형태가 마치 HTML과 흡사하여 한 눈에 이해하기 쉬운 코드를 만들어준다. 그래서 jsx문법을 사용하면 선언적이고, 사용성측면에서 봤을때 css-in-js를 사용하기 편하다.
5/ 같은 문법으로 다양한 개발 가능
리액트 라이브러리를 그대로 ReactDOM라이브러리 대신 React Native라이브러리쓰면 앱을 만들 수 있고, React360라이브러리와 결합하면 VR 등을 만들 수 있다. ReactElectron과 결합하면 데스크톱 앱을 만들 수 있다. 따라서 자바스크립트 기반으로 모바일, VR, 데스크톱 어떤 것이든 만들 수 있는 크로스 플랫폼 역할을 한다.
☑️ 참고
