JS로 React를 만든 완성품
GitHub - Yoon-Hae-Min/create-react-with-vanilla-js-study: 바닐라 JS를 사용해서 리엑트를 만들어보는 스터디
스터디 시작 계기
나는 React개발자가 아닌 프론트엔드 개발자이다 즉 내가 알고 있는 React의 기본적인 동작원리에 대해 알아보면서 React에 대해서 좀 더 가까워지고 실제 개발을 할 때 React 스러운 정확한 문법을 사용하고자 하려고 만든 스터디였다.
왜 스터디인가?
약 6개월 전에 지금과 비슷한 동기로 혼자 React 라이브러리를 까보면서 React에 대해서 알아보려 했지만 생각보다 진입장벽이 높았었기 때문에 실패했었다 하지만 이 공부의 필요성은 여전히 느꼈기에 실력을 좀 더 키우고 나서 다시 도전해야겠다고 생각을 하였고 여러 사람과 이를 해처 나가는 게 막힌 부분 공유와 다양한 자료 및 시각에 있어서 더 좋다고 생각하였다. 특히 북스터디 처럼 중점이 되는 자료가 없었기 때문에 더 많은 자료와 의견이 오갈 것이라고 기대를 하며 혼자 공부하는 방식이 아닌 스터디로 열게 되었다.
순탄치만은 않았던 기획
내가 조사 및 공부한 내용을 스터디 시간에 공유하는 것을 기본으로 하였다.
내가 아는 스터디는 북스터디나 강의스터디처럼 무언가 짜여있는 목차에 스터디원들이 탑승하는 것이 일반적인데 내가 하고 싶었던 것은 따로 강의나 책이 없었기 때문에 직접 매주 목차를 짰어야 했다.
그래서 React의 핵심이라 생각하는 부분을 중점으로 기획을 짰다. useState, useEffect, VirtualDOM, JSX, SPA라는 키워드를 잡았다 기본적으로 React를 알기 위해서는 React를 까보는 것부터 시작해야 한다고 생각했다. 또한 라이브러리를 까보는 것 만으로는 단순히 교과서를 읽는 것에 불구하므로 뭔가 직접 구현을 해보아야 습득이 된다고 생각하였다. 따라서 js를 이용해 해당 주제의 최소구현채를 구현해 보고자 하였다.
하지만 실제로 이 방법을 우리가 감당할 수 있는 실력이 되는지 혹은 너무 많은 시간이 소요되는 작업이 들어가는지 알 방법이 없었다 실제로 이런 스터디나 공부를 했다는 자료를 본 적이 없어서 확신이 서지 않았다. 그래서 1주 차를 useState하나만 가지고 분석 → 구현의 단계를 토대로 자율적으로 조사해 오도록 하고 어떤 분량과 난이도로 가져가는 게 맞는지 보고자 하였다.
첫 주차 스터디 발표를 하면서 느낀 점은 생각보다 힘들다였다. 각자 조사한 내용의 깊이도 다르고 하나의 구현이라도 어디까지 지원이 되게 할 것인가? 에 따라서 구현한 결과도 완전히 달랐다.
이에 세부 내용을 고정할 것인가 그냥 자율로 둘 것인가에 대한 고민을 하였고 스터디는 자기 주도적으로 자유롭게 학습하는 게 좋다고 생각하여 주제는 같이 가져가되 구현이나 분석의 깊이는 각자 시간이 되는데 까지 힘쓰도록 하였다. 추후에 느낀 것인데 이 방법이 오히려 구현이나 생각하는 부분의 다양성이 많아져 내가 놓친 부분이나 다른 팀원의 생각까지도 볼 수 있어 주제의 세부 구현을 고정하는 방법보다 더 좋았던 방법이라 생각한다.
아쉬운 점
- 사실 React 까보기의 난이도가 쉬웠다면 모든 hook을 까보려 했었다. 18 버전에서 나온 hook들도 궁금하기도 하고… 하지만 아쉽게도 진행하질 못했다.
- 사실 후반에 가면서 기능을 하나씩 추가하다 보니 기존의 기능들과 안 맞고 오류가 나는 부분이 많이 생겼다 이런 것에 디버깅하는데 시간을 들이다 보니 처음처럼 막 자세하게 React를 까본다거나 기능을 조사한다거나 하는 내용을 하지 못한 게 아쉬웠다.
결론
React를 한번 훑고 구현을 해보니 코드를 짤 때 이 코드가 어떤 과정을 통해서 나오는 건지 머릿속에 그려지게 되었다. 따라서 좀 더 적절한 hook과 구조를 짤 수 있을 것이라 기대를 하는 중이다.
React구현해 보는 거 강추해 본다. 코드를 보는 시각이 달라진다!!
