React 시작하기(환경구축)

내용 정리 출처 : 생활코딩 React 2022 개정판

React는 사용자 정의 태그이며 자바스크립트를 기반으로 만들

class문법과 함수 문법으로 React를 만들 수 있다. 요즘은 함수문법으로 만든다.

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

A JavaScript library for building user interfaces

ko.reactjs.org

React를 쓰는 방법으로는 개발환경을 구축할 수 도 있지만, 온라인 플레이그라운드를 이용해 쓸 수도 있다.

개발환경 구축이 잘 안된다면 온라인 서비스인 온라인 플레이그라운드에서 할 수 도 있다.

대표적으로 StackBlitz가 있다.

React (forked) - StackBlitz

stackblitz.com

Visual Studio Code로 쓰기 용이하다.

사용방법은 아래와 같다.

npx create-react-app . 이란 명령어를 쓰기 전에 node.js를 깔고 install 해줘야 한다.

만약 기존의 터미널이 안된다면, 다른 터미널(command prompt)로 다시 설정해서 install 한다.

설치가 성공적이라면 아래와 같은 문구가 뜬다.

npm start를 하면 react가 실행된다. 아래와 같은 화면이 뜨면 설치 수정 배포 중

create-react-app은 index.js 란 파일을 찾고 여기에 적힌 그대로 작동하게 된다.

index.js란 파일에서 아래와 같이 <App /> 태그를 지우면 위에 있는 화면이 없어진 흰 화면이 생성된다.

즉, 이 태그가 UI 전체이다.

여기 있는 App 태그의 내용은 어디있냐. 바로 4번째 줄에 ./App에서 온 것이다 (확장자 js 생략)

css

building me