[Error] react Hooks must be called in a React function component or a custom React Hook function + 다른 오류(기초)

1) 문제 발생

이 오류는 함수 안에 넣어서 사용을 안 했기에 나는 오류이다.

함수 오류

2) 문제 해결 : 쓰고자 하는 변수를 함수 밖이 아니라 함수 안에 넣으면 오류가 나지 않는다.

 

실수 안 할 수 있는데 나올 수 있는 오류들이다.

아래와 같이 나는 오류를 보면 알 수 있다.

1) 문제 발생 : Cannot access before initialization

이는 변수가 변수를 사용하는 곳보다 아래에 정의되었기에 나는 오류이다.

콘솔창에 뜬 오류

웹 사이트 개발자 도구를 누르면 콘솔창에서 볼 수 있는 오류이다. 여기서 나는 오류는 초기화 되기 전에 price라는 단어가 액세스되었기에 오류가 난다라고 하였다.

오류가 난 코드

그래서 오류가 난 코드에서 price라고 정의된 코드를 찾는다. useState가 먼저 정의되어야 하는데 그렇지 않으므로 오류가 난 것이다. 이를 맨 위로 올려 정의해준다.

2) 문제 해결 변수를 변수를 사용하는 곳보다 위에 정의하면 된다.

해결한 코드

위와 같이 코드를 바꾸면 해당 오류가 사라지게 된다.