리액트 실력을 일취월장 하는 법
연봉 올라가는 소리가 들리는 즉시 전력 프런트 개발자가 되는 방법
1. 상태 관리
리액트를 사용하는 회사는 대부분 상태 관리에 대해 큰 고민을 할 겁니다. 왜냐면 이걸 진짜 잘하는 사람이 전국에 많지 않기 때문이죠. 특히 리액트의 상태 관리는 트렌드의 변화를 따르고 있습니다. 제 기억에는 리액트 초기를 조금 지난 시점에선 MobX가 가장 많이 사용됐던 것 같습니다. 컴포넌트 수준에서 상태 관리나 Context API를 사용하는 경우도 많았죠. 그러나 MobX로 처리하기 힘든 여러 이슈들이 발생하고 나니 리덕스의 정교함 + 여러 비동기 미들웨어에 대한 필요성이 대두됐습니다. (물론 시기상 리덕스는 예전부터 존재했습니다.)
리덕스는 어마어마한 대포와 같습니다. 상태 관리의 끝판왕처럼 등장해서 여러 무기들(saga, thunk...)을 장착할 수 있었죠.
하지만 리덕스의 큰 문제는 너무 어렵다는 점입니다. 메커니즘 자체도 어렵고, 사용하는 이유를 제대로 이해하지 못한 분들도 많이 있었습니다.(제대로 리덕스를 쓰려면 FLUX 개념부터 쌓고 와야 하죠) 어렵다는 건 몇 가지 다른 문제도 야기시키는데 가령 아무도 무엇이 정답이라 말하기 힘든 상황을 만듭니다. 코드를 쓸 수 있는 방법이 많아지고, 사용되는 모듈에 최적화되는 스타일에 따라 변경될 수 있는 여지가 많다 보니 각 코드를 정량적으로 무엇이 낫다 말하기 힘들어졌습니다.
현재는 리덕스의 어려움을 지나 "쉽게, 빠르게 가자!"라는 이유에선지 리코일이 인기를 얻고 있습니다.
제가 생각할 때 리액트의 상태 관리는 리액트 개발자에게 있어서 숙명과 같고, 이를 제대로만 하더라도 회사에서 가장 이쁨 받는 개발자가 된다는 건 확실해 보입니다. 그럼 리액트의 상태 관리 어떻게 공부하면 될까요?
제 경우에는 시중의 리액트 코드 패턴이란 패턴을 모조리 쓸어버렸습니다. 제가 가진 리액트 책만 해도 10권이 넘는 거 같은데, 책을 여러 권 읽다 보면 다음과 같은 결론에 이를 수 있습니다.
상태 관리에서 중요시하는 점들
여러 책에서 우리가 발견할 수 있는 건 단 하나의, 불변의, 최고의 패턴이 아닙니다. 도리어 상태 관리에 대한 견고한 개념과 이를 위한 도구들의 이해에 가깝습니다. 무엇이 좋다를 말하기 위해서는 무엇이 나쁜지를 알아야 합니다. 많은 라이브러리는 기존의 라이브러리들이 해결하지 못한 문제가 있기에 제작된 것입니다. 책도 마찬가지로 각각의 책마다 다른 책에서 담지 않은 몇몇의 내용들을 담기 위해 노력하고 있고, 차별화를 두려고 합니다. 그럼에도 불구하고 모든 책에서 동일한 점을 강조한다면 그건 정말 중요한 것일 겁니다.
코드 패턴과 상태 관리의 조화
책에서 발견할 수 있는 두 번째는 코드 스타일링의 아이디어입니다. 몇몇의 리액트 서적에서는 여러 코드 아이디어를 알려주는데 이를 상태 관리에 비교해 생각해볼 여지가 있습니다. 렌더 되는 횟수를 줄이고, 성능은 끌어올리고, 전체 메모리는 적게 잡히면서, 단방향 데이터의 흐름을 만들어 내는 것은 단순히 상태만 좋다고 완성되는 게 아닙니다. 기반이 되는 좋은 코드 패턴(컴포넌트나 함수 등)이 받쳐줄 때 발휘될 수 있습니다.
책이 자신의 스타일이 아니라면 여러 온라인 아티클을 확인하는 방법도 좋습니다. 제가 최근에 인상적으로 본 글은 우아한 형제들 기술 블로그에 올라온 'React에서 MobX 경험기'라는 글입니다. 다른 개발자들과 기업에서 어떤 식으로 일을 하고 있는지 살펴보는 건 무척 중요한 일입니다. 코로나로 오프라인 밋업이나 세미나가 줄어든 시점에서는 온라인에 올라온 자료들을 적극적으로 참고해 보는 것도 중요해 보입니다.
2. 자바스크립트
앞서 이야기한 것처럼 상태 관리는 프런트엔드의 심오한(어려운) 부분이며, 이를 위해서는 여러 책들을 통해 아이디어를 얻는 걸 추천했습니다. 하지만 프런트 개발자들이 가장 많은 일을 하는 부분은 결국 자바스크립트 코드를 쓰는 것입니다.
JS의 기본으로 돌아가자
여러분은 자바스크립트를 잘 알고 있나요? ES5, ES6 이후의 문법들은 어느 정도 숙지하고 있나요? 리액트는 근본적으로 js, jsx와 같은 형태로 자바스크립트 파일이기 때문에 코드를 잘 쓰기 위해선 자바스크립트를 기가 막히게 잘해야 합니다. 이는 과거의 프런트엔드 개발자를 보면 더 와닿습니다.
리액트가 존재하지 않던 고대의 시대를 생각해봅시다. 그때는 jQuery라는 유물을 사용해 온갖 일들을 에러 없이 처리하기 위해 고생했습니다. 프런트로 구현할 수 있는 게 제한적이고 데이터의 통제가 어렵다 보니 제대로 만들기 위해 바닐라 자바스크립트, HTML 스펙, 브라우저 스펙 등을 깊게 파는 경우가 많았습니다. 그뿐 아니라 여러 자바스크립트 코드 디자인 패턴도 널리 사용됐습니다. 여려분은 다음의 코드 디자인 패턴 중 몇 개나 알고 계신가요?
Singleton
Factory
Iterator
Decorator
Strategy
Facade
Proxy
Mediator
Observer
위의 코드 디자인 패턴은 현재는 의식적으로 사용하지 않지만 과거에는 jQuery나 바닐라 자바스크립트의 활용에 적극적으로 사용됐었습니다. 저는 과거의 자바스크립트 서적을 보면서 리액트 코드에도 이와 같은 디자인 패턴을 활용할 여지를 생각해보곤 합니다. 위의 디자인 패턴은 그냥 나온 게 아닌 여러 문제점들을 해결하는 좋은 방법으로 존재했기 때문이죠.
리액트를 잘하기 위해선 자바스크립트를 잘해야 합니다. 그리고 자바스크립트를 잘하기 위해선 최신 문법을 알고 활용하는 것도 중요하지만 좋은 코드 패턴의 변화를 학습하는 것도 중요합니다. 리액트 온라인 강좌나 블로그에 나온 스니펫 수준의 코드만 봐서는 깊은 인사이트가 생길 수 없습니다.
3. 라이트하우스
고수는 왜 고수일까요? 남들이 못하는걸 쉽게 하니까 고수입니다. 실력은 어떻게 늘리나요? 누가 봐도 어려운 걸 훈련해서 잘하면 고수가 됩니다. 실력이 늘기 위해선 자신만의 어려운 프로젝트가 필요합니다. 도전적이고, 현재 자신의 실력만으로는 구현하기 힘든 프로젝트를 시도해봐야 합니다. 새로운 모듈을 사용해보고, 말도 안 되는 미션을 진행해봐야 합니다.
한 가지 아이디어를 드리자면 다음과 같습니다. 크롬 개발자 도구를 보면 라이트하우스라는 게 있습니다. 웹 애플리케이션의 성능을 평가해볼 수 있는 쉬운 도구입니다. 검사를 돌려보면 좋은 사이트는 여러 지표가 좋게 나올 뿐 아니라 개선점도 많이 나타나지 않습니다. 이 라이트하우스를 켜고, 자신이 만들었던 과거의 프로젝트를 검토해보세요. 라이트하우스에 나타난 모든 이슈를 한 번 해결해보십시오. 어마어마하게 힘들 겁니다.
구글 홈페이지의 라이트하우스 성능 평가(데스크톱 기준, 다크 모드로 나타남)아마도 리액트 앱은 높은 확률로 고점수가 나오기 힘듭니다. SPA라는 점이 기인하죠. 하지만 여러분의 목숨이 걸렸다고 가정하고 성능 지표를 90점이 넘도록 만들어보세요. 이미 90이 넘겼다면 한 번 100점에 도전해보세요. 렌더링 속도, CSS 최적화, Lazy loading이나 API 최적화 등 수많은 장치가 환상적으로 완성되지 않고는 고득점이 불가능할 겁니다.
많은 개발자들이 자신은 실력 향상을 원한다고 말하지만 정작 성적표를 보는 일은 유쾌해하지 않습니다. 성적표를 보세요. 자주 보시고, 자신의 프로젝트를 개선하세요. 높은 연봉을 받는 개발자가 하는 일은 단순히 코드 쓰는 일이 아닙니다. 어마어마한 양의 코드를 개선시키고, 더 나은 인사이트를 제시할 수 있어야 높은 연봉의 개발자가 될 수 있습니다. 이 과정으로 직행하는 방법은 무엇이 성능을 저해하는지 알아야 하며, 무엇이 60점, 70점, 80점짜리 코드인지 알아야 합니다. 그래야 90점, 100점의 코드도 쓸 수 있습니다.
