Today I Learned
내일배움캠프에 합류하고 새로운 것들을 마구 흡수하기 시작하면서 머릿속에 자꾸만 떠오르고 실제로 종종 뱉는 말이 있다. 바로 주화입마(走火入魔) 라는 말인데... 무협 소설이나 판타지 소설에서 흔히 찾아볼 수 있는 말로, 본인 그릇에 맞지 않는 내공을 주입받았을 때 스스로 그것을 통제하지 못해 내공이 역류하거나 폭주하는 현상을 말한다. 여기서 무공 이야기를 할 건 아니고... 내가 사용하는 맥락에 맞게 바꾼 의미는 아래와 같다.
본인이 알고있는 CS 지식 또는 언어에 대한 이해를 크게 뛰어넘는 개념이나 메커니즘을 이해하려고 계속해서 파고들다가 오히려 지금 가진 지식마저도 오염되어버리는 상태
주화입마에 빠지다
캠프에 합류하기 전에는 혼자 JS, React, Next.js 까지 나름대로 공부를 했었다. 대부분 공식 문서의 튜토리얼을 따라가 보고, 나름대로 작은 프로젝트를 하나 만들어보는 것까지 해 봤는데, 그 때 주화입마를 호되게 겪었었다.
리액트는 엄연히 라이브러리라지만 그 볼륨이나 프로젝트에 미치는 영향력은 프레임워크 수준이라고 볼 수 있다. 실제로 프레임워크라고 주장하는 사람도 있고. JS를 좀 배웠다고 척척 익히고 해낼 수 있는 종류는 아닌 건 확실하다. 클로저든 뭐든 척척박사라면 이야기가 다르겠지만.
메서드라던지 리액트 생명주기, 리렌더링, dependency array 등의 제반 지식이 전혀 없는 채로 useState, useEffect, react-router-dom 등을 써서 리액트 앱을 만들었었다면 믿을 수 있겠는가? 나름대로 이해해보려고 애를 썼지만 선형적인 배움 아닌 파편적인 지식은 계속해서 발목을 붙잡는다. 그리고 한번씩 발목을 잡히다 보면 시간이 뭉텅 뭉텅 사라지고, 사라진 시간과 제자리인 내 앱을 보며 괴로워하고... 또다시 stackoverflow에 들어가고..주화입마에 빠지고...
이제는 다르다
서론이 길었다. 주화입마에 빠질 뻔 했네... 지금은 확실히 다르다. 지난 5주간 JS를 공부하고 최근 2주가 좀 안되게 리액트를 커리큘럼에 맞춰 학습하고, 프로젝트를 통해 실습하고 다른 캠퍼들과 같이 공부하다 보니 그때와는 지식의 깊이가 달라진게 느껴진다. 오늘 튜터님에게 질문을 하며 더욱 체감했다.
오늘의 질문 내용은 useRef 에 관한 것이였는데, 팀원 중 한 분이 useRef 에 대해 잘 모르겠다고 물어왔다. 팀원분께서는 이 훅을 사용해 저장해둔 값이 변한 것을 어떻게 확인할 수 있는지 궁금해하셨는데, 사실 당시에는 질문을 잘 이해하지 못해서 이해해보려고 노력하다가 일단 튜터님을 찾아가자고 했다.
튜터님께서는
- react에서 virtual DOM 이라는 컨셉을 고안한 이유
- virtual DOM 과 DOM 의 차이
- react에서
state변화를 감지했을때 DOM을 업데이트하는 방식 querySelector메서드와useRef의 차이
를 들어서 팀원분에 질문에 대한 답을 해주셨는데, 개인적으로는 질문의 범위를 조금 벗어난다고 생각했으나 이해할 수 있는데까지 이해해보자는 마음으로 잠자코 듣고 있었다. 튜터님의 설명을 요약하면 아마도 다음의 내용과 비슷할 것이다.
querySelector vs useRef
useRef 는 React 식의 DOM selector, 그러니까 virtual DOM selector 이다. 하지만 우리에겐 이미 vanilla JS 를 익히면서 익숙해진 querySelector 가 있다.
useRef와querySelector중 어느 것을 사용하는 것이 좋을까?
판단을 위해 리액트의 virtual DOM 과 DOM에 대해 잠깐 생각해보자.
virtual DOM은 React에서 DOM요소의 업데이트를 위해 사용하는 DOM의 복사본이자 설계도로. state의 변경이 일어났을 때, 즉 rendering이 trigger 되었을 때 virtual DOM과 원본 DOM 사이의 변경사항(diff)을 파악한 다음 rendering 과정에서 diff 부분만 업데이트한다. 전체가 아닌 일부만 업데이트함으로써 성능을 보장하는 것이다. 그런데 여기서 원본 DOM selector 인 querySelector 등을 이용하면 어떻게 될까? 아마도 virtual DOM을 업데이트 한 다음 -> 렌더링을 하고 그 과정에서 DOM도 추가로 업데이트를 해 줘야 하기 때문에 미미하게나마 load가 추가될 것이다. 리액트에서 퍼포먼스를 위해 virtual DOM 이란 방식을 사용하는데 굳이 거기서 DOM 조작 메서드를 사용할 이유가 없다. 즉
리액트를 사용해 앱을 만든다면 일관성있게 virtual DOM만 조작하는게 좋다.
답변의 내용을 하나의 맥락으로 정리하려다보니 조금 빠진 부분도 있지만 대체로 이런 내용이었고 그보다 중요한 건 내가 이 이야기를 모두 알아들었다는 거다. 굉장히 뿌듯한 순간이었다.
이제는 달라져야 한다.
캠프에 합류한 후 지금까지 나는 앞서 말한 주화입마를 상당히 경계했다. 그렇기 때문에 의식적으로 강의에서 다루는 내용보다 깊이 파고들지 않았다. 궁금한 게 생겨도 잘 검색하지 않았다. 그러다 보니 궁금한 내용이 점차 적어졌다. 헌데 이제는 상황이 좀 다르다. 어느정도 깊은 개념도 시간을 조금 들이면 이해할 수 있고, 나름대로의 가설을 세우고 검증해볼 수도 있다. 물론 아직 배울 길이 백만리 천만리지만 이제 조금 더 적극적으로, 강의의 테두리를 벗어나서도 생각할 필요가 있다. 그래야 성장할 수 있다.
무엇을 해야 하는가
리액트 도큐먼트를 다시 읽어보기
리액트 맛집은 많다. 하지만 원조 맛집은 역시 공식 문서다. 지금까지 배운 개념이나 훅을 도큐먼트를 통해 다시 정리해 볼 필요가 있다.
타입스크립트 익히기
전에도 이야기했지만, 자바스크립트와 리액트를 알면 알수록 타입스크립트가 있으면 참 마음 편하겠다... 같은 생각을 했다. 어서 타입스크립트 공부를 시작해야겠다.
지난 프로젝트 리팩토링
지금 와서 지난 프로젝트를 다시 보면 고치고 싶은 점이 한두가지가 아닐 것이다. 리액트 프로젝트가 아닌 것을 리액트로 바꿔 보는 것도, 이미 진행한 리액트 프로젝트를 다시 보며 군더더기를 제거하는 것도 모두 의미있는 일이 될 것이다.
프로그래밍 관련 서적 보기
며칠 전에 같이 공부하는 분이 추천받은 프로그래밍 관련 서적의 목록을 공유해주셨었다(감사합니다) . 목록을 한 번 보고 도서관에 있는 책이면 빌려보고 아니면 중고 서적을 찾아봐야겠다.
약 12주 남았다. 힘 내자!
