9.1_리액트 훅을 안전하게 사용하기 위해 준수해야 할 규칙에 대해 서술해주세요.

[eeeyooon]

📝 300p

❓ 본문에서는 리액트 훅을 안전하게 사용하기 위해 2가지 규칙을 지키도록 권장하고 있습니다. 어떤 규칙이 있는지 서술하고, 본인만의 리액트 훅을 안전하게 사용할 수 있는 규칙이 있다면 자유롭게 얘기해주세요.

[Stilllee]

1. 훅은 항상 최상위 레벨에서 호출되어야 한다.

조건문, 반복문, 중첩 함수, 클래스 등의 내부에서는 훅을 호출하지 않아야 하며, 반환문으로 함수 컴포넌트가 종료되거나 조건문 또는 변수에 따라 반복문 등으로 훅의 호출여부가 결정되어서는 안됩니다.

그래야 useState나 useEffect가 여러 번 호출되더라도 훅의 상태를 올바르게 유지할 수 있게되기 때문입니다.

2. 훅은 항상 함수 컴포넌트다 커스텀 훅 등의 리액트 컴포넌트 내에서만 호출되어야 한다.

리액트에서 훅은 호출 순서에 의존합니다. 모든 컴포넌트 렌더링에서 훅의 순서가 항상 동일하게 유지되어야 하며, 이를 통해 항상 동일한 컴포넌트 렌더링이 보장됩니다.

[lulla-by]

1. 훅은 최상위 레벨에서 호출되어야 한다.
2. 흑은 리액트 컴포넌트 내에서만 호출되어야 한다.

프로젝트를 진행하면서 리액트 훅을 최상위 레벨이 아닌 곳에서 호출하여 에러를 겪은 경험이 몇 번 있습니다. 그러다 보니 리액트 훅을 사용할 때는 현재 위치가 최상위인지 아닌지를 고려하며 코드를 구상합니다.

[sryung1225]

1️⃣ 훅은 항상 최상위 레벨에서 호출되어야 한다. 조건문, 반복문, 중첩 함수, 클래스 등의 내부에서는 훅을 호출하지 않아야 합니다. 그리고 반환문으로 함수 컴포넌트가 종료되거나, 조건문 또는 변수에 따라 반복문 등으로 훅의 호출 여부가 결정되어서는 안됩니다. 이는 useState, useEffect가 여러 번 호출되더라도 훅의 상태를 올바르게 유지하기 위함입니다.

2️⃣ 훅은 항상 함수 컴포넌트나 커스텀 훅 등의 리액트 컴포넌트 내에서만 호출되어야 한다.

개인적으로는 프로젝트에서 eslint를 적극 활용해 리액트 훅을 잘못 사용하진 않는지 상시 확인하고 있습니다.

[eeeyooon]

리액트 훅을 안전하게 사용하기 위해 다음 2가지 규칙을 지켜야 합니다. 리액트는 이러한 규칙을 준수할 수 있도록 도와주는 Lint 플러그인도 제공합니다. (eslint-plugin-react-hooks Eslint 플러그인)

1️⃣ 훅은 항상 최상위 레벨에서 호출해야 합니다.

조건문, 반복문, 중첩 함수, 클래스 등의 내부에서는 훅을 호출하지 않아야 합니다. 반환문으로 함수 컴포넌트가 종료되거나, 조건문 또는 변수에 따라 반복문 등으로 훅의 호출 여부가 결정되어서는 안됩니다. 이렇게 해야 useState나 useEffect가 여러 번 호출되더라도 훅의상태를 올바르게 유지할 수 있게 됩니다. 이는 리액트가 각 훅 호출 사이의 상태를 유지하는데 필수적인데, 훅이 항상 동일한 순서로 호출되어야 리액트가 내부 상태를 올바르게 관리할 수 있습니다.

2️⃣ 훅은 항상 함수 컴포넌트나 커스텀 훅 등의 리액트 컴포넌트 내에서만 호출되어야 합니다.

일반 자바스클비트 함수에서 훅을 호출하는 것은 허용되지 않습니다. 함수 컴포넌트 또는 커스텀 훅에서만 호출해야 리액트가 컴포넌트의 상태와 생명주기와 훅을 올바르게 연결할 수 있습니다.