react와 express 서버 연동 익히기 7편 -DB에서 데이터 조회-

1. 데이터 조회

 

front의 App.js를 다음과 같이 수정

 

async function getData() 함수 작성

 

list, update state 추가

 

useEffect()를 사용해서, 렌더링하면 데이터를 조회하도록

 

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

const App = (props) => {
  const [name,setName] = useState('')
  const [list,setList] = useState([])
  const [update,setUpdate] = useState(false)

  async function addData(e) {
    
    e.preventDefault();

    const res = await axios('/add/data', {
      method : 'POST',
      data : { 'data' : name },
      headers: new Headers()
    })

    if (res.data) {
      alert('데이터를 추가했습니다.')
      return window.location.reload
    }
  }

  function nameUpdate(e) {
    setName(e.target.value)
  }

  async function getData() {
    const res = await axios.get('/get/data');

    if (res.data[0] === undefined) {
      let cover = [];
      cover.push(res.data)

      return setList(cover)
    }

    setList(res.data)
  }

  useEffect(() => {
    getData();
  })

  return (
      <div className='App'>
        <h3> welcome to <u> daehyuck </u> blog! </h3>
        <h5> 대혁이다 </h5>

        <br />

        <form method= 'POST' onSubmit={(e) => addData(e)}>
          <input type="text" maxLength='10' onChange={(e) => nameUpdate(e)}/>
          <input type="submit" value="Add"/>
        </form>

        <br /> <br />
        <div style={{ height: '250px', overflow: 'auto' }}>
          <h4 style={{ color: '#ababab'}}> Teachers List </h4>

          <div style={{ border: 'solid 1px black', width : '50%', marginLeft : '25%', textAlign : 'left'}}>
            <div style={{ display : 'grid', gridTemplateColumns : '32% 35% 30%', textAlign : 'center' }}>
            <div> Number </div>
            <div> Name </div>
            <div> Other </div>
            </div>
          </div>

          {list.length !== 0 ? list.map( (el,key) => {
            return(
              <div key={key} style={{ display : 'grid', lineHeight: '40px', gridTemplateColumns : '32% 35%', width: '50%', marginLeft:'25%'}}>
                <div> {el.id} </div>
                <div> {el.name} </div>
                </div>
            )
          })
        : null}
        </div>
      </div>
    )


}

export default App;

 

 

그리고 실행해보면 다음과 같다.

 

 

2. 모든 데이터 조회

 

server.js에 다음 코드를 추가

 

//server.js

//모든 데이터 조회
app.get('/get/data', (req,res) => {
    Teacher.findAll()
    .then(result => {res.send(result)})
    .catch( err => { throw err })
})

 

findAll() 메소드는 테이블 Teacher의 모든 데이터를 조회하는 메소드

 

select * from teachers 와 동일함

 

조회한 데이터는 .then을 이용해 result라는 이름에 담아서, res.send() 함수로 클라이언트로 결과를 응답

 

조회에 실패하면 .catch를 이용해 실패에 대한 에러메시지 나타냄

 

 

참고로 input에 데이터를 넣으면, useEffect()에 의해 재렌더링으로 데이터가 바로 추가되어, 조회됨

 

 

 

3. 특정 데이터 조회 

 

특정 데이터만 조회하고 싶다면, where를 findAll의 인자로 넣어준다.

 

select * from teachers where name LIKE '태연'과 같다.

 

예를 들어, teachers 중에서, 이름이 'name'인 컬럼중에서 '태연'이라는 이름을 가져오고 싶다면...

 

//server.js

//특정 데이터 조회

app.get('/get/data', (req,res) => {
    Teacher.findAll({
        where: {name: '태연'}
    })
    .then ( result => {res.send(result)})
    .catch( err => { throw err })
})

 

리액트를 다시 실행시켜보자.

 

 

4. 여러 조건에 맞는 데이터 조회

 

number이 1번인 데이터와 name이 '수지'인 데이터를 함께 가져오고 싶다면...

 

Op.or을 이용해 or연산이 가능하다.

 

Op.or은 sequelize에서 or 연산자를 사용해 데이터를 조회하는 메소드

 

당연히 2개 이상의 조건을 value로 지정해줘야한다

 

//server.js
// 여러 조건 설정(or)

app.get('/get/data', (req,res) => {
    Teacher.findAll({
        where: { [Op.or]: [{ id: 1}, {name: '수지'}]}
    })
    .then( result => { res.send(result) })
    .catch( err => { throw err })
})

 

 

리액트를 재실행해보면...

 

 

 

 

5. 오직 하나의 데이터 조회 (findOne, where)

 

finOne과 where을 사용해 오직 하나의 데이터만 가져올 수 있다.

 

반드시 where을 사용해야한다고 함

 

//오직 하나의 데이터 조회(findOne & where)

app.get('/get/data', (req,res) => {
    Teacher.findOne({
        where : { id: 4}
    })
    .then(result => { res.send(result )})
    .catch(err => { throw err })
})

 

Teacher 테이블에서 id가 4인 데이터를 가져온다.

 

리액트를 재실행해보면...

 

 

findOne과 findAll은 서버가 조회한 데이터를 클라이언트로 보낼 때, Array로 보낼 것인지, Object로 보낼 것인지 차이이다.

 

findAll은 서버에서 데이터를 가져온 다음, 클라이언트로 보낼때, array로 보내준다.

 

findOne은 데이터를 가져와 클라이언트로 보낼때, Object로 보내준다.

 

그래서 map 메소드를 사용할때나 인덱싱을 할때 주의해야한다.

 

findAll은 배열 형태로 가니까 map을 사용해도 문제없지만,

 

findOne은 객체 형태로 가서 [0] 인덱싱하거나, map을 사용하면 에러날 수 있다

 

 

참조

 

React로 블로그 만들기 08 : [Sequelize] 2. 데이터 조회 (Select) 하기 : 네이버 블로그 (naver.com)

React로 블로그 만들기 08 : [Sequelize] 2. 데이터 조회 (Select) 하기