React 설치
React 설치
1. React
React는 가장 인기있고 많이 사용되는 자바스크립트 라이브러리 중의 하나입니다.
facebook 에서 개발했고 자바스크립트를 확장한 jsx 문법을 사용합니다.
2. node.js 설치
React는 node.js 기반의 기술입니다.
https://nodejs.org 사이트에서 node.js를 다운로드하고 설치합니다.
LTS Windows Install 를 선택합니다.
여기서는 node-v20.9.0-x64.msi 파일을 기준으로 설명합니다.
설치는 기본 옵션으로 진행합니다.
3. vscode 설치
React 개발을 할 수 있는 다양한 툴들이 있습니다. 여기서는 Visual Studio Code 를 사용합니다.
https://code.visualstudio.com 사이트에서 윈도우 버전을 다운로드 받고 기본적인 옵션으로 설치합니다.
설치가 완료된 후 아래 2개의 확장 프로그램을 설치합니다.
JavaScript (ES6) code snippets
ES7+ React/Redux/React-Native snippets
4. React 프로젝트 생성
먼저 React 소스를 저장할 작업용 디렉토리를 생성합니다.
c:/react 를 생성합니다. 다른 디렉토리도 괜찮습니다.
윈도우의 시작 버튼을 눌러서 명령 프롬프트를 실행합니다.
c:/react 디렉토리로 들어갑니다.
cd c:/react
React 프로젝트를 생성하기 위해서는 아래의 형식대로 명령어를 입력합니다.
npx create-react-app 프로젝트명
npx create-react-app frontend
프로젝트 이름은 frontend 라고 했습니다.
vscode 를 실행하고 c:/react/frontend 디렉토리를 오픈합니다.
5. React 프로젝트 실행
vscode에 내장된 터미널을 오픈하여 아래의 명령어를 입력합니다.
npm start
브라우저가 자동으로 켜지면서 샘플 화면이 실행됩니다.
6. React 프로젝트의 디렉토리 구조
React 프로젝트의 디렉토리 구조를 살펴보겠습니다.
node_modules 디렉토리는 라이브러리들이 저장된 디렉토리입니다.
public 디렉토리는 html, js, css, image 등의 static file들이 저장된 디렉토리입니다. static file들은 프로그램 실행 중에 변경되지 않는 정적인 파일들을 의미합니다.
App.js 는 시작 페이지입니다. index.html에 포함되어 실행됩니다
package.json 파일은 프로젝트 실행에 필요한 정보들이 저장된 파일입니다.
App.js 를 수정하면 화면에 반영됩니다.
<div className="App">
이 태그 내부의 내용들을 다 지우고 아래의 코드를 입력해 봅니다.
</div>
function App() {
return (
<div className="App">
안녕하세요.
</div>
);
}
위 코드를 입력하고 저장하면 곧바로 브라우저에 변경 사항이 반영됩니다.
css를 사용하기 위해서는 class 대신 className이라고 써야 합니다. 자바스크립트에도 class 키워드가 있기 때문에 혼동되지 않도록 하기 위해 명령어가 다른 것입니다.
변수를 사용하기 위해서는 아래와 같은 방법을 사용합니다.
function App() {
let name='김철수';
return (
<div className="App">
안녕하세요 {name}님.
</div>
);
}
let 변수명=값;
let은 변수에 대한 선언문입니다.
실행 중에 값이 바뀌는 경우에는 let 을 사용합니다.
실행 중에 값이 바뀌지 않고 고정되는 경우에는 const 를 사용합니다.
화면에 출력할 내용은 return 함수를 사용합니다.
return ( 출력할 내용 )
return에는 1개의 태그만 사용 가능할 수 있습니다.
아래와 같이 2개 이상의 태그를 리턴할 수는 없습니다.
function App() {
return (
<div className="App">
</div>
<div></div>
);
}
7. useState
이번에는 useState() 함수를 살펴보겠습니다.
import { useState } from 'react';
function App() {
const [names,setName]=useState(['김철수','마이클','박상수']);
return (
<div className="App">
{names[0]}<br/>
{names[1]}<br/>
{names[2]}<br/>
</div>
);
}
[해설]
import { useState } from 'react';
React의 기본 기능 외에 다른 기능들을 사용하기 위해서는 import를 해야 합니다.
import의 형식은 아래와 같습니다.
import 세부적인기능 from 기능들
const는 상수입니다. 프로그램 실행 중에 값이 바뀌지 않는 경우에 사용합니다.
useState는 프로그램 실행 중에 자주 바뀌는 값들을 빠르게 처리하기 위한 방법입니다.
이런 형식으로 작성합니다.
const [변수명, 함수] = useState( [ 데이터 ] )
['김철수','마이클','손흥민'] 이 배열을 names 변수에 저장합니다.
그리고 이 배열에 값을 설정하는 함수는 setName 함수입니다.
{names[0]}<br/>
{names[1]}<br/>
{names[2]}<br/>
배열에 저장된 값은 위와 같이 배열이름[인덱스]로 표현합니다.