React Hooks 만들어보면서 이해하기

황준일님의 useState Hooks 만들기를 참고하여, 훅 작성 규칙 및 클로저를 어떤 식으로 활용할 수 있을지 이해와 고민하자. 또한, useState뿐 아니라, useCallback, useMemo, useEffect를 어떤 식으로 구현할 수 있을지도 생각해보자.

Note

useState, useEffect, useCallback, useMemo를 구현했다면, 추가적으로 useRef도 구현해보자!

• 구현하면서 느낀 점들을 작성하며 회고하자.
• Hooks의 규칙에 대해 이해하자.
• 클로저에 대해 명확하게 이해하자.
• 메모이제이션을 어떻게 구현할 수 있을지 고민해보자.
• 모르는 것들이나 새롭게 알게 된 것들이 있다면 적극적으로 공유하며 서로의 학습을 확장해 보자.

황준일님 Vanilla Javascript로 React UseState Hook 만들기 링크

🚀 학습 목표

• React Hook을 이해하고 규칙과 연관지어 설명할 수 있다.
• 클로저를 이해하고, 설명할 수 있다
• React에서 메모이제이션 및 사이드 이펙트를 어떤 방식으로 처리하는지 추론할 수 있다.

📝 Pull Request 주의할 점.

• 학습과 고민의 흔적 기록
  • 본인이 배우고 고민했던 점들을 최대한 꼼꼼하게 작성해주세요.
  • 작성된 내용은 리뷰어가 의도를 이해하고 더 나은 피드백을 제공하는 데 큰 도움이 됩니다.
• 코드리뷰는 존중과 솔직함을 기반으로
  • 서로 상처받지 않도록 배려하며 리뷰를 작성해주세요.
  • 하지만, 서로의 발전을 위해 솔직한 피드백을 주고받는 문화를 지향합시다.
• PR 방식
  • [본인 이름] React Hooks (본인 이름 브랜치에 PR 올려주세요)
  • 위와 같은 방식으로 PR 올려주세요.

🤖 GPT의 아티클 요약

React의 useState를 바닐라 JS로 구현하기

React의 상태 관리 메커니즘인 useState 훅을 바닐라 자바스크립트로 구현하는 과정을 다룬 글입니다. React의 상태 관리 및 렌더링 동작 방식을 깊이 있게 이해할 수 있습니다.

---

주요 내용

1. React의 useState 이해

• React의 상태 관리 특징:

  • React에서는 상태(state)가 컴포넌트 외부에서 관리됩니다.
  • 상태는 컴포넌트 함수가 반복적으로 호출되더라도 초기화되지 않고 유지됩니다.

• useState의 역할:

  • 상태와 상태 업데이트 함수(setState)를 제공합니다.
  • 상태 변경 시 컴포넌트를 재렌더링하여 UI를 업데이트합니다.

---

2. 바닐라 JS에서 useState 구현

• 목표:

  • React의 useState와 유사한 기능을 바닐라 자바스크립트로 구현합니다.

• 핵심 기능:

  • 상태를 외부에서 배열로 관리하여 초기화 및 유지.
  • 상태 변경 시 업데이트 함수(setState)를 통해 상태를 변경.
  • 상태 변경 시 렌더 함수(render()) 호출로 컴포넌트를 재렌더링.

---

3. 렌더링 관리

• 상태 변경 시 컴포넌트를 다시 렌더링하도록 설정합니다.
• 렌더링이 발생할 때 모든 상태 인덱스를 초기화하여 올바른 상태를 참조하도록 합니다.

---

4. 최적화

• 불필요한 렌더링 방지:

  • 상태가 변경되지 않으면 렌더링을 생략합니다.

• 다중 상태 관리:

  • 상태를 배열로 관리하여 효율성을 높입니다.

• 컴포넌트 재사용성:

  • 상태 관리 로직과 렌더링 로직을 분리하여 유지보수와 재사용성을 강화합니다.

---

학습 포인트

1. React의 상태 관리 메커니즘을 바닐라 자바스크립트로 직접 구현하며 학습할 수 있습니다.
2. 상태 저장, 업데이트, 렌더링 동작을 이해하며 React의 내부 동작 원리를 더 잘 알게 됩니다.
3. React 외의 환경에서도 상태 관리를 구현할 수 있는 방법론을 제공합니다.

---

결론

React의 useState 훅을 직접 구현하며, 상태 관리의 기본 개념을 학습할 수 있습니다. 또한 상태와 렌더링 로직을 분리하여 코드의 유지보수성과 재사용성을 높이는 방법을 익힐 수 있습니다.