React 게시판(CRUD) 만들기 1

React는 페이스북에서 제안된 사용자 인터페이스 제작을 위한 자바스크립트 라이브러리의 하나로,

싱글 페이지(SPA-Sigle Page Applications)나 모바일 애플리케이션의 개발에 유용하다.

이 React를 익히기 위해서

React를 이용하여 데이터 입출력(CRUD) 기능을 가진 게시판을 구현한다.

데이터베이스에 연결해서 구현하지 않고, 배열에 데이터를 저장하고 출력하는 방식으로 게시판을 구현한다.

React 기초 문법은 따로 정리하지 않으니, 관련 자료를 읽어보는 것을 좋다.

여기서 구현한 소스는 Github에서 다운로드 받을 수 있다.

여기서 정리한 내용은 React 게시판 만들기 시리즈의 첫번째 내용이다.

   1. React 게시판(CRUD) 만들기

   2. React + Redux 게시판(CRUD) 만들기

   3. React(Redux) + Firebase 게시판(CRUD) 만들기

React 게시판(CRUD) 만들기는 React 설치와 Github 예제를 실행해 보는 방법(만들기 1)과

실제로 이 게시판(CRUD) 예제를 만드는 과정(만들기 2)으로 정리한다.

       React 게시판(CRUD) 만들기 1

       React 게시판(CRUD) 만들기 2

먼저, NodeJS가 설치되어 있어야 한다.

yarn이나 npm중 편리한 것을 사용하면 되고, 여기에서는 npm으로 작성한다.

NodeJS와 npm 설치는 관련 자료가 많기 때문에 찾아보면 되고

여기서는 React 설치부터 시작한다.

운영체제 콘솔창(여기서는 윈도우 CMD)에서 다음 명령어로 create-react-app를 설치한다.

npm install -g create-react-app

create-react-app는 React 프로젝트를 쉽게 시작할 수 있도록 필요한 설정을 해주는 도구이다.

create-react-app를 설치한 뒤에 다음과 같이 create-react-app로 제작할 프로젝트를 생성한다.

여기에서는 react_board라는 이름으로 프로젝트를 생성하였다.

create-react-app react_board

create-react-app으로 React 앱 프로젝트를 생성하면

다음 그림과 같이 간단한 사용법이 출력된다.

yarn을 설치한 경우 npm이란 단어 대신 yarn으로 출력된다.

각 사용법은 따로 익혀두고 그림 하단의 2가지 명령어를 실행한다.

먼저, 생성한 프로젝트 폴더로 이동해서 (cd react_board)

웹 서버를 가동하면(npm start) 다음과 같이 웹 페이지가 실행된다.

웹 페이지에 설명되어 있듯이

src 폴더의 App.js 파일을 편집기로 열어서 다음 코드를 확인한다.

(Edit src/App.js and save to reload.)

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<p>

Edit <code>src/App.js</code> and save to reload.

</p>

<a

className="App-link"

href="https://reactjs.org"

target="_blank"

rel="noopener noreferrer"

>

Learn React

</a>

</header>

</div>

);

}

}

export default App;

HTML 태그와 Javascript, React로 작성된 코드를 볼 수 있다.

Edit src/App.js and save to reload. 문장에서 글자를 원하는데로 수정하고 저장한 뒤에

웹브라우저로 확인하면 수정된 내용이 반영된 것을 확인할 수 있다.

여기까지 React를 실행하는 방법을 간단하게 정리하였다.

기초 문법은 따로 정리하지 않으니, 관련 자료를 읽어보는 것을 좋다.

구현할 게시판 예제는 다음과 같이 단계별로 제작한다.

    1. 데이터 출력 (글 리스트)

    2. 형식에 맞춰서 출력 (글 리스트)

    3. 데이터 입력 (새 글 작성)

    4. 데이터 수정과 삭제 (글 수정 / 삭제)

    5. 기능(컴포넌트)별 파일 구성

이상의 내용을 App.js 파일에 작성하면 되지만

작성 과정을 각각의 예제 파일로 남기기 위해 App1.js ~ App6.js 파일로 구성하고

react-router-dom을 이용하여 별도의 url로 제작하였다.

import React, { Component } from 'react';

import { Route, BrowserRouter as Router } from 'react-router-dom';

import App1 from './App1';

import App2 from './App2';

import App3 from './App3';

import App4 from './App4';

import App5 from './App5';

import App6 from './App6';

// simple list

class App extends Component {

render() {

return (

<Router>

<div>

<Route exact path="/" component={App1}/>

<Route exact path="/App1" component={App1}/>

<Route exact path="/App2" component={App2}/>

<Route exact path="/App3" component={App3}/>

<Route exact path="/App4" component={App4}/>

<Route exact path="/App5" component={App5}/>

<Route exact path="/App6" component={App6}/>

</div>

</Router>

);

}

}

export default App;

App.js

각 컴포넌트는 웹브라우저에서 다음과 같이 컴포넌트 이름으로 접속하여 실행할 수 있다.

       http://localhost:3000/App1

       ...

       http://localhost:3000/App6

이상으로 React 설치와 Github 예제를 실행해 보는 방법을 정리하였고,

다음으로 실제로 이 게시판(CRUD) 예제를 만드는 과정을 정리한다.

       React 게시판(CRUD) 만들기 1

       React 게시판(CRUD) 만들기 2