리액트 기초 클래스형 컴포넌트 -> 함수형 컴포넌트

처음으로 웹으로 무언가를 만들어보기 위해 리액트, node.js express를 공부하며 유튜브에서 어떤 강의를 듣던 중 클라이언트의 React 부분이 모두 클래스형 컴포넌트로 선언하며 설명하였다. 이것을 함수형 컴포넌트를 사용하여 만들어보면서 리액트를 학습하는 시간을 가져보았다.

클래스형 

클래스형 컴포넌트에서는 다음과 같이 작성된 형태였다. 이것을 함수형 컴포넌트로 만들어 리액트 훅 useState()와 useEffect를 사용하여 변경해보았다. 수정할 때마다 여러 에러 문구가 콘솔창에 출력됐다.

 

Error 문구

위 문구이외에도 uncaught typeerror: response.json is not a function,

uncaught (in promise) syntaxerror: unexpected token < in json at position 등 오류를 찾는데 시간이 걸려 한줄씩 console.log("에러부분")를 찍어보며 어디가 문제인지 찾아보았다. 

결론적인 문제는async, await 등 비동기식 프로그래밍에 대해 기본 개념이 흔들려서 생긴 문제였다. 

함수형

함수형 컴포넌트에서 다음과 같이 작성하니 오류없이 정상적으로 진행됐다. 확실히 컴포넌트형으로 리액트 훅을 사용하니 코드도 훨씬 줄어들고 문법도 편리한 것 같았다. 

 

 

 Access to fetch at 'http://localhost:5000/api/customer' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

혹여나 이런 에러문구가 콘솔창에 나타난다면 CORS 설정 문제이다.

나의 경우에는 서버쪽에 Access-Control-Allow-Origin response 헤더를 추가 하였다. 

 

 

 

강의영상: https://www.youtube.com/watch?v=zug4VBcZOrI&list=PLRx0vPvlEmdD1pSqKZiTihy5rplxecNpz&index=9