diff --git a/eslint.config.ts b/eslint.config.ts index 5287876..090e6d2 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -594,6 +594,20 @@ const commonSecurityRules = { "CallExpression[callee.object.name='document'][callee.property.name='createElement'][arguments.0.value='script']", message: "Runtime script construction is prohibited by FE-OC-019.", }, + { + /* + setState 업데이터는 핸들러가 끝난 뒤, 다음 렌더에 실행된다. 그때 React 는 이미 + `event.currentTarget` 을 null 로 되돌려 놓았으므로 업데이터 안에서 그것을 읽으면 + "Cannot read properties of null" 로 화면이 통째로 죽는다. + + 타입 검사도 lint 도 잡지 못했고, 첫 입력에서야 드러났다 — 값은 핸들러가 도는 동안 + 지역 변수로 꺼내 두고 업데이터에는 그 값을 넘긴다. + */ + selector: + "CallExpression[callee.name=/^set[A-Z]/] > ArrowFunctionExpression MemberExpression[property.name='currentTarget']", + message: + "Read event.currentTarget before the setState updater runs — it is null by the time the updater is called.", + }, ], }; diff --git a/src/features/tech-log/presentation/studio/components/project-editor.tsx b/src/features/tech-log/presentation/studio/components/project-editor.tsx index 4678754..b6c58a0 100644 --- a/src/features/tech-log/presentation/studio/components/project-editor.tsx +++ b/src/features/tech-log/presentation/studio/components/project-editor.tsx @@ -495,12 +495,12 @@ export function ProjectEditor() { 유형 - setNewActivity((current) => ({ - ...current, - occurredAt: event.currentTarget.value, - })) - } + onChange={(event) => { + // setState 업데이터는 다음 렌더에 실행된다. 그때 `event.currentTarget` 은 이미 + // null 이므로, 값은 핸들러가 도는 동안 꺼내 둬야 한다. + const value = event.currentTarget.value; + setNewActivity((current) => ({ ...current, occurredAt: value })); + }} />