Docker fullstack - React Js 구성하기

cra 를 사용하여 react app 만들기

 

 

 

 

fullstack 폴더에서 frontend 폴더를 생성합니다.

npx create-react-app frontend

 

 

UI를 위한 코드 작성

수정되는 UI 를 바로 확인하기 위해서 react app을 실행합니다.

 

 

npm start

http://localhost:3000

 

 

 

 

 

글을 입력할수 있는 Input box 와 확인을 누를 수 있는 Button을 추가하겠습니다.

 

 

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div className="example" onSubmit>
          <input type="text" placeholder="입력해주세요..." />
          <button type="submit">확인</button>
        </div>
      </header>
    </div>
  );
}

export default App;

 

 

이벤트 핸들러 와 최종적인 코드입니다.
이글은 react 를 위한 글이기보단 docker 설정에 초점을 맞췄습니다.

 

 

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

function App() {
  const [lists, setLists] = useState([]);
  const [value, setValue] = useState('');

  useEffect(() => {
    // 여기서 데이터베이스에 있는 값을 가져온다.
    // nginx proxy를 사용하기 때문에 앞의 http://localhost 부분이 생략됨
    axios.get('/api/values').then((response) => {
      console.log(response);
      setLists(response.data);
    });
  }, []);

  const changeHandler = (event) => {
    setValue(event.currentTarget.value);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    axios.post('/api/value', { value }).then((response) => {
      if (response.data.success) {
        console.log('response', response);
        setLists([...lists, response.data]);
        setValue('');
      } else {
        alert('값을 DB에 넣는데 실패했습니다.');
      }
    });
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div className="container">
          {lists && lists.map((list, idx) => <li key={index}>{list.value}</li>)}
        </div>
        <div className="example" onSubmit={submitHandler}>
          <input
            type="text"
            placeholder="입력해주세요..."
            onChange={changeHandler}
            value={value}
          />
          <button type="submit">확인</button>
        </div>
      </header>
    </div>
  );
}

export default App;

 

 

다음글 에서 리액트 앱을 위한 도커 파일을 만들어 보도록 하겠습니다.

github 참조 github