최종 수정일: 2021. 08. 06
React version: 17.0.2
이 시리즈를 통해 React를 얕게 다뤄보려 한다. 이름 그대로 얕게 보기이지만, 이제 막 React를 학습하려는 독자에겐 이또한 어려울 수 있으니 참고하도록 하자.
이 글을 쓰는 시점에서 보면 이제 React는 SPA를 만드는 도구(툴킷<라이브러리> 혹은 프레임워크, 컴파일러) 중에 단연 독보적이라 할 수 있다.
이제는 더이상 레거시를 위해서가 아니라면 프레임워크인 Vue, Angular를 통해 SPA를 구축하는 작업은 상대적으로 틀에 갖혀 불편하기도 하다.
더불어 컴파일러인 Svelte의 경우에는 2019년에 발표되어 생태계 자체가 없다시피 하고, 이를 이끌고 있는 커뮤니티 리더는 한계가 있다.
그에 반해 React는 커뮤니티 규모는 말할 것도 없으며, 그로 인한 방대한 생태계가 선순환되며 국내에서도 주류로 자리잡았다. 마치 VCS에서 git이 독보적인 위치에 있는 것처럼 React도 이제는 주류가 되었다.
물론 과거에는 다양한 단점이 존재했다.
대표적으로 라이프사이클, 상태 관리 등으로 인해 러닝커브가 높고, Class based Component는 불필요한 보일러플레이트가 많다거나, style을 따로 파일로 빼거나 StyledComponents등의 라이브러리를 통해 지정하는 등 다양한 단점이 존재했으나 최근에는 이렇다 할 단점이 없다.
아키텍처가 가벼운 서비스를 위해서는 React만을 독립적으로 사용해 Context로 전역적인 상태를 주입할 수도 있고, Recoil을 통해 상태를 관리할 수도 있다.
반대로 아키텍처가 무겁다면 오히려 더욱 관리하기 쉬워졌는데, Function based Component를 통해 보일러플레이트를 줄이고, 효율적으로 라이프사이클을 관리할 수 있어졌고, 비교적 프로젝트 구조를 자유롭게 설정할 수 있어 flexible하게 프로젝트를 관리할 수 있어졌다.
여기에 Recoil을 사용해 MobX, Redux 등의 전역 상태 관리 라이브러리가 가진 보일러플레이트와 러닝커브를 줄였고, lerna나 nx 등의 monorepo 구조를 사용하면 관심사를 분리하기도 유용해졌기 때문에 이제 더이상 단점을 찾기 어려울 정도가 되었다.
이러한 현 시점에서 [얕게 보기]라는 시리즈를 생산하는 이유는 내가 지금까지 겪은 타인의 React 프로젝트나 레퍼런스가 상당히 과거에 머물러있기 때문이다.
Web Front-end Engineering에 대한 관심이 높아짐과 동시에 이를 위한 입문 난이도의 자료는 다양하게 생산되고 있지만, 생태계의 성장에 비해 입문자들에 대한 불필요한 학습이 존재할 뿐더러, 대화를 해보면 React를 사용하지만 React의 공식 문서를 정독한 이가 드물고, 정독했다 한들 그것을 이해하고 있는 이가 전무다고 할 수 있기 때문이다.
더불어 React를 활용하거나 주변 기술(Redux, Next, MobX, …)을 사용하는 법은 알지만, React의 정수에 대한 이해와 그것을 추구하려는 노력을 하지 않는 이들 혹은 그것이 어려운 이들을 위해 내가 바라보는 React의 정수와 생태계가 추구하는 기술적 발전 방향에 대한 주관적인 이야기와 그에 따른 국내 React 생태계의 발전을 꿈꾸고 있기 때문이기도 하다.
이 시리즈의 주된 독자는 단연 React 사용자 혹은 관심자이지만, 단순하게 React만을 이야기하기보다 웹 기술 전반에 다양하게 활용 가능한 개발 방법론, 비교적 활발한 Back-end(특히 국내에선 Java) 진영의 아이디어(디자인패턴, 설계 기법 등)를 착안해 Web Front-end 진영에 발전을 가져오기를 희망한다.
