npm install -g yarnyarn create react-app {PRJ}yarn 을 설치한 후에 npx 대신 실행하면 해결됨. 그런데 문제는 설치하는 패키지가 상당히 많음.

참고한 원문 : https://www.w3schools.com/react/react_hooks.asp React HooksW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.comHook (훅)은 React v16.8 에서 도입된 기능으로서 state 와 리액트의 여러가지 특성에 액세스할 수 있도록 지원하며 이로 인해 class (리액트 클래스)의 필요성을 없애버렸다. 당분간 clas..

https://www.w3schools.com/react/react_conditional_rendering.asp React Conditional RenderingW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com

참고 리소스 : https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs React (리액트)는 인터랙티브한 사용자 인터페이스를 만들 때 쓰는 자바 스크립트 라이브러리이다. HTML 을 컴포넌트로 나눠서 관리할 수 있다. 컴포넌트를 초기화할 때 전달인자로 받을 수 있는 Props, 지속적으로 값을 변경할 수 있는 State, 아직 모르지만 Hook 이라는 변수개념이 존재한다. create-react-app 모듈로 Nodejs 프로젝트 구조를 생성할 수 있다. React 자체는 UI 에 한정되어 있어서 웹 애플리케이션을 만드려면 추가적인 모듈을 설치해주어야 한다. 그 중에 react-router-dom 도 있다. Next.js 는 또 무엇인고 하니..

참고한 원문 : https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components 기존 게시글 : https://debianizer.tistory.com/15 React 클래스형 + (코드 분리 방식) 원문 출처 : https://ljh86029926.gitbook.io/coding-apple-react/1/component-of-react#undefined-1 Component Of React - React 이런식으로 하나의 HTML파일에 header, main, footer부분까지 하나의 파일에 작성하게 됩니다. 그러나 리 debianizer.tistory.com 기존 게시글이 클래스(class) 기준 컴포..

참고한 원문 : https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components 분리 전 원본 소스 : JSX 를 함수형 컴포넌트로 분리 : 문제가 생겼다. 해결 방법) HTML 요소와 구별하기 위해서 컴포넌트 이름 앞 글자를 알파벳 대문자로 표기해야 한다. (소문자는 인식불가) 컴포넌트를 JSX 처럼 꺽쇠로 감싸서 ReactDom.render() 에 인자로 넘기면 된다.