Mini-React 프로젝트 회고

https://github.com/IMGyuGo/mini-react/tree/main

GitHub - IMGyuGo/mini-react: 미니 리액트 Document (Component, State, Hook) - 팀원 : [김규민, 김정환, 박민석]

위 사이트는 React의 Component를 함수형으로, State관리를 위한 Hook을 useState, useEffect, useMemo를 구현한 깃 헙 프로젝트이다.

 

1. 프로젝트 소개

Virtual DOM -> Diff -> Patch 기반을 재사용하고,
그 위에 FunctionComponent, useState, useEffect, useMemo, setState -> renderer 흐름으로 흘러간다.

 

 

mini React 런타임 위에 React 학습 경험을 올려 그 엔진을 실제로 체험할 수 있는 학습 페이지가 만들어져 있다.
전체적인 UI 구성은 아래와 같다.

 

2. 챌린지 수행해보기

챌린지1을 먼저 수행해보자면,

이렇게 컴포넌트를 3개를 만들어 보았다.
1. 프로젝트 깃 페이지 접속 후 git clone으로 다운로드
2. index.html을 실행 (in vscode (live server or html 실행기 확장자))
3. 웹페이지의 RoadMap을 따라가며 챌린지 수행해보기
위 작업을 통해 리액트의 기본 구조를 이해할 수 있다.

 

3. 실제로 학습한 것

1. React는 컴포넌트 함수 + 상태 저장 규칙 + 재렌더 파이프라인이 본질이다.

2. useState는 단순 변수 저장이 아니라, hooks 배열과 hookIndex로 "같은 자리의 상태"를 다시 찾는 장치이다.

3. setState는 값만 바꾸는 함수가 아니라 rerender -> diff -> patch를 다시 시작하는 트리거이다.

4. useEffect는 렌더 도중이 아니라 DOM 반영 뒤에 실행되어야 자연스럽고, deps가 실행 조건을 결정한다.

5. useMemo는 재렌더를 막는 기능이 아니라 재계산을 줄이는 기능이다.

6. 여러 컴포넌트가 같은 값을 봐야 할 때는 각자 state를 들기보다 부모가 소유하고 자식은 props를 받는 구조가 더 안정적이다. (컴포넌트 안에 컴포넌트가 있을 때의 경우도 생각 가능)

 

4. 결론

프로젝트를 만들면서 정말 React에 대한 공부를 정말 많이 한 좋은 프로젝트였다고 생각한다. 혼자만 이해하는 것이 아닌 팀 단위로 같은 지식 레벨 수준을 맞춰가면서 프로젝트를 진행하는 게 얼마나 재밌게 즐거운 일인지 다시 한번 깨닫게 되는 하루였다.

 

이 프로젝트는 사실 확장성이 넘친다. 지금 구현한 훅 3가지와 State 말고도 batching 기능과 다양한 훅에 대해 개발하면서 추가 확장을 더 고려할 수 있는 좋은 프로젝트라고 생각되어진다. 이것도 지속적으로 확장하며 리액트에 대해 추가적으로 공부해야 겠다.