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

지난 시간 여러가지 Error를 수정해 보았는데 다음과 같이 역시 TypeError가 나왔습니다. 

 

 

좀 더 심플하게 생각해 봐야겠습니다. TypeError라는 의미는 뭘 잘 못 기입했다는 의미이고 Value가 함수기능을 못한다는 이야기는 Value에서 에러가 난 것이고 오답은 작동하는데 정답에서 에러가 난다는 이야기는 if ~ else 문에서 if 내용이 잘 못 기입되었다는 가설을 세울 수 있습니다. 

 

▒ TypeError 수정

 

if 절에 쓰여진 내용을 참고로 하고 있는 ZeroCho TV와 비교를 해 보겠습니다. 아무리 비교해도 틀린곳이 없습니다. 다음과 같이 쓰여진 if 절과 else절을 유심히 살펴 보겠습니다. 

 

 

한가지 차이점은 Value에 set이 들어가 있지 않습니다. 다음과 같이 수정해 보도록 하겠습니다. 

 

 

다음과 같이 작동이 잘 됩니다. 다행입니다. 

 

 

이제 개발자 코드(F12)에 나타나 있는 내용을 ZeroCho TV를 통해 공부를 해 보겠습니다. 

 

▒ HMR과 WDS

 

위 그림에서 콘솔 내용을 보면 HMR과 WDS라는 용어가 있습니다. 

 

HMR (Hot Module Reloder)과 WDS (Webpack Development Server)의 약자라고 하는 군요. 서버에서 핫리로딩되는 내역을 보여줍니다. 

 

지속적으로 로컬서버에서 업데이트 되는 내용을 보여주는 겁니다. 

 

일단 기억에 넣어두도록 하지요.

 

 

 

 

▒ Form 태그에 Label ID 및 ClassName 반영

 

HTML코드를 사용하는 것과 같이 id 및 class 이름을 써 넣을 필요가 있을때 어떤 방식으로 해야하는지 공부 해보겠습니다. 

 

다음과 같이 label을 만들고 여기에 HTML을 표시하고 input 태그에 id 및 Class를 적용해 보겠습니다. 

 

 

그러면 브라우저상에는 다음과 같이 표시됩니다. 

 

참고로만 알아두면 좋을 것 같습니다. 

 

for가 아닌 htmlFor와 class가 아닌 className을 기입해 줘야 합니다.