근황: 리액트 학습

근황

리액트 학습 중이다.

• 패스트캠퍼스에서 김민태님 강의
• 인프런에서 이재승님 강의
• <리액트를 다루는 기술> 김민준님 책

세가지를 병행해서 보고 있다. 상태 관리 쪽을 좀 자세히 살펴보고 있는데, 이제 좀 구조가 눈에 들어온다.

Vue로 개발할 때는 Vuex만 있으면 되었는데 리액트에서는 선택지가 굉장히 많아서 처음에는 좀 당황스러웠다.

Redux, Redux-thunk, Redux-saga... 요새는 swr, react-query까지.

생태계의 히스토리를 잘 파악하지 못해서 '리액트 동네는 복잡한 동네구나' 싶었다.

근데 이번 학습을 통해서는 상태 관리에 대해서 다시금 인사이트를 얻게 되는 시간이 된 것 같다.

이번 학습을 통해서 알게된 바는 상태 관리를 사용해서 캐시 레이어에 대한 통제권을 개발자가 갖게 한다는 점이다.

사실 나는 현업에서 GraphQL을 사용하면서 Apollo Client를 통해 캐시 레이어를 관리하며 사실 상태 관리가 굳이 필요하지 않았다. (지금와서 보니 REST API를 사용할 때 당시에는 상태관리를 제대로 이해하지 못하고 사용해왔다는 것을 느낀다.)

이전에는 단순히 컴포넌트의 깊이가 깊어질 때 발생할 수 있는 문제 (props drilling, 그로 인해 발생하는 열차 충돌 문제 등으로 인한 디버깅의 어려움들...)에서 상태 관리를 써왔는데, 새삼 새롭게 다가왔다.

학습

학습은 위에 적어놓은 세 가지를 병행하며 보았다. 각기 다른 매력으로 내게 지식을 전달해주었는데, 각자의 특징을 간략하게 적어보자면...

• 리액트를 다루는 기술 (김민준님): 초보자 대상으로 쓴 책 같다. 야너두 할수있어 느낌으로 친절하게 알려주기에 첫걸음을 떼기 쉽게 해준다.
• 패스트캠퍼스 김민태님 강의: 리액트, 리덕스 등의 라이브러리를 직접 만들어보면서 내부 동작 원리를 설명한다. 초보자들이 듣기에는 좀 어려울수도 있겠다 싶지만서도, 주니어 때 내게 이런 강의가 있었더라면 얼마나 좋았을까? 라는 생각이 드는 강의이다.
• 인프런 이재승님 강의: 조곤조곤 설명을 잘 해주신다. 학습하며 탄탄하게 기초를 다질 수 있을 뿐 아니라, 프로젝트를 만들면서 진짜 실무에서 어떻게 쓰는지를 자세히 알 수 있었다.

강의를 들으며 사이드 프로젝트를 진행하면서, 리덕스와 사가를 이용해서 어떻게 하면 optimistic update를 할 수 있을까를 고민했다.
나름대로 고민해서 코드를 작성해보았지만 사실 어설플수밖에 없었다. 구글링을 하면서 optimistic update에 대해서 검색을 많이 해보았다
redux 생태계 내에서는 redux-toolkit 외에는 딱히 괜찮은 방법이 없어보였다. redux toolkit 자체는 thunk를 기반으로 해서 비동기 처리를 하기도 하고, (비슷한 역할을 하는 라이브러리를 또 끼어넣고 싶지 않았다) 그간 saga 기반으로 한 코드 근간이 흔들리는 것이기에 좋은 방법이라고 생각이 들지 않았다.
검색하다보니 react-query, swr 등의 도구가 왜 나타나게 되었는지도 이해가 갔다. 결국 캐싱 때문이구나.
여튼 하고싶은 말을 다시 하겠다. 이재승님 강의 들으며 정말 좋았던 점은...
사이드 프로젝트 진행하면서 고민했던 부분이

1. optimistic update
2. 이미 한번 불러온 api call에 대해서, 이미 로딩 된 것에 대해 어떻게 깔끔하게 처리할 수 있을지 고민을 많이 했고, 자료도 찾아보았는데 뭔가 매끈한 처리 방식이 보이진 않았다.

그 와중에 이재승님 강의의 담당자 찾기 프로젝트를 하면서인데, 와, 이 부분을 딱! 다뤄주시며 내 가려운 곳을 긁어주셨다.

학습 후기

리액트 학습을 하면서 추천하고 싶은 로드맵은
패스트캠퍼스 김민태님 강의 -> 리액트를 다루는 기술 책 -> 인프런 이재승님 강의 순이다.
또한 학습하면서 도움이 되었던 방식은 떠올려보자면...

1. 처음엔 일단 강의를 듣고, 코드를 따라쳐본다.

처음 접하면 뭐든지간에 낫 놓고 기역자도 모르는게 정상인 듯 하다.
그 다음에는 코드를 다 날리고 내가 직접 짜보는 것이다. 그러면 어느정도는 잘 하다가 중간에 막히는 경우가 있는데, 이 때 내가 뭘 모르는지 알 수 있다.

2. 변칙을 준다.

사실 인프런과 리액트를 다루는 기술 책에서는 redux 부분을 다루면서 immer와 redux-actions 라이브러리를 사용했다.
그러나 나는 딱히 이에 대한 메리트를 깊게 느끼지 못해서 사용하지 않았다.
또한 회사 프로젝트에서도 두 라이브러리를 사용하지 않기에 최대한 회사 프로젝트와 흡사하게 코드를 가져가고자 노력했다. (회사 프로젝트와 라이브러리 구성을 최대한 비슷하게 맞춰놓고 코드작성을 하니까 확실히 회사 코드 리딩하는데 도움이 많이 된 듯 하다.)

이렇게 함으로써 사실 책/강의와 내 코드의 모양새는 많이 달라지게 되었는데, 이를 통해서 또한 해당 라이브러리 (immer, redux-actions) 를 쓸 때의 장점을 직접 생각해보고 알아갈 수 있었다. ("아래"에 따로 적겠다.)

3. 다양한 배경 지식이 있음은 학습에 큰 도움을 준다.

사실 난 현업에서 계속 Vue를 다뤄왔기에 진입장벽이 상대적으로 낮았던 것 같다.

리덕스 비동기 상태 관리를 이해한 후에는, 아폴로 클라이언트를 다루며 겪게 된 optimistic updates를 어떻게 적용할지 나름의 고민과 코드 작성을 했다. 물론 어설프지만, 충분한 고민을 한 뒤에 알게되는 정답과 먼저 답안지를 보고 느끼게 되는 감동의 차이는 분명 하늘과 땅 차이인듯 하다.

이래서 다양한 것들을 많이 접해보는 게 중요한거구나 싶다.

앞으로 할 것들

1. 제로 베이스부터 내가 짠 코드를 복기해보고자 한다. 영상으로 기록을 남겨볼까.
2. 어떻게 코드를 확장 및 개선시켜나갈 수 있을지 생각해보자.
3. 리덕스 사가에서는 페이지네이션 n+1 문제를 어떻게 해결하려나 궁금해진다. 아폴로 클라이언트에서 굉장히 애먹었던 문제인데...

코드는 여기에 있다. https://github.com/yunseop-dev/react-todo

아래

1. immer는 확실히 코드량이 줄게 된다. 불변성을 다 따져가며 코드 짜간다는게 여간 불편하지 않을 수 없다. 이럴 땐 vue / vuex가 그립기도...
2. redux-actions를 쓰면서 느낀 것은, reducer를 짜며 switch문에서 type을 받았는데, 하다보니 action 내의 payload를 타입별로 묶어서 사용할 수 없다는 것이 좀 불편했다. 변수 선언을 해도 switch문 내에서는 중첩된 변수명을 사용할 수가 없어서, 이래서 redux-actions 쓰는구나 싶었다.