리액트 쓰는 이유

요약

1. 웹 페이지를 컴포넌트라는 단위로 조각낸다.
2. 페이지 갱신이 필요할 때 바뀌는 컴포넌트들만 쏙쏙 골라서 갱신한다.
3. 22년인 현재까지도 프론트엔드 생태계의 우량아, 쓰는 사람이 많다는 것

다른 이유도 더 많겠지만 리액트 찬양론자는 아니기 때문에 꼭 알아야 할 핵심 내용만을 적어봅니다.

 

페이스북은 리액트를 왜 만들었을까?

프론트엔드 개발 씬에 SPA, Single Page Application이 생겨난 후에 

SPA계에선 Angular, React, Vue 삼대장이 탄생했다.

구글에서 만든 앵귤러는 사실 망해가는 추세,

1인 기업 에반 유가 만든 Vue는 오픈소스의 특징을 강하게 띄고 있으며,

페이스북에서 만든 React가 셋 중 가장 사용자를 많이 보유하고 있는 편이다.

위는 페이스북의 화면인데, 화면의 전체가 죄다 손가락으로 터치하거나 마우스로 클릭할 수 있으며

그때마다 웹페이지는 상호작용으로 우리에게 보답한다.

 

그런데 위 페이지만 봐도 이미지 한두개있는것도 아니고

우리가 건드릴 때마다 페이지 전체를 싸그리 갈아엎는다면

글씨 하나 고치겠다고 노트 한 페이지를 뜯어버리고 글을 새로 쓰는 것과 마찬가지이다.

아마 지우개를 써서 고치고 싶은 글자만 지우고 새로 쓰는게 가장 효율적인 방법 아닐까 생각한다.

전체 페이지를 갱신하는 대신 변경할 부분만 갱신해서 마치 Single Page에서 작동하는 듯 하다는 의미의 SPA다.

상호작용이 많은 페이스북에서 React를 개발한 것은 그리 놀라운 일이 아닐 것이다.

 

컴포넌트

위의 페이스북 페이지에서처럼 많은 사이트에서 중복되는 부분이 있기 마련이다.

컴포넌트는 위와 같이 중복되는 틀을 하나 만들고 이름, 이미지 등의 값만 다르게 넣어 페이지에 나타낸다.

이를 통해 컴포넌트는 불필요한 행동을 절약할 수 있다.

 

페이지 갱신

만약 친구목록 중 누군가가 로그아웃을 하거나 내 스토리의 내용을 수정한다고 가정해보자

첫 번째 케이스에는 로그아웃한 사람의 컴포넌트만 사라지게 하면 되는 것이고

내용을 수정하면 해당 스토리 컴포넌트만 새로 갱신하면 될 것이다.

바뀐 내용이 있을 때 페이지 전체를 새로 갱신하는 대신 필요한 부분만 수정하는 것이

SPA의 장점이자 특징이고 React는 이를 컴포넌트를 통해 구현했다.

 

Virtual Dom

기존의 웹 페이지의 DOM트리가 위와 같다고 생각해보자.

리액트는 Real Dom트리를 복사하여 Snapshot을 생성해 Virtual Dom트리를 두 개 생성한다.

그리고 여기서 하나의 컴포넌트가 수정되었다면 아래와 같이 새로운 스냅샷 가상돔을 생성한다.

이 새로운 가상돔1은 기존의 가상돔2와 비교를 하고 변경해야 할 부분을 캐치한다.

그렇게 가상돔 두 개를 비교하고 변경점을 찾으면 그때 실제 DOM에 적용한다.

 

One way data flow

컴포넌트라는 틀이 있으면 그 틀에 채워질 내용이 있을 것이다.

리액트에서는 그 내용이 크게 state, props가 있는데 본 글에서 자세하게 다루진 않을 것이다.

간단하게 예시를 들자면 페이스북 유저 데이터 리스트를 props이라 가정했을 때

이 데이터는 최상단의 컴포넌트에서부터 유저 리스트를 나타내는 컴포넌트의 방향으로 흘러간다고 보면 된다.

여기서 중요한건 방향이다. 실제로 데이터가 최상단에서 시작하지 않을 수도 있다.

다만 어디서 시작하던 데이터는 몇 가지 예외상황을 빼고선 보통 한 방향으로만 흐른다.

 

좋은 리액트 개발자가 되기 위해서는

구상할 웹 페이지를 컴포넌트로 잘 조각낸다. (응집도를 높이고 결합도를 낮춘다)

페이지에서 데이터 흐름이 어떻게 흐를지 생각하고 그에 맞는 구조로 코드를 작성한다.