Skip to content

[DongHyun] React Hooks#1

Open
D5ng wants to merge 32 commits into
mainfrom
donghyun_dev
Open

[DongHyun] React Hooks#1
D5ng wants to merge 32 commits into
mainfrom
donghyun_dev

Conversation

@D5ng

@D5ng D5ng commented Jan 23, 2025

Copy link
Copy Markdown
Member

구현 목록

  • useState
  • useEffect
  • useMemo
  • useEffect

배운 점

  • React Hook을 직접 만들어보면서 Hook 규칙을 명확하게 이해
  • React Hook이 만들어진 원리는 클로저가 핵심이라는 것을 이해
  • useEffect는 컴포넌트 렌더링 이후에 동작한다. (마운트 이후에 동작)
  • Batch 작업이 어떤 방식으로 이루어지는지 이해
    • macrotask, microtask, requestAnimationFrame과 렌더링 관계를 이해
    • 리액트에서 어떤 방식으로 Batch 처리를 하였는지 추론 가능

느낀 점

여전히도 스스로 무엇인가를 만드는 능력에 대해 많이 부족하다. 정말 많이 연습해야할 것 같다. 개인적으로 useEffect 만드는 부분이 좀 어려웠다고 생각한다. 요즘 과학 채널을 보면서 많이 깨달은 것이 있는데, 항상 의심하면서 문제를 정의하고, 이 문제를 어떻게 해결할 것인가에 대한 추론 능력이 너무나도 중요하다고 생각한다.

Hook을 만들어보면서 어떤 식으로 흘러가는지 이해하여 만들기 전보다 Hook을 잘 활용할 수 있다는 생각이 들고, 에러가 발생했을 때 쉽게 찾아내지 않을까 하는 자신감도 생겼다.

지금 PR올린 코드는 인터넷에 도움을 받았지만, 남은시간동안 GPT한테 피드백을 받아보고 검토해서 개선할 계획이다.

@D5ng D5ng added the ✨Feat ✨Feat label Jan 23, 2025
@D5ng D5ng requested a review from Seoin02 January 23, 2025 06:15
@D5ng D5ng self-assigned this Jan 23, 2025
@@ -0,0 +1,23 @@
import { useEffect, useState } from "@/core/hooks"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

구현한 hook을 다른 파일로 분리한 게 좋아보여요! 저도 리팩토링 때 분리해볼게요

@D5ng D5ng Feb 3, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

분리를 했지만, internals 객체를 클로저 안에서 관리하는게 아니다보니, 어느곳에서 접근 가능하다는게 조금 별로인거 같네요..

@Seoin02 Seoin02 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

대체적으로 훅 구현 방식은 저랑 비슷한데, 디테일한 부분까지 신경쓴 게 느껴져요!(JSX 등) 고생많으셨습니다.

return [state, setState]
}

function flushBatchQueue() {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아티클과 다른 방식으로 배치 알고리즘을 적용했군요...!

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React에서는 마이크로 태스크 큐를 사용하는거로 알고있어서 저도 똑같이 해봤습니다!

internals.hooks[currentIndex] = dependencies || null
internals.effectList[currentIndex] = callback
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클린업 함수 추가해봅시다~~ 저도 해야돼요

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

참고로 conflict 발생하는 거 제가 작업물을 main에 push해서 되돌리느라 readme.md 수정해서 그런겁니다ㅜㅜ 참고 부탁드려요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨Feat ✨Feat

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants