인프런 리액트 실행하기1-2

개발환경

-node.js 설치(npm 자동 같이 설치 됨)
-vs코드 설치

리액트란?

리액트: 자바스크립트 라이브러리, SPA를 쉽고 빠르게 만들어 주는 도구
뷰: 프레임워크

프레임워크 vs 라이브러리
: 제어권한 여부(라이브러리: 사용자가 흐름제어o)

특징

• virtual DOM: 빠른 업데이트, 렌더링 속도, 최소한의 부분만 업데이트

• Compnent-Based: 레고블럭 쌓듯이, 반복적으로 사용되는 동일 조합, 재사용성

  • 유지보수 용이함
  • 빠른 개발 속도

• 이후 모바일 개발도 하고 싶으면 리액트 네이티브 공부해보기

단점

• 높은 상태관리 복잡도: component가 많아지면 상태관리의 복잡도도 증가
  -> rocoil이라는 외부 상태관리 라이브러리 사용하는 경우多
• 꾸준한 업데이트 공부해야함

React 추가하기

1) HTML 파일에 DOM 컨테이너 설치
2) 스크립트 태그 추가하기

 <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

3) 리액트 컴포넌트 만들기

<script src="like_button.js"></script>

Mybutton.js

function Mybutton(props) {
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        { onClick: () => setIsClicked(true) },
        isClicked ? 'Clicked!' : 'Click here!'
    )
}//리액트의 함수 컴포넌트

//리액트 돔에 render 함수를 사용해서 리액트 컴포넌트를 돔 컨테이너에 렌더링하는 코드
//이 코드가 필요한 이유->스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도, 컴포넌트가 화면에 보이는 것이 아니기 때문에!
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(Mybutton), domContainer);

Creat-react-app(CRA)

:이 모든 과정이 번거롭기 때문

아래 순서대로 실행하면 리액트 실행됨

npx create-react-app <your-project-name>

cd <project name>

npm start

만약 자동으로 열리지 않는다면

http://localhost:3000/

을 직접 입력하여 열어보기.

npx create react app이 실행되지 않을 때

1. npm 캐시 정리

npm cache clean --force

2. npm 경로 재설정
npm의 기본 설치 경로가 잘못 설정되어 있을 수 있습니다. 이를 수정하려면 다음 명령어를 실행하세요.

npm config set prefix "%USERPROFILE%\AppData\Roaming\npm"

3. 디렉터리 수동 생성
필요한 디렉터리가 존재하지 않을 경우 수동으로 생성해줄 수 있습니다.

C:\Users\LG\AppData\Roaming\npm 경로로 이동하여 해당 폴더가 존재하는지 확인합니다.
해당 경로에 폴더가 없다면, 직접 폴더를 생성합니다.