react 리렌더링에 큰 영향을 미치는 hook dependency. 예전에는 lint 로 hook dependency 체크해주는 설정이 잘 안되어 힘들었던 기억이 나서 정리해보고자 새로운 리엑트 네이티브 프로젝트를 생성했다.
React re-rendering is significantly affected by hook dependencies. In the past, it was challenging for me to configure linting to check hook dependencies, so I created a new React Native project to document settings for managing them.
그런데 아무런 설정 없이도 hook dependency check 가 자동으로 잘 된다...?
To my surprise, the hook dependency check works automatically, even without any additional setup.
.eslintrc.js 파일을 살펴보니 (예전에는 자동으로 생성이 안되었던 것 같은데)
After reviewing the .eslintrc.js file (which didn’t seem to auto-generate in previous versions), I found this configuration:
```
module.exports = {
root: true,
extends: '@react-native',
};
```
하여 node_modules/@react-native 를 살펴보니
eslint-config/index.js 에 아래와 같은 설정을 발견
I explored node_modules/@react-native and found the following settings in eslint-config/index.js:
```
plugins: [
'eslint-comments',
'react',
'react-hooks',
'react-native',
'@react-native',
'jest',
],
```
시험삼아 `react-hooks` 를 삭제해보니 dependency check 가 작동하지 않는다.
When I removed react-hooks as a test, the dependency check stopped working.
굿.
Good.
# 추가
expo를 사용하면서 네이티브 모듈을 사용하려고 create-expo-app --template bare-minimum을 하니 위에 적어놓았던 기본설정이 하나도 안붙어있었다...
1. typescript 세팅
2. eslint
yarn eslint --init 후
eslint.config.mjs에서
```
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
/** @type {import('eslint').Linter.Config[]} */
export default [
{files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
{
plugins: {
"react-hooks":reactHooks,
},
rules:{"react-hooks/exhaustive-deps":"error"}
}
];
```
웹스톰에서 에러가 발생하지 않아 살펴보니 최신 버전이 아니어서 eslint 9 버전의 eslint.config.mjs 를 인식하지 못했던 것.
vscode 에서는 잘 작동함
Comments
Post a Comment