[react-native] Invalid hook call. Hooks can only be called inside of the body of a function component.

[suhyang-lee]

🚀 Error Message

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

🐝 문제정의 : 기본적으로 라이브러리를 사용할 때 라이브러리 문서를 보고 그대로 따라하는 경우가 있다.
거기서 사용하는대로 컴포넌트를 컴포넌트 형태가 아니라 import 해서 그대로 넣었는데 문제 발생

• 기본적으로 React 공식 문서를 보면 invalid hooks에 대한 내용이 있다.
• 해당 내용을 보면서 따라했는데 난 전혀 문제가 없었다.
• 그렇다면 이럴때, 봐야할 곳은 라이브러리를 보는 것이었다.

해결방법

1. 에러가 나는 포인트에서 사용되고 있는 hooks을 하나하나 제거하면서 흐름을 따라간다.
2. 에러가 발생부분을 살펴본다.
3. 라이브러리가 있다면 해당 라이브러리 컴포넌트 형태를 잘 따르고 있는지 확인한다.
4. props로 컴포넌트를 넘긴다면 이 부분을 유심히 살펴보고 컴포넌트 형태로 바꿔본다

   
   import lib from '~~'

// 😫

// 😊 }/> ```

[suhyang-lee]

참고로 redux를 사용하기 전엔 문제가 없었는데 redux를 사용하고 문제가 생기는 것을 보아, 내가 사용한 라이브러리와 redux가 합이 맞지 않았던 것 같다. 어쨌든 라이브러리에서 function 형태의 컴포넌트를 넘길때, 그 내부에서 hooks 및 redux를 사용할 일이 있다면 애초부터 컴포넌트 형태로 라이브러리에 import 해주는게 좋을 것 같다.