[회고] AI와 함께한 React 공식문서 스터디

• 참여 기간: 2024년 11월 ~ 2025년 5월 (6개월)
• 스터디 주제: React 공식 문서 읽기
• 참여 동기: 퓨처콘 행사에서 React 공식문서 발표를 듣고 체계적인 학습의 필요성을 느낌
• 목표: React API 문서 독파
• 진행 방식: 4인 그룹, 1인 1문서 발표, 회차당 2시간 (30분 발표 + 토론), AI 도구 적극 활용
• 학습 범위: React API 참고서
• 기록: 스터디 노션 페이지

참여 계기

'We are the future!' 프론트엔드 커뮤니티의 퓨처콘 행사에서 'React 공식문서'에 대한 발표를 듣고 공식문서 스터디에 관심을 갖게 되었습니다.

React 개발자이면서 공식 문서를 체계적으로 정독해본 적이 없다는 사실이 부끄럽게 느껴졌고, 이번 기회에 제대로 학습해보고자 스터디에 참여하게 되었습니다.

공식 문서 스터디를 진행하고 싶거나 참고하고 싶은 분들을 위해 진행 방식을 공유해보려고 합니다. AI를 적극 활용하여 학습하였고 이 방법이 많은 도움이 되었다고 생각합니다.

진행 방식

React API 문서를 기반으로 1인당 1개 문서를 배정받아 학습한 후, 스터디 모임에서 발표하는 방식으로 진행했습니다. 총 4명이 참여하여 문서당 30분씩 발표와 토론 시간을 가졌고 매회 2시간씩 진행했습니다.

도구 활용

1. Greptile을 통한 React 소스코드 분석

AI 도구인 Greptile의 Chat 기능을 활용하여 React 소스코드를 분석하며 학습했습니다.

이 도구의 가장 큰 장점은 GitHub 레포지토리를 기반으로 질문할 수 있다는 점입니다. 공식 문서에서 설명하는 개념의 실제 구현체를 찾아보고, 코드 레벨에서 동작 원리를 살펴볼 수 있었습니다.

예를 들어, 동시성 렌더링에 대해 질문하면 실제 React 소스코드를 기반으로 한 답변을 받을 수 있고, 해당 코드가 위치한 파일로 직접 이동하여 전체 코드도 확인할 수 있습니다. 이를 통해 문서로만 접했던 개념들을 구체적인 구현체와 함께 학습할 수 있었습니다.

Greptile chat

2. Perplexity Deep Search를 통한 질의 응답

스터디를 진행하다 보면 모든 참여자가 막히는 순간들이 있었습니다. 이럴 때는 Perplexity의 딥서치 기능을 활용하여 신뢰할 수 있는 출처를 기반으로 한 답변을 얻을 수 있었습니다. 단순한 검색과 달리 여러 자료를 종합하여 근거 있는 설명을 제공해주어 깊이 있는 이해에 도움이 되었습니다.

3. Cursor를 활용한 실습 코드 작성

새로운 개념에 대한 활용이 궁금한 경우 Cursor AI에게 해당 개념을 활용한 실습 예제를 요청했습니다. 이를 통해 이론으로만 이해했던 내용을 실제 코드로 구현해보며 더 구체적으로 학습할 수 있었습니다.

useTransition과 flushSync 방식에서 Suspense fallback 동작 차이

서버 컴포넌트 직렬화와 RSC Payload 시각화

4. Notion을 활용한 체계적 기록 관리

이전에 디스코드로 다른 스터디를 진행한 적이 있는데 공부한 내용은 GitHub에, 추가 조사 내용은 채팅과 스레드에 기록했습니다. 이렇게 하였을 때, 정보가 분산되고 채팅 내용이 유실되어 나중에 다시 찾아보기 어렵다는 단점이 있었습니다.

 

이번 스터디에서는 처음부터 Notion에 체계적인 구조를 만들어 진행했습니다. 각 문서별로 페이지를 만들고, 학습 내용과 느낀 점을 댓글로 남겨 나중에도 쉽게 찾아볼 수 있도록 했습니다. 이로 인해 스터디 당시의 기억을 다시 한 번 상기할 수 있다는 장점이 있었습니다.

문서를 리스트업 하고 추가 내용은 댓글로 관리

기억에 남는 주제

• React DOM APIs: createRoot, hydrateRoot 등의 기본 렌더링 API
• React Hooks: useState, useEffect, useContext 등 기본 훅부터 useDeferredValue, useTransition 등 동시성 훅까지
• React 19 신규 APIs: use, useOptimistic, useActionState 등
• Server Components: RSC 아키텍처와 구현 방식
• Server Actions: 폼 처리와 서버 상태 업데이트
• React 동시성 렌더링과 Lane 시스템: 우선순위 조절, 비트마스크를 활용한 스케쥴링 매커니즘

회고 및 느낀점

이전에는 "공식 문서는 필요할 때 찾아서 보면 된다"고 생각했습니다. 라이브러리는 지속적으로 업데이트되는데, 지금 읽어봤자 나중에는 의미가 없어지지 않을까 생각했기 때문입니다.

하지만 체계적으로 읽어보니 생각이 완전히 바뀌었습니다. React의 전체적인 그림을 이해할 수 있었고, 각 API의 존재 이유와 적절한 사용 시점을 알 수 있었습니다. 특히 사용자가 주의해야 할 내용들이 상세히 설명되어 있고, CodeSandbox를 통해 직접 실행 결과를 확인할 수 있게 한 점에서 어떤 책보다도 친절한 공식문서라는 것을 깨달았습니다.

책 스터디와 달리 공식 문서는 React와 직접 연관되어 있어 가장 최신 정보를 받아볼 수 있다는 점도 큰 장점이었습니다. 실제로 스터디 진행 중 React 19가 출시되면서, v18에서의 변경점을 통해 React가 추구하는 방향성을 실시간으로 이해할 수 있었습니다.

무엇보다 이해한 내용을 말로 정리하고, 스터디원들과 질의응답하는 과정이 학습에 큰 도움이 되었습니다. 다른 사람의 질문을 통해 미처 생각하지 못했던 관점들을 발견할 수 있었고, 실제 코드리뷰할 때도 그 효과를 체감할 수 있었습니다.

스터디를 마친 지금, 모든 내용을 100% 기억하고 있지는 않지만, 어떤 문제가 생겼을 때 어디서 해답을 찾을 수 있는지는 알게 되었습니다. 단순히 라이브러리 사용법을 익히는 것을 넘어서, React 팀의 철학과 방향성까지 함께 이해할 수 있었던 것이 가장 큰 수확입니다.

6개월이라는 긴 여정이었지만, 함께 학습하고 토론할 수 있는 좋은 동료들이 있었기에 완주할 수 있었습니다!