새 회사에 입사 후 온보딩 느낌의 과제를 받았다. 해당 과제는 기존 html, css, vanilla js로만 이루어진 코드를 리액트로 리팩토링하는 것이다. 다만 해당 작업은 결과물을 웹사이트로 배포하기 위한 것이 아니라 다른 프로젝트에서 사용할 수 있도록 모듈화 하는 것이다. 어떻게 해야 할지 알아보자.
과제
현 상황
현 회사는 리액트를 사용한 프로젝트가 없다. 또한 퍼블리셔 분들이 HTML, CSS를 이용하여 거의 완성된 템플릿을 만드시고 이를 프론트엔드 개발자가 받아 데이터와 인터렉션만 추가하는 구조이다.
따라서 내가 맡은 프로젝트는 리액트를 사용한 프로젝트를 본격적으로 가동하기 위한 시작이라고 할 수 있다.
리액트와 컴포넌트
리액트의 수많은 특징과 장점 중 하나는 컴포넌트 기반의 프로젝트를 만들 수 있다는 것이다.
그렇다면 컴포넌트 기반의 프로젝트는 무엇이 좋은가? 컴포넌트를 재사용하기 좋다. 대부분의 프로젝트는 반복되는 컴포넌트가 아주 많다. 리액트에선 컴포넌트의 공통점은 유지하고 미리 설정해놓은 props를 이용해 특정 부분만 바꿀 수 있으며 이를 이용해 깔끔한 결과물을 유지하면서도 재사용을 쉽게 한다.
또한 컴포넌트는 독립적이다. 따라서 컴포넌트를 개발할 때 다른 컴포넌트와의 연관적인 작용들에 대한 부작용이 줄어들고 컴포넌트를 테스트 하는 경우에도 아주 용이하다.
문제점
이전의 방식을 생각해 보면 분명한 문제가 하나 있다.
최근 리액트에서는 하나의 컴포넌트가 하나의 함수를 의미한다. 하나의 함수에서 return 하는 결과물이 하나의 컴포넌트가 되는 것(정확하게는 클로저 변수 등도 있지만..)이다.
따라서 컴포넌트자체는 단 한줄짜리 인풋이 될 수도 수십 줄의 레이아웃이 될 수도 있다.
이전의 방식은 다르다. 엄청 방대하고 모든 요소가 포함된 HTML이 있으며, 이를 이용하여 인터랙션등을 추가한다.
따라서 현재 만들어져있는 HTML을 분해하는 과정이 필요하다. 물론 HTML을 분리하는 것 자체가 어려운 것은 아니다. 하지만...
프로젝트의 지속성
문제는 이후의 프로젝트의 지속성이다. 만약 프론트엔드 개발자가 퍼블리싱된 HTML을 쪼개 모듈을 만든다고 생각해보자. 처음부터 큰 시간이 들겠지만 다 했다고 가정해보자. 그 이후에도 계속 디자인 변경사항이 생길 것이다.
그러면 그 디자인을 퍼블리싱해서 HTML을 만들것이다. 그럼 그 HTML을 또 프론트 개발자가 쪼개 모듈을 만들것인가? 너무 비효율적인 과정이다...
해당 프로젝트의 성공 유무는 이런 프로세스를 어떻게 설립하여 프로젝트가 지속되고 최신화 될 수 있는지에 달린 것 같다.
Storybook
Storybook은 컴포넌트를 문서화하고 라이브러리다. 굉장히 적은 노력으로 컴포넌트를 문서화할 수 있어 아주 좋다.
여러 대안을 서칭해봤으나, 역시 Storybook이 가장 유명하고 널리 쓰이고 예제도 많고 커뮤니티도 크다....
사용이 너무 쉬워서 글을 올리기도 그렇다. 허허..