처음 만난 리액트 - 3. 리액트 시작하기

기본적인 웹사이트를 만들어 React.js를 적용해보겠다.

html만 작성된 기본 코드

 

1. 기존 웹사이트 html 파일에 DOM 컨테이너라는 것을 추가한다.

root라는 id를 가진 div태그가 DOM 컨테이너로 사용될 예정. (DOM컨테이너에 리액트에서 사용하는 Virtual DOM이 들어있음) 

 

 

2. 다음으로 body태그에 스크립트 태그를 사용해서 React의 Javascript 파일을 가져오고,

앞으로 만들게 될 myButton이라는 이름의 react 컴포넌트를 가져오는 코드도 미리 넣어준다.

(myButton 컴포넌트는 뒤에서 만들 예정)

 

3. 'MyButton' 리액트 컴포넌트 만들기

간단한 리액트의 함수 컴포넌트

MyButton.js라는 이름으로 새로운 파일을 생성하여 위와 같이 코드를 작성한다. 

마지막에 나오는 두 줄의 코드(#11,#12)는 React DOM의 렌더함수를 사용해서 React 컴포넌트를 DOM 컨테이너에 렌더링하는 코드이다.

이 코드를 사용해야만 컴포넌트가 화면에 보이고, 이 코드를 사용하지 않으면 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이는 것이 아니기 때문이다.

이제 index.html을 웹 브라우저에서 열면 버튼이 생성된 것을 확인할 수 있다.

 

위 과정들은 HTML을 이용해서 아주 간단한 웹사이트를 만들고 웹사이트에 React를 추가한 뒤 실제로 React 컴포넌트까지 만들어서 렌더링 한 과정이다. 다만 React를 사용해서 웹사이트를 만들 때마다 매번 이러한 환경 설정을 해줘야 된다면 굉장히 번거롭다.

때문에 이 모든 과정이 필요 없이 곧바로 React 웹 애플리케이션을 개발할 수 있도록 프로젝트를 자동으로 생성해주는 Create React 앱이라는 패키지에 대해 알아보자.

---

Create-react-app

Create React App (CRA): React로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태로 프로젝트를 생성해주는 도구

CRA를 이용하기 위해서는 Node.js, npm, VS Code가 필요하다.

 

create-react-app 실행법

npx 명령어를 이용해서 실행 가능하다.

(npx: npm 패키지를 설치한 이후에 곧바로 실행, 엑스큐트까지 해주는 명령어)

 

프로젝트 생성이 완료되면 애플리케이션을 실행할 수 있는 명령어를 안내해준다.

몇가지를 알아보자.

 

#경로 변경(change directory)

$ cd my-app

 

#애플리케이션 실행

$ npm start

위 명령어를 실행하면 자동으로 브라우저가 열림