React 소개
React는 무엇인가?
공식 사이트에서는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 한다.
그럼 라이브러리란 무엇일까?
프로그램에서 라이브러리는 자주 사용되는 기능들을 정리해 모아 놓은 것이다.
도서관으로 예시를 들면 아래 그림과 같다.
그러면 사용자 인터페이스란 무엇일까?
사용자 인터페이스는 영어로 User Interface라고 하며, 보통은 UI로 부른다.
사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간의 입력과 출력을 제어해주는 것이 바로 유저 인터페이스이다.
예로 들어서, 웹 사이트의 경우 우리가 흔히 보는 버튼이나 텍스트 입력창 등이 모두 사용자 인터페이스라고 생각하면 된다.
버튼을 누름으로써 웹 사이트에서 반응을하고, 웹 사이트에서 특정 페이지를 보여줌으로써 사용자들이 반응을 하는 것이다.
이처럼 사용자 인터페이스를 만들기 위한 기능 모음집을 UI 라이브러리라고 부르고, 리액트는 대표적인 자바스크립트 UI 라이브러리다. 조금더 쉽게 말하면 화면을 만들기 위한 기능들을 모아 놓은 것이다.
프레임워크와 라이브러리의 차이는 무엇일까?
가장 큰 차이점은 프로그램의 흐름에 대한 제어 권한이다.
프레임워크는 흐름에 대한 제어를 개발자가 아닌 프레임워크가 가지고 있고, 라이브러리는 흐름에 대한 제어를 하지 않고, 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태이다.
결국 라이브러리는 제어 권한이 개발자에게 있고, 프레임워크는 자신에게 있다.
정리하면, 리액트는 사용자와 웹 사이트의 상호작용을 돕는 자바스크립트의 기능 모음집이다.
웹 사이트를 개발하기 위해서는 HTML, CSS, JavaScript를 모두 다 잘 다뤄야 되는데 사이트의 규모가 커지면 커질수록 수 많은 페이지를 잘 만들고 관리하기가 쉽지 않다.
그래서 이러한 복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것이 바로 React이다.
SPA란 Single Page Application의 약자로 하나의 페이지만 존재하는 웹 사이트 또는 웹 애플리케이션을 의미한다.
규모가 큰 웹사이트의 경우 수백 개의 페이지가 존재하는데, 이것을 각각 페이지마자 HTML로 만드는 것은 굉장히 비효율적이고, 관리하기도 힘들다.
그래서 하나의 HTML 틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의 내용을 채워서 보내주는 것이 바로 SPA이다.
바로 React가 이런 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구이다.
React의 장점과 단점
장점
빠른 업데이트와 렌더링 속도
리액트에서는 이러한 빠른 업데이트를 위해 내부적으로 Virtual DOM 이라는 것을 사용한다.
Virtual DOM이란 말 그대로 가상의 DOM이다.
DOM은 Document Object Model의 약자로 웹페이지를 정의하는 하나의 객체이다.
쉽게 말해서 하나의 웹 사이트에 대한 정보를 모두 담고 있는 큰 그릇이라고 보면 된다.
Virtual DOM은 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 하는 것이라고 보면 된다.
스크린샷2 2023-11-20 오후 11 11 56 https://medium.com/@surksha8/virtual-dom-and-real-dom-understanding-the-differences-da8f3fab4261
일반적으로 사용자와 상호작용을 하는 웹 페이지 같은 경우 화면의 업데이트가 수시로 이루어진다.
앞에서 DOM이 웹 사이트 정보를 모두 담고 있다고 설명했다.
그래서 화면이 업데이트된다는 말은 곧 DOM이 수정된다는 말과 동일하다.
기존의 방식으로 화면을 업데이트 하려면 DOM을 직접 수정해야 하는데, 이것은 성능에 영향을 크게 미치고 비용도 굉장히 많이 드는 작업이다. 왜냐하면 수정할 부분을 DOM의 데이터에서 모두 찾아야 하기 때문이다.
반면에 리액트는 DOM을 직접 수정하는 것이 아니라 업데이트해야 할 최소한의 부분만을 찾아서 업데이트한다.
위 그림을 보면 어떤 상태의 변경, Change of State가 일어나면 Virtual DOM에서는 업데이트해야 할 최소한의 부분을 검색하여 Diffing 한다. 그리고 검색된 부분만을 업데이트하고 다시 Re-render 하면서 변경된 내용을 빠르게 사용자에게 보여준다.
Component-Based
리액트에는 컴포넌트라는 굉장히 중요한 개념이 있는데, 컴포넌트는 구성 요소라는 뜻을 가지고 있다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다.
마치 작은 레고 블록들이 모여서 하나의 완성된 모형이 되는 것과 비슷하다고 생각하면 된다.
재사용성
재사용성이라는 것은 말 그대로 다시 사용이 가능한 성재를 의미한다.
하지만 모든 소프트웨어가 곧바로 어떤 곳에서든 재사용이 가능한 것은 아니다.
스크린샷 2023-11-20 오후 11.39.38.png 재사용을 진행할 때 그림처럼 의존성이 있는 상태에서 해당 모듈이 없는 경우 재사용이 불가능하다.
재사용을 하려고 할 때 의존성 문제 말고도 여러가지 호환성 문제가 발생할 수도 있다.
그래서 소프트웨어를 개발할 때 재사용성이 높게 개발해야 한다고 하는데, 이 말은 해당 소프트웨어 또는 모듈이 다른 곳에도 쉽게 곧바로 쓸 수 있도록 개발하는 것을 의미한다.
재사용성의 장점
개발 기간 단축
유지 보수 용이
리액트와 재사용성
리액트는 컴포넌트 기반의 구조로 되어있다. 이러한 각 컴포넌트들은 웹사이트의 여러 곳에서 반복적으로 사용될 수 있다. 이 말은 곧 하나의 컴포넌트가 계속해서 재사용될 수 있다는 말과 같다.
그래서 리액트 컴포넌트를 개발할 때 할상 쉽고 재사용 가능한 형태로 개발하는 것이 중요하다.
단점
방대한 학습량
계속해서 업데이트
높은 상태관리 복잡도
리액트에는 state라는 중요한 개념이 있는데, state는 쉽게 말해서 리액트 컴포넌트의 상태를 의미한다.
앞서서 Virtual DOM은 바뀐 부분만을 찾아서 업데이트를 한다고 했다. 여기서 바뀐 부분이라는 것은 state가 바뀐 컴포넌트를 의미한다.
성능 최적화를 위해서는 state를 잘 관리하는 것이 중요하다.
익숙해지더라도 웹 사이트의 규모가 커져 컴포넌트의 개수가 많아지면 상태 관리의 복잡도도 증가한다. 그래서 보통 큰 규모의 프로젝트의 경우 상태 관리를 위해서 리덕스, 보백스, 그리고 리코일 같은 외부 상태관리 라이브러리를 사용하는 경우가 많다.
참고 자료
Last updated