간단한 게시판 만들기 - 1

react를 이용해 간단한 동작을 하는 게시판을 만들어보고자 한다.

CRUD 기능을 만드는 것을 목적으로 하는 예제이고, 일단 이번 게시물에서는 페이지만 간단히 만들 것이다.

 

react app

작업 폴더를 만들고 가장 먼저 react 폴더를 만들었다.

npx create-react-app 폴더 이름

 

 

위와 같이 설치를 진행하고 npm start를 통해 다음과 같은 웹브라우저로 볼 수 있다.

(react app을 가동시켜만든 페이지는 3000포트로 연결된다.)

 

이대로 사용할 수는 없기 때문에 App.js, App.css, index.css에 있는 코드를 날려주도록 한다.

 

사이트 구조

게시판을 만들겠지만 게시판만 달랑 있으면 허전하니 간단하게 사이트를 꾸며주겠다.

 

 

이런 형태로 특별한 디자인은 들어가지 않은 페이지를 만들 것이다.

 

코드는 아래처럼 작성할 것이다.

 

<app.js>

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


//header
function Header(props) {
  return (
  <header>
    <h2><a href="/" onClick={event=>{
      event.preventDefault();
      props.onChangeMode();
    }}>My Home</a></h2>
    <div>
      <p><a id="sign" href="/sign_up" onClick={event=>{
        event.preventDefault();
      }}>Sign Up</a></p>
      <p><a id="log" href="/login" onClick={event=>{
        event.preventDefault();
      }}>LOGIN</a></p>
    </div>
  </header>
  )
}

//menu
function Nav(props){
  const list =[];
  for(let i=0; i<props.menu.length; i++){
    let m = props.menu[i];
    list.push(<p><a id={m.id} href={'/'+m.title} onClick={(event)=>{
      event.preventDefault();
    }}>{m.title}</a></p>)
  }

  return (
    <nav>
      <div class="menu">
        {list}
      </div>
    </nav>
  )
}

//page-home
function Articlehome(){
  return (
    <article>
      <div id="home">
        <h2>간단한 게시판</h2>
        <p>기본적인 CRUD 기능부터 시도해보는 것을 목표로 하고 있습니다.</p>
        <p>가능하다면 데이터베이스를 연동해보는 것까지 해보고자합니다.</p>
      </div>
    </article>
  )
}


//main
function App() {
  const [mode, setMode] = useState('HOME');   //페이지 상태
  const [menu] = useState([ //메뉴 바
    { id: 1, title: 'HOME'},
    { id: 2, title: 'POST'},
    { id: 3, title: 'MYPAGE'}
  ]);

  let content = null;

  if(mode === 'HOME'){
    content = <Articlehome></Articlehome>
  }
  
  return (
    <div>
      <Header title="home" setMode={setMode} member={member} onChangeMode={()=>{
        setMode('HOME');
      }}></Header>
      <Nav menu={menu} setMymenu={setMymenu}></Nav>
      {content}
    </div>
  );
}

export default App;

 

<app.css>

html {
  font-size: 15px;
}

header {
  position: relative;
  top: 30px;
  text-align: center;
  margin-bottom: 30px;
  border-bottom: solid 2px black;
  line-height: 4px;
}

header div {
  text-align: right;
  padding: 0 10px;
}

header div p {
  padding: 0 0 0 10px;
  display: inline-block;
}

header div #sign, 
header div #log { 
  padding: 0px 5px;
  border: 1px solid gray;
  border-radius: 10px;
}

header div p.a {
  text-decoration-line: none;
  color: inherit;
}

nav {
  text-align: center;
  border-bottom: solid 1px black;
}

 

이렇게 하면 접속했을때 메인 홈페이지는 완성이다.

이제 CRUD를 구현하기 위해 게시글이 모여있는 게시판 페이지를 만든다.

 

<app.js>

...

//menu
function Nav(props){
  const list =[];
  for(let i=0; i<props.menu.length; i++){
    let m = props.menu[i];
    list.push(<p><a id={m.id} href={'/'+m.title} onClick={(event)=>{
      event.preventDefault();
      props.onChangeMode(m.title);
    }}>{m.title}</a></p>)
  }

  return (
    <nav>
      <div class="menu">
        {list}
      </div>
    </nav>
  )
}

...

//page-post
function Articlepost(props){
  let plist = [];
  for(let i=0; i<props.plist.length; i++){
    let p = props.plist[i];
    plist.push(<div class="title" key={p.id}><a id={p.id} href={'/post/'+p.title} onClick={event=>{
      event.preventDefault();
      props.onChangeMode(Number(event.target.id));
    }}>{p.title}</a></div>)
    plist.push(<div class="writer" key={p.id}>{p.writer}</div>)
    plist.push(<div class="date" key={p.id}>{p.date}</div>)
  }
  return (
    <article>
      <div class="page">
        <div class="list_main">
          <div class="list">
            <div>
              {plist}
            </div>
          </div>
          <div class="page">

          </div>
          <div class="button">
            <a href="/post/create" onClick={event => {
              event.preventDefault();
              props.setMode('CREATE');
            }}>글쓰기</a>
          </div>
        </div>
      </div>
    </article>
  )
}


//main
function App() {
  const [mode, setMode] = useState('HOME');   //페이지 상태
  const [menu] = useState([ //메뉴 바
    { id: 1, title: 'HOME'},
    { id: 2, title: 'POST'},
    { id: 3, title: 'MYPAGE'}
  ]);
  const [plist, setPlist] = useState([
  	{ id: 1, title: '1번째 게시물입니다', body: '1번째 게시물 내용입니다.', writer: '홍길동', date: '2024.02.20'},
	{ id: 2, title: '2번째 게시물입니다', body: '2번째 게시물 내용입니다.', writer: '홍길동', date: '2024.02.21'},
   	{ id: 3, title: '3번째 게시물입니다', body: '3번째 게시물 내용입니다.', writer: '홍길동', date: '2024.02.22'},
  ]);
  const [postid, setPostid] = useState(null); //게시글 번호

  let content = null;

  if(mode === 'HOME'){
    content = <Articlehome></Articlehome>
  } else if(mode === 'POST'){
    content = <Articlepost plist={plist} setMode={setMode} onChangeMode={(id)=>{
      setPostid(id);
    }}></Articlepost>
    if(postid != null){
      let title, body, writer, date = null;
      for(let i=0; i<plist.length; i++){
        if(plist[i].id === postid){
          title = plist[i].title;
          body = plist[i].body;
          writer = plist[i].writer;
          date = plist[i].date;
        }
      }
      content = <Postin postid={postid} title={title} body={body} writer={writer} date={date} 
      setMode={setMode} plist={plist} setPlist={setPlist} setPostid={setPostid}></Postin>
    }
  } 
  
  return (
    <div>
      <Header title="home" setMode={setMode} member={member} onChangeMode={()=>{
        setMode('HOME');
      }}></Header>
      <Nav menu={menu} setMymenu={setMymenu} onChangeMode={(smenu)=>{
        setMode(smenu);
        setPostid(null);
      }}></Nav>
      {content}
    </div>
  );
}

export default App;

 

메뉴이동은 mode라는 값을 만들어 해당 카테고리를 클릭했을시 카테고리와 동일한 값으로 mode를 변경시켜 페이지를 변경할 수 있도록하였다.

 

이제 글을 쓰기위한 페이지를 만들면 된다.