1277 react compiler 적용#1281
Hidden character warning
Conversation
|
Warning Review limit reached
More reviews will be available in 10 minutes and 22 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (3)
WalkthroughReact Compiler 활성화 설정과 관련 패키지/디렉티브가 추가되었습니다. 여러 컴포넌트와 페이지에서 ChangesReact Compiler 적용 및 메모이제이션 정리
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| 'react-hooks/rules-of-hooks':'error', | ||
| 'react-hooks/exhaustive-deps':'warn', |
There was a problem hiding this comment.
...reactHooks.configs['recommended-latest'].rules,
이거 수정하신 이유가 있을까요?
There was a problem hiding this comment.
기존설정이 React compiler 전용 룰까지 전부 켜서 기존 코드에서 compiler 룰에 걸리는 부분이 모두 에러로 잡히는 바람에 compiler 전용 lint만 제거하기 위해서 수정했습니다
There was a problem hiding this comment.
해당 린트 규칙은 리액트에서 공식적으로 만들어진 규칙이며 권장되는 규칙인데 react compiler를 키면서 에러가 발생한다면 에러를 끄는게 아니라 해당 코드들을 수정하는게 맞다고 생각해요. 공식 문서
문서에서도 적혀있듯 에러가 발생하는 부분이 발견되면 컴파일러가 해당 부분을 자동으로 건너띄어 앱 자체에 문제는 없지만 건너뛰는만큼 컴파일러가 최적화를 못한다는 말이기도 해요 그렇기 때문에 바로 수정을 하기엔 구조 자체를수정해야하는 부분이거나 일반적으로 어쩔 수 없이 사용되는 부분이라면 해당 부분만 린트 규칙을 비활성화 하고 넘어갈 수는 있지만 린트 규칙을 제외하는 것은 좋지 않을 것 같아요
There was a problem hiding this comment.
아 그렇군요 수정해보겠습니다!
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/components/TimetablePage/components/CustomLecture/index.tsx (1)
1-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win파일 전역
eslint-disable은 범위를 너무 넓게 잡았습니다.
react-hooks/refs와react-hooks/set-state-in-effect를 파일 전체에서 끄면, 지금 문제뿐 아니라 이후에 들어올 실제 hook 위반도 같이 가려집니다. 가능하면 문제 나는 블록/라인에만 한정해서 disable 하거나, 해당 effect/ref 로직을 작은 훅으로 분리해 원인을 드러내는 편이 안전합니다. 장점은 회귀 방지와 리뷰 가능성 유지이고, 단점은 당장 약간의 정리가 필요하다는 점입니다.As per path instructions,
src/**는 가독성·안정성·유지보수 용이성을 우선 검토해야 합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/TimetablePage/components/CustomLecture/index.tsx` around lines 1 - 3, The file-wide react-hooks disables in CustomLecture are too broad and can hide future hook violations. Narrow the suppression for react-hooks/refs and react-hooks/set-state-in-effect to only the specific offending block, or refactor the related ref/effect logic into a smaller hook/component so the lint exceptions stay local. Use the CustomLecture component and the affected hook/ref usage as the anchor when updating the lint annotations.Source: Path instructions
src/components/Auth/SignupPage/Steps/Terms/index.tsx (1)
1-1: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win파일 전체를
use no memo로 빼기보다useWatch로 구독 범위를 줄이는 편이 좋겠습니다.지금은
watch(TERMS_NAMES),watch('...'),watch(TERMS_NAMES.slice(0, 2))가 섞여 있어서 컴포넌트 전체를 컴파일러 대상에서 제외한 형태입니다. 필요한 필드만useWatch로 구독하면 재렌더 범위를 줄이면서 이 디렉티브를 제거할 여지가 생깁니다. 장점은 React Compiler 이점을 유지하고 구독 범위를 명확히 할 수 있다는 점이고, 단점은 필드 선언이 조금 늘어난다는 점입니다.예시
-'use no memo'; +// 가능하면 디렉티브 제거 -import { useFormContext } from 'react-hook-form'; +import { useFormContext, useWatch } from 'react-hook-form'; export default function Terms({ onNext }: TermsProps) { - const { register, setValue, watch } = useFormContext(); + const { control, register, setValue } = useFormContext(); const isMobile = useMediaQuery(); - const watchAllTerms = watch(TERMS_NAMES); + const watchAllTerms = useWatch({ control, name: TERMS_NAMES }); + const [privacyAgreement, koinAgreement, marketingAgreement] = watchAllTerms; + const canProceed = [privacyAgreement, koinAgreement].every(Boolean);As per path instructions,
src/**는 가독성·안정성·테스트/유지보수 용이성을 우선 검토해야 하고src/components/**는 불필요한 리렌더링 패턴을 확인해야 합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Auth/SignupPage/Steps/Terms/index.tsx` at line 1, The Terms step is opting out of React Compiler with a file-level directive instead of narrowing subscriptions. Replace the mixed `watch(...)` usage in `Terms/index.tsx` with `useWatch` for the specific fields used by this component, so only the relevant terms inputs re-render. After moving the subscriptions into `useWatch`, remove the `'use no memo'` directive and keep the existing `TERMS_NAMES`-based logic aligned with the new field-level watchers.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@src/components/Articles/LostItemWritePage/components/MobileDatePicker/MobileDatePicker.tsx`:
- Around line 21-24: Keep the getDateRange result memoized in MobileDatePicker
so years, months, days, currentYear, currentMonth, and currentDay stay
referentially stable across renders; otherwise the useLayoutEffect that depends
on these values will retrigger on every render and repeatedly call
syncScrollPosition(...). Restore the memoization around the getDateRange call in
MobileDatePicker.tsx and ensure the effect dependencies continue to point at the
stable values used for scroll synchronization.
In `@src/components/Auth/SignupPage/Steps/MobileVerificationStep/index.tsx`:
- Around line 82-84: `checkVerificationCode`의 onSuccess에서 등록된 60초 타이머를 정리하지 않아
`CORRECT` 메시지가 나중에 `DEFAULT`로 덮어써집니다. `MobileVerificationStep`의
`checkVerificationCode` 성공 처리에 `clearVerificationMessageTimer()`를 추가해,
`sendSMSToUser`에서 설정한 `verificationMessageTimerRef`가 남아 있지 않도록 하세요. 필요하면
`sendSMSToUser`와 `clearVerificationMessageTimer`의 흐름을 함께 확인해 인증 성공 시점에 타이머가 항상
취소되도록 맞춰주세요.
In `@src/pages/bus/city/index.tsx`:
- Around line 73-85: `bus_timetables`가 없거나 null일 때 `.find()`에서 렌더가 깨질 수 있으니,
`todayTimetable`을 계산하는 `timetable.info.bus_timetables` 접근에 기존처럼 빈 배열 fallback을
유지하세요. `dayType`, `todayTimetable`, `departInfo`, `processedTimetable` 주변에서 API
응답이 비어도 안전하게 동작하도록 `info.bus_timetables`를 배열로 보정한 뒤 찾도록 수정하면 됩니다.
---
Nitpick comments:
In `@src/components/Auth/SignupPage/Steps/Terms/index.tsx`:
- Line 1: The Terms step is opting out of React Compiler with a file-level
directive instead of narrowing subscriptions. Replace the mixed `watch(...)`
usage in `Terms/index.tsx` with `useWatch` for the specific fields used by this
component, so only the relevant terms inputs re-render. After moving the
subscriptions into `useWatch`, remove the `'use no memo'` directive and keep the
existing `TERMS_NAMES`-based logic aligned with the new field-level watchers.
In `@src/components/TimetablePage/components/CustomLecture/index.tsx`:
- Around line 1-3: The file-wide react-hooks disables in CustomLecture are too
broad and can hide future hook violations. Narrow the suppression for
react-hooks/refs and react-hooks/set-state-in-effect to only the specific
offending block, or refactor the related ref/effect logic into a smaller
hook/component so the lint exceptions stay local. Use the CustomLecture
component and the affected hook/ref usage as the anchor when updating the lint
annotations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6cebe864-0ae1-466f-8992-2cc781c40ba2
⛔ Files ignored due to path filters (2)
.pnp.cjsis excluded by!.pnp.cjsand included by**yarn.lockis excluded by!**/yarn.lock,!**/*.lock,!yarn.lockand included by**
📒 Files selected for processing (33)
next.config.mjspackage.jsonsrc/components/Articles/LostItemWritePage/components/Calendar/index.tsxsrc/components/Articles/LostItemWritePage/components/MobileDatePicker/MobileDatePicker.tsxsrc/components/Articles/hooks/usePagination.tssrc/components/Auth/SignupPage/Steps/MobileVerificationStep/index.tsxsrc/components/Auth/SignupPage/Steps/Terms/index.tsxsrc/components/Callvan/components/AddPostForm/index.tsxsrc/components/Callvan/components/CallvanChatRoom/index.tsxsrc/components/Callvan/components/CallvanFilterPanel/index.tsxsrc/components/Callvan/components/CallvanPageLayout/index.tsxsrc/components/Callvan/components/DateDropdown/index.tsxsrc/components/Callvan/components/TimeDropdown/index.tsxsrc/components/Club/ClubDetailPage/components/ClubIntrodution/index.tsxsrc/components/Club/ClubListPage/components/ClubSearchContainer/index.tsxsrc/components/Club/NewClubEvent/components/TimePicker/index.tsxsrc/components/Course/hooks/useSelectedCourses.tssrc/components/GraduationCalculatorPage/components/StudentForm/index.tsxsrc/components/IndexComponents/IndexLostItem/index.tsxsrc/components/IndexComponents/IndexStore/index.tsxsrc/components/Store/StorePage/components/SearchBarModal/index.tsxsrc/components/TimetablePage/components/CustomLecture/index.tsxsrc/components/layout/Header/PCHeader/index.tsxsrc/components/modal/Modal/PortalProvider.tsxsrc/components/ui/UserInfoModal/hooks/useUserInfoModal.tssrc/pages/_app.tsxsrc/pages/articles/index.tsxsrc/pages/auth/modifyinfo/index.tsxsrc/pages/bus/city/index.tsxsrc/pages/callvan/index.tsxsrc/pages/callvan/notifications/index.tsxsrc/pages/lost-item/chat/index.tsxsrc/pages/lost-item/index.tsx
2 participants
What is this PR? 🔍
Changes 📝
React Compiler를 적용 후 컴파일러가 자동으로 메모이제이션 하기 용이한 useMemo, useCallback을 제거하여 코드를 단순화 하였습니다. 또한 react compiler lint에 위반되는 기존 코드들을 수정하였습니다.
useMemo 제거 조건
useCallback 제거 조건
lint 오류 수정중 CustomLecture 컴포넌트는 수정리스크가 큰 시간표 폼이라, 이번 작업에서 구조를 바꾸기보다 Compiler 적용 대상에서 제외하는 예외처리를 하였습니다.
Test CheckList ✅
Precaution
✔️ Please check if the PR fulfills these requirements
developbranch unconditionally?main?yarn lintSummary by CodeRabbit
Refactor
Chores