안녕하세요.
국내 1위 IT 아웃소싱 플랫폼 위시켓입니다.
2021년 현재 최고의 리액트 앱을 만들기 위해 필요한 것은 무엇일까요?
2016년 이후 무엇이 변했을까요?
지금 가장 인기있는 라이브러리는 무엇일까요?
지난 몇 년 동안 리액트에 많은 변화가 있었고, 그 생태계도 눈에 띄게 발전했습니다.
오늘은 2021년 기준 최고의 리액트 앱을 만들기 위해 필요한 것들에 대해서 이야기를 해 보겠습니다.
※ 글 내용 내 포함되어 있는 전문 용어는 하단에 자세히 설명되어 있습니다 ※
01. 여전히 유효한 "리액트 방식으로 생각하기"
"리액트 방식으로 생각하기"의 핵심은 지금까지 크게 변하지 않았습니다. 리액트는 여전히 단방향 데이터 흐름, props, state 및 JSX를 핵심 요소로 내세웁니다. 어떤 컴포넌트가 데이터를 "소유"하고 어떤 컴포넌트가 데이터 출력을 담당하는지 결정하는 것만큼이나 디자인을 여러 컴포넌트로 나누는 것은 여전히 매우 중요합니다.
(용어설명)
01. JSX : 자바스크립트와 XML 구문을 합쳐서 탄생한 확장 문법으로 뛰어난 표현력으로 인해 코드의 가독성이 높다
02. 훅 vs 클래스 : 이제는 훅이 대세
최근 몇 년 동안 있었던 리액트의 가장 큰 변화는 클래스(Class)에서 훅(Hook)으로의 이동입니다. 훅은 리액트 16.8(2019년 2월)에 추가되었으며, 리액트 컴포넌트를 개발하는 표준으로 빠르게 자리매김했습니다.
처음 훅이 등장했을 때는 뭔가 이상해 보였습니다. 특히 오랫동안 개발을 해왔던 사람에게는 더욱 그랬죠. 함수를 넘나들며 상태값(state)을 유지하는 것처럼 보이는 변수는 마치 마법처럼 느껴지기도 합니다. 그러나 그 비밀은 배열(Array)에 있습니다.
훅의 동작 방식에 익숙해지고 usestate에 대한 감이 오더라도, 이어서 ueseffect 훅이라는 큰 산이 기다리고 있습니다. useeffect는 함수 컴포넌트에서 라이프사이클 메서드를 수행하는 방법에 대한 답을 제시합니다. 하지만 라이프사이클과는 전혀 다른 방식으로 동작합니다. 여기에서는 useeffect의 동작 방식을 이해하는 것이 핵심입니다. 어려워도 한번 이해하면, 문제를 해결하는 것이 점점 더 쉬워집니다.
(용어설명)
01. 클래스(Class) : 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀이다
02. 훅(HOOK) : 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능
03. 2021년 최고의 리액트 라이브러리
인기있는 라이브러리는 끊임없이 변하며 그 숫자 또한 꾸준히 증가하고 있습니다.
04. 리액트 애플리케이션의 라우팅
리액트 라우터(React Router)는 여전히 공고한 위치를 차지하고 있습니다. 이름만 봐서는 리액트의 일부처럼 보이지만, 사실은 별도로 배포되는 표준 라우팅 라이브러리입니다. 이를 사용하면 리액트 애플리케이션의 다양한 컴포넌트 뷰 사이의 탐색이 가능하고, 브라우저 URL을 변경할 수 있으며, UI와 URL을 동기화해줍니다.
05. 리액트 애플리케이션의 상태 관리
여전히 30~50%에 달하는 많은 앱이 리덕스(Redux)를 사용하고 있습니다. 리덕스에서 제공하는 공식 툴킷(Tookit)도 매우 그 인기에 한몫하고 있습니다. 이 개발 도구 모음은 훅과 함께 단순 반복 코드를 획기적으로 줄여줍니다. 리덕스를 사용하려는 경우 이 부분을 반드시 확인해보세요.
하지만 리덕스가 가지고 있는 사실상 표준(de-factor)의 지위에서 어느 정도 내려온 것도 사실입니다. 점점 더 많은 개발자가 리액트가 기본적으로 제공하는 상태 관리도 일반적으로 사용하기 충분하다고 느끼고 있습니다.
또한, 예전에는 리덕스가 필요했던 곳에 대신 사용할 수 있는 새로운 특화 라이브러리도 등장했습니다. 이에 대해서도 잠깐 이야기해 보도록 하겠습니다.
리액트가 기본으로 제공하는 Context API를 제외하면 리덕스 대신 가장 많이 사용하는 라이브러리는 MobX일 것입니다. 리덕스가 명시적이고 기능적이라면 MobX는 이와는 반대의 접근 방식을 가지고 있습니다. 내부적으로 ES6프락시를 사용하여 변경 사항을 감지하므로, 추적 가능한 데이터를 업데이트하는 것이 전통적인 대입 연산자를 사용하는 것만큼이나 쉽습니다.
(용어설명) 프록시(Proxy) : 객체는 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 새로운 행동을 정의할 때 사용하며, 기존 객체를 건들지 않고도 새 기능을 추가하거나 기존 기능을 수정할 수 있다.
06. Context API
전역 상태(global state)의 변경이 거의 없는 항목(현재 사용자, 현재 테마, 현재 언어 등)으로 구성된 경우 해당 항목을 전달하기 위해 라이브러리를 사용할 필요가 없습니다.
Context API와 uescontext를 같이 사용하면 usereducer가 관리하는 간단한 전역 상태를 전달하는 것이 매우 쉬워집니다.
Context API는 리액트 16.3에서 새롭게 태어났습니다. 기존에 있던 contexttype이 사라졌고, 라이브러리 개발자가 아니라면 context의 사용을 피하라는 기존 지침 또한 사라지게 됐습니다. usecontext 훅은 이를 정말 사용하기 쉽게 만들어줍니다.
07. 데이터 패칭 (Data Fetching)
데이터 가져오기 패칭 측면에서 보면, 리덕스나 글로벌 저장소에 모든 것을 저장하는 방식은 점차 사라지고 있습니다.
react-query는 데이터를 가져오고 로딩/성공/오류 상태를 편리하게 관리할 수 있게 만들어줍니다. 컴포넌트를 경계를 넘어 전역 데이터 캐시를 관리해주므로 이에 대해 크게 고민할 필요가 없습니다.
08. React-query
React-query는 특정한 라이브러리라기보다 개발 패턴에 관한 것입니다. (이에 대한으로 swr를 사용할 수도 있습니다)
여러 항목을 보여주기 위해 목록 화면인 List page, 상세 화면인 Detail page가 존재한다고 가정해 보겠습니다. List page를 열면 페이지는 위젯을 포함하여 필요한 모든 것들을 불러옵니다.
사용자가 Detail page 중 하나를 클릭할 때 항목을 사전에 불러올 수 있도록 해당 데이터를 리덕스 또는 기타 공간에 보관할 것입니다.
그런 다음 사용자가 뒤로 가기를 눌러 List page로 돌아갈 때는 이미 필요한 데이터를 가지고 있으므로 항목을 바로 표시할 수 있습니다. 이는 모두 잘 동작하지만 아주 간혹 예외가 있습니다. 사용자가 List page를 로드하고 Detail page를 클릭하는 사이에 항목이 더 이상 유효하지 않게 되면 무슨 일이 벌어질까요? 혹은, Detail page를 보고 있는 동안 일부 리스트에 새 항목이 추가되면 어떻게 될까요?
이 경우 데이터를 다시 가져와야 하는 시점은 언제일까요? 목록을 전체를 다시 불러오거나 하나만 교체하기 위해 단일 항목을 가져오는 경우 서로 다른 두 가지를 응답을 어떻게 하나로 합칠 수 있을까요? 리덕스에서는 리듀서(reducer)가 이를 처리하지만, 대부분 직접 코드를 작성해야 하는 것이 사실입니다.
만약 페이지네션(pagination)이 필요하거나 캐싱을 구현하는 경우, 혹은 모든 페이지를 한 번에 다시 불러올지 등을 생각하기 시작하면 훨씬 더 복잡해집니다.
이 모든 것이 "클라이언트 데이터 관리"라는 범주에 속하며, 우리는 오랫동안 이를 위해 범용적인 상태 관리 라이브러리를 사용해 왔습니다. 그리고 우리는 이러한 문제를 앞으로도 계속 마주치고 해결해 나가야 할 것입니다. 그렇지 않으면 이런 문제가 발생하지 않기를 빌거나, 문제가 발견한 이후 해결책을 찾을 수밖에 없습니다. 반면 react-query와 같은 라이브러리는 문제를 다르게 해결합니다. 이는 애플리케이션에서 데이터를 가져올 것을 알고 있으며, 일부 키(복수의 item 또는 중첩 item [id])를 사용하여 데이터를 모든 페이지에서 캐시 하고자 한다는 것을 알고 있습니다. 또한, 일정 주기에 맞춰 데이터를 업데이트하거나 사용자가 앱에서 다른 탭으로 갔다가 다시 돌아올 때 등 수시로 해당 데이터를 업데이트해야 한다는 것도 알고 있습니다.
이러한 항목은 전역적으로 접근 가능한 캐시에 저장되기 때문에, 접근이 필요한 모든 컴포넌트는 useQuery('item' , fetchltems)를 호출하여 해당 데이터를 가져올 수 있으며 아직 사용할 수 없다면 가능할 때 자동으로 가져옵니다. 그리고 idle / loading / error / success 상태도 같이 관리해줍니다.
Promise-returning 함수를 사용하므로 fetch나 axios 또는 어떤 데이터 패치 도구와도 함께 사용할 수 있습니다. 이처럼 추상화가 훌륭하게 구현되어 있으므로 react-query를 통해 지금까지 HTTP 호출을 위해 사용하던 방식을 바꿀 수 있으며, 데이터 패치에서 흔히 볼 수 있는 무거운 반복 작업을 획기적으로 줄일 수 있습니다.
(용어설명)
01. 페이지네션(pageination) : 많은 양의 콘텐츠를 여러 개 페이지에 나눠서 보여주는 사용자 인터페이스. 게시판 하단에 있는 페이지 번호가 가장 대표적인 예이다.
09. 대세로 자리 잡은 상태 머신
Xstate는 복잡한 로직을 구현하는데 탁월한 상태 머신(state machine)을 만들기 위한 라이브러리입니다. 사실, 복잡하지 않은 일반적인 로직 구현에도 매우 유용하게 사용됩니다. 많은 불리언(boolean) 연산이 필요하거나 많은 변수를 업데이트하고자 할 때 XState를 한 번 검토해보세요. egghead.io를 방문하면 Kyle Shevlin이 소개하는 훌륭한 XState 강좌를 볼 수 있습니다.
리액트에서 기본적으로 지원하는 Robot이라는 기능도 있습니다. 상태 머신이 왜 유용한지 이해하고 싶다면 제가 Robot을 사용하여 만든 확인 모달(confirm modal) 예제가 도움이 될 것입니다.
10. 번들러(Bundler)
웹팩(Webpack)은 여전히 많이 쓰이고 있습니다. 어느덧 버전 5까지 출시됐으며 설정 구문이 v2와 v3 걸쳐 많이 변경되었습니다.
요즘에는 대부분 개발자가 새로운 앱을 만들기 위해 Create React App을 사용합니다. 이는 매우 좋은 방식이고 사용자 꼭 필요한 경우가 아니라면 웹팩이 굳이 필요하지 않습니다. 리액트가 제공하는 기본 기능은 뛰어나며 커스터마이징이 필요한 경우 craco가 도움이 될 것입니다.
11. 폼(Form)
Formik 및 react-hook-form이 현재 가장 많은 인기를 누리고 있고, hook-form이 조금 더 앞서나가고 있습니다.
12. 서스펜스 (Suspense)
모두가 오랫동안 기다리고 있는 서스펜스 기능의 출시는 여전히 불투명합니다. 리액트에 이미 포함되어 있기는 하지만 실험 모드로 제공되기 때문에 운영 환경에서 사용하는 것은 권장하지 않습니다. 제공되는 API가 언제든지 바뀔 수 있기 때문입니다.
13. 서버 컴포넌트
가장 최근에 개선된 부분은 리액트를 지원하는 서버사이드 프레임워크와 함께 동작하는 컴포넌트로, 서버에서 렌더링을 수행합니다. 이것 역시 아직 실험 모드로 제공됩니다. 매우 멋진 기능이며 리액트 생태계에 적지 않은 파급력을 가져오리라 예상합니다. 자세한 내용은 리액트팀의 공식 발표자료와 데모 영상을 확인해보세요.
이 글은 국내 1위 아웃소싱 플랫폼 위시켓에서 발행한 글입니다.
위시켓은 9만명의 IT 전문가와 함께하고 있어
다양한 카테고리의 IT 전문가를 빠르고 안전하게 만나보실 수 있습니다.
위시켓에 대해 더 궁금하거나, 빠르게 IT 전문가와 만나보고 싶으신가요?
▶ 참고문헌
01. Ravi Sanapala. World of React in 2021
'아웃소싱 꿀팁' 카테고리의 다른 글
| 3가지 아웃소싱 모델 : 고정가격 vs 시간제 vs 전담팀 (0) | 2021.10.15 |
|---|---|
| 2021년, 나도 프리랜서 웹 개발자가 되어볼까? (0) | 2021.10.14 |
| 리액트 클린 아키텍처 (0) | 2021.10.13 |
| 뛰어난 비즈니스 감각을 갖추려면 크게 생각하라 - 큰 그림을 그릴 줄 아는 비즈니스 리더가 되는 방 (0) | 2021.10.08 |
| 구글이 제시하는 데이터 분석 6단계 (0) | 2021.10.07 |