리액트의 훅(hook)은 클래스 컴포넌트(Class Component)에서 지원하지 않습니다. 그래서 클래스에서 사용할 수 있는 다른 기능들을 제공하는데..... 제공 안되는 기능들이 있습니다. 이럴 때 사용하는 방법이 고차 컴포넌트(HOC, Higher Order Component)입니다. (참고 : React Docs - 고차 컴포넌트 ) 1. 원리 원리는 1) 함수형 컴포넌트(Function Component)를 만들고 2) 필요한 훅을 'props'에 넣도록 구성하고 3) 클래스형 컴포넌트를 감싸서(랩퍼 구현, Wrapped) 4) 'props'를 전달받습니다. 이렇게 구현하면 클래스 컴포넌트에서 사용할 수 없었던 'useNavigate'나 'useLocation'같은 훅들도 사용할 수 있습니다...

이전 포스팅에서는 세팅만 했으니 이제 간단하게 'React'와 'SCSS', 'ASP.NET Core 6'의 코드를 만들어 넣어 테스트를 하고, 배포용 빌드로 디버깅은 어떻게 하는지 알아봅시다. "React.js를 사용한 ASP.NET Core" 템플릿 처럼 리액트 디버거도 연결할 계획이였는데..... .NET 6으로 오면서 프론트엔드와 연결방법이 바뀠습니다. 그래서 자료가 너무 없어서 일단 이것까지는 보류합니다. 나중에라도 찾으면 업데이트 하겠습니다. 하나의 포스팅으로 썼더니 너무 길어서 분할합니다. 연관글 영역 1. 백엔드 만들기(ASP.NET Core 6) 백엔드 기능을 할 Controllers > TestController.cs 를 생성하고 아래와 같이 작성합니다. [Route("api/[cont..

[ASP.NET Core 6] 비주얼 스튜디오 + React 5 + Webpack + Babel + Sass + minimizer (개발, 배포 폴더) 'ASP.NET Core 6'기준으로 작업하긴 했지만 'React 5' 부분만 때서 다른 프로젝트에 그대로 사용할 수 있습니다. 하나의 포스팅으로 썼더니 너무 길어서 분할합니다. 연관글 영역 1. 'package.json' 작성 프로젝트에 'package.json'파일을 생성하고 내용을 아래와 같이 넣습니다. { "name": "react-test", "version": "0.1.0", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-serve..

백엔드를 'ASP.NET Core 6', 프론트 엔드를 리액트로 구성하려는데 대부분의 예제가 각각 구성하는 방식이거나 'VS Code'로 구현하는 방식이었습니다. 그래서 저는 한번에 구성하여 관리하는 프로젝트를 만들려고 이렇게 했습니다. 비주얼 스튜디오라고 적어놨지만 'VS Code'와 협업하도록 구성하는 것이 목적이라 'VS Code'에서도 사용할 수 있습니다. 하나의 포스팅으로 썼더니 너무 길어서 분할합니다. 연관글 영역 1. 구성 개요 완성된 프로젝트 : github - dang-gun/AspDotNetSamples/ReactTest/ 이 포스팅에서는 가급적 '복사 + 붙여넣기' 만해서 사용하도록 작성하였습니다. 이 프로젝트는 "React.js를 사용한 ASP.NET Core" 템플릿 사용하지 않는..