https://ko.react.dev/reference/rules
관용적인 React 코드를 작성하기 위한 규칙들. 이러한 규칙을 지키면 변화에 더 잘 대처할 수 있고, 다른 라이브러리, 도구, 개발자와의 협업이 원활해진다. 만약 어길 경우 어플리케이션에 버그가 생길 가능성이 높고, 일반적이지 않게 변한다.
React 규칙을 따르기 쉽게하기 위해 ESLint 플러그인과 함께 Strict Mode를 사용하는 것이 권장된다.
컴포넌트와 Hooks는 순수해야한다
- 컴포넌트는 멱등해야한다.
- 사이드 이펙트는 렌더링 외부에서 실행되어야한다.
- Props와 state는 단일 렌더링에 대해 불변 스냅샷이다. 직접 변경하면 안된다.
- Hook의 반환값과 인수는 불변이다. 값이 Hook에 전달되면 이를 수정해서는 안된다.
- JSX로 전달된 값은 불변이다. JSX에 사용한 후 변경하지 말고, 생성되기 전에 변경하라
React가 컴포넌트와 Hook을 호출하는 방식
- 컴포넌트 함수를 직접 호출하지마라. 컴포넌트는 JSX에서만 사용해야하며 일반 함수처럼 호출하지마라
- Hook을 일반 값으로 전달하지마라. Hook은 반드시 컴포넌트 내부에서만 호출되어야한다.
Hook의 규칙
- Hook은 최상위레벨에서만 호출해야한다
- Hook은 React 함수에서만 호출해야한다