reactlynx-best-practiceslisted
Install: claude install-skill sehyun0518/agent
> **⚠️ ReactLynx only (JSX).** 같은 Lynx라도 JSX 없이 Element PAPI로 짜면
> `vanilla-lynx`, 웹 React/Next면 `react-best-practice`, React Native(Expo)면
> `react-native-skills`를 쓰세요. 네 팩은 혼용하지 않습니다.
> 어느 팩인지는 저장소 의존성으로 판별합니다 — `@lynx-js/react`.
# ReactLynx Best Practices
ReactLynx는 React 프로그래밍 모델을 따르지만, Lynx의 **이중 스레드 런타임** 때문에
부수효과·생명주기 타이밍·이벤트 핸들러·메인 스레드 스크립트를 다르게 다뤄야 합니다.
규칙 9개가 `rules/`에 있습니다. 웹 React의 렌더링 최적화 규칙을 그대로 적용하면
스레드 경계를 어기게 되므로, 이 팩과 다른 팩을 섞지 않습니다.
## When to Apply
- ReactLynx 컴포넌트나 애플리케이션 코드를 새로 작성할 때
- 재사용 가능한 ReactLynx 컴포넌트 라이브러리를 만들거나 검토할 때
- 스레드 경계·생명주기·이벤트·`lynx.__globalProps`·코드 분할·성능 문제를 검토할 때
- `lynx.getJSModule`, `NativeModules`, `runOnMainThread`, `runOnBackground`,
`lazy`, `Suspense`, `useLayoutEffect`를 호출하는 코드를 리팩터링할 때
- ReactLynx render·diff·commit·patch·setState 트레이스를 조사할 때
## Rules
| Rule | Impact | Use for |
|---|---|---|
| [detect-background-only](rules/detect-background-only.md) | CRITICAL | `lynx.getJSModule`, `NativeModules`, `'background only'`, 커스텀 이벤트·훅 경계 |
| [component-library-packaging](rules/component-library-packaging.md) | HIGH | 컴포넌트 라이브러리 export, type-erased ESM, JSX 보존, Rslib, `tsc` |
| [avoid-use-layout-effect](rules/avoid-use-layout-effect.md) | MEDIUM | 생명주기와 레이아웃 읽기 |
| [proper-event-handlers](rules/proper-event-handlers.md) | MEDIUM | `bindtap`, `catchtap`, 전파, dataset, 커스텀 prop 핸들러 |
| [main-thread-scripts-guide](rules/main-thread-scripts-guide.md) | MEDIUM | `main-thread:*`, `useMainThreadRef`, 스레드 간 호출, 공유 모듈 |
| [global-pro