[React] #9. 간단 게시판으로 CRUD 구현

exoluse·2021년 9월 16일
0

React

목록 보기
10/20
post-thumbnail

세팅된 express 에 라우팅 구성

app.get("/getEmpList", (request, response) => {
  
  connection.query("SELECT * FROM emp", (err,result) => {
    response.json({data:result})
  });
  
})

app.get("/getEmpInfo/:id", (request, response) => {
  
  connection.query("SELECT * FROM emp where id = "+ request.params.id,  (err,result) => {
    response.json({data:result})
  });
  
})

app.get("/setEmpInfo/:id/:name", (request, response) => {
  
  connection.query("UPDATE emp SET name = '"+request.params.name+"' WHERE id = "+request.params.id ,  (err,result) => {
    response.json({data:result})
  });
  
})

app.get("/delEmpInfo/:id", (request, response) => {
  
  connection.query("DELETE FROM emp WHERE id = "+request.params.id ,  (err,result) => {
    response.json({data:result})
  });
  
})

app.get("/insEmpInfo/:name", (request, response) => {

  connection.query("INSERT INTO emp (name) VALUES ('"+request.params.name+"')" ,  (err,result) => {
    response.json({data:result})
  });
  
})

리액트 컴포넌트 구성

  1. 메인(목록) 컴포넌트

function EmpList() {

  let history = useHistory();

  let [empList, changeEmpList] = useState([]);
  let [inputName, changeInputName] = useState("");
  let [refreshComponent, changeRefreshComponent] = useState("");

  useEffect( ()=>{
   
    fetch("http://localhost:3001/getEmpList").then(

      (response)=>{
        return response.json();
      }
    ).then( (response)=>{

      changeEmpList(response.data);
    } )

  }, [ refreshComponent ] );


  return (
      <>
      <div>
        <input type="text" onChange={ (e)=>{ changeInputName(e.target.value) }} />
        <button onClick={ ()=>{

          fetch("http://localhost:3001/insEmpInfo/"+inputName).then(
            (response)=>{
              console.log("success insEmpInfo");
              changeRefreshComponent(Math.random()+"");

            }
          )

        } }>{inputName} 으로 등록!</button>
        </div>
        
        <div>
        <table align="center" border="1">
        { 
          empList.map( (obj, index)=>{
              return (

                <tr>
                  <td>
                  <Link to={ '/detail/'+obj.id }>
                    {obj.id}
                  </Link>
                  </td>
                  <td>
                  <Link to={ '/detail/'+obj.id }>
                    {obj.name}
                  </Link>
                  </td>
                </tr>

              )
          } ) 
        
        }
        </table>
      </div>

      </>
  )
}
  1. 리스트의 링크를 클릭하면 상세 페이지로 넘어가는... 이런식으로 화면 구성이 된다.
  1. 리액트 프로젝트를 로드하면 아래와 같이 네트워크에 표시된다. getEmpList 가 호출되는 것도 확인했다.
  1. 상세(상세/수정/삭제) 컴포넌트는 이렇게

function EmpList() {

  let history = useHistory();

  let [empList, changeEmpList] = useState([]);
  let [inputName, changeInputName] = useState("");
  let [refreshComponent, changeRefreshComponent] = useState("");

  useEffect( ()=>{
   
    fetch("http://localhost:3001/getEmpList").then(

      (response)=>{
        return response.json();
      }
    ).then( (response)=>{

      changeEmpList(response.data);
    } )

  }, [ refreshComponent ] );


  return (
      <>
      <div>
        <input type="text" onChange={ (e)=>{ changeInputName(e.target.value) }} />
        <button onClick={ ()=>{

          fetch("http://localhost:3001/insEmpInfo/"+inputName).then(
            (response)=>{
              console.log("success insEmpInfo");
              changeRefreshComponent(Math.random()+"");

            }
          )

        } }>{inputName} 으로 등록!</button>
        </div>
        
        <div>
        <table align="center" border="1">
        { 
          empList.map( (obj, index)=>{
              return (

                <tr>
                  <td>
                  <Link to={ '/detail/'+obj.id }>
                    {obj.id}
                  </Link>
                  </td>
                  <td>
                  <Link to={ '/detail/'+obj.id }>
                    {obj.name}
                  </Link>
                  </td>
                </tr>

              )
          } ) 
        
        }
        </table>
      </div>
      </>
  )
}
  1. 변경, 삭제 버튼을 클릭하면 기능 동작 후 메인 페이지로 넘어간다.

  2. 상세 페이지로 이동할 때 그 어떤 파일도 로드하지 않는 것을 볼 수 있다. useEffect 로 호출하는 getEmpInfo 만 로드한다.

  3. 수정 버튼을 누른 후는 이렇다. name 을 exoluse555로 변경 후 메인페이지로 돌아온 모습이다.

  4. 삭제 버튼 클릭 후

간단한 기능 구현이었지만 그래도

지금까지 배우고 연습했던 리액트의 기능들을 대부분 써 보았다. 물론 리덕스는 쓸 필요가 없어서 제외되긴 했지만 조금더 보강하면 괜찮지 않을까 싶다. 다음 포스팅은 실제로 부트스트랩을 이용하여 디자인도 같이 곁들이는 시간을 가져볼까 한다. 다음 포스팅은 파일 업로드 기능 구현이다. 끝

0개의 댓글