React 기본 : 끝말잇기 Hooks로 전환 후 에러 수정 - Uncaught TypeError : value is not a function

이 글은 ZeroCho TV의 무료강좌를 기본으로 하고 있습니다. 

 

지난시간 Class형으로 되어진 끝말잇기 프로그램을 Hooks로 전환하여 보았습니다. 사실 기본적 프로그램 지식이 미약한 상황에서 강좌를 따라하면서 이해하기도 벅찬데 에러까지 나면 이렇게 난감한 경우도 없을겁니다. 

 

실행을 해보니 역시나 에러가 떴습니다. 이 문제를 해결해 보도록 하겠습니다. (어느 누구도 가르쳐 주는 분이 없길래 수정하는데 까지 얼마나 걸릴지는 모르겠습니다. 특히, React 내용을 정말 오랜만에 들어와서 공부하는 거라 천천히 해 볼려고 하는데 막막하기만 합니다.)

 

다음과 같이 에러가 발생되어 여기서부터 시작해 볼려고 합니다.

 

 

▒ Uncaught TypeError: value is not a function

 

일단 TypeError이며 어떤 value가 함수가 아니라고 나옵니다. 구글링에서 여러정보를 확인해서 내린 가설은 함수기능을 할 수 없는 어떤 값이 있는 것 같습니다. 처음에는 타이핑에 에러가 있는것으로 생각해서 몇시간 동안 강의 원본 내용과 나의 코딩 내용을 비교해 봤는데 찾을수가 없었습니다. 

 

좀 더 화면을 살펴보니 이상한 경로를 발견했습니다. 

 

 

 

에러는 1가지만 수정하면 될 듯 합니다. 

 

그런데 제 원래 파일은 pack이 아니라 RelayHooks로 만들어서 시작했는데 전부 pack 디렉토리에서 나와 에러가 뜨고 있습니다. 이 현상은 pack 파일을 전부 복사해서 가져왔기 때문에 발생한 원인으로 생각되어 pack이라는 이름을 전부 찾아 보았습니다. 

 

package.json과 packgae-lock.json에서 다음과 같이 발견할 수 있었습니다. 

 

 

 

 

name이 기존에 "pack"으로 되어 있는 원본파일을 복사해 오면서 생긴일로 보여집니다. 모두 "pack"대신 "relayhooks"라는 이름으로 변경하여 다시한번 봐야겠습니다. 

 

에러가 나더라도 디렉토리 이름을 수정하고 보는게 맞을 듯 합니다. 

 

어렵네요. 이번에는 address already in use의 에러가 발생이 되네요. 다음 시간에는 이 부분을 공부해서 수정해 보도록 하겠습니다.