[React] useState, useEffect / useEffect 호출하기

양 옆에 화살표가 있고 기본값으로 오늘 날짜의 데이터를 출력해주는 게시판이 있었는데

양옆의 화살표는 당연히 이전날, 다음날 데이터를 조회할수있다

해당 기능 리액트로 구현해보았다.

 

React-icons

react-icons 을 사용하여 화살표를 사용했고 , react-icons 는 아래 링크에서 자세한 설치 방법 및 사용방법을 알수있다.

https://react-icons.github.io/react-icons/

검색해서 사용하고 싶은 아이콘 뭐든지 import 하고 from "react-icons/아이콘명 앞두글자"; 하면되는데 간혹 안되는 아이콘들이 있는점 참고

---

useState

변수선언하는 부분, 첫번째가 사용할 변수 이름, 두번째는 set(대문자)~~ 예시 ) test 라 정했다면 setTest 

기존에 javascript 에서 test = "dd" ; 이런식으로 값을 설정해줬다면 , 리액트에서는 그럴필요없이 setTest="dd"; 로 끝난다

 

useEffect

아직 잘 모르지만 이것저것 삽질해본 내 짧은 지식에 의하면 아래처럼 짜놓은 소스에서는 useEffect 가 한번만 호출이 되고, useEffect 안에 두번째 인자가 바뀔때마다 재호출이된다.

맨 뒤에 refreshKey 가 있는데 저 값이 바뀔때마다 재호출이 된다는뜻

 

문제는 저 두번째 인자가 바뀌지않고 같은 값이면 재호출을 하지 않는다.

이러면 당일 실시간으로 데이터가 쌓인걸 확인하려면 일일히 다른 페이지를 갔다온다거나, 어쨋든 새로고침을 해야된다는건데 너무 비효율적이고 , 난 이 부분을 우선은 최신화 버튼을 하나 만들어놓고 클릭했을때 재호출이 되길 원했다.

 

그러다 찾은것이 최신화 버튼 누를땐 today 로 인자값을 받아서 selectDate 부분에서 setNowDate로 오늘날짜 설정을 해주고, setRefreshKey(refreshKey + 1); 로 하여금 key 를 더해주면 key 가 변하면서 useEffect 가 실행이되고 바뀐 setNowDate 로 하여금 재호출을한다.

 

import React, { useState, setState, useEffect } from 'react';
import axios from "axios";

import { BsSearch, BsFillCaretLeftFill, BsFillCaretRightFill } from "react-icons/bs";

const BoardList = () => {

  // 날짜 선언 부분
  const dateArray = ["일", "월", "화", "수", "목", "금", "토"]
  const today = new Date();   
  const year = today.getFullYear(); // 년도
  const month = today.getMonth() + 1;  // 월
  let date = today.getDate();  // 날짜
  const day = today.getDay();  // 요일
  if (date < 10) { date = "0" + date; }

  // setState 선언
  const [data, setData] = useState({ data: [] });
  const [refreshKey, setRefreshKey] = useState(0);
  
  //현재 날짜 nowDate 선언
  const [nowDate, setNowDate] = useState(year + '-' + month + '-' + date + ' ' + '(' + dateArray[day] + ')');

  useEffect(() => {
		  
          //nowDate 양식 => 2021-10-13 (수)
          let searchDate = nowDate.split(' ');        
          searchDate = searchDate[0].replace(/\./gi, "-");                  

          const fetchData = async (searchDate) => {

              const params = {
                  "page": '1',
                  "limit": '10',
                  "mode" : searchDate // 2021-10-13
              }

              const result = await axios({
                  method: 'GET',                
                  url: "http://localhost:8080/boards/list?mode=" + searchDate,
                  headers: {                    
                      'Content-Type' : 'application/json' 
                  },               
              });
              setData(result.data);
          };

          fetchData(searchDate);
      }, [refreshKey]);


      const selectDate = (mode) => {

          const DateDay = nowDate.split('-');
          let pageDate = "";        
          let pageYear  = parseInt(DateDay[0]);
          let pageMonth = parseInt(DateDay[1]);
          let pageDay = parseInt(DateDay[2]);
          let pageDay2 = "";

          if (mode == 'today') {

              setNowDate(year + '-' + month + '-' + date + ' ' + '(' + dateArray[day] + ')');

          } else {
               if (mode == 'prev') {
                  let d = new Date(pageYear, pageMonth - 1, pageDay - 1);
                  pageDate = new Date(d.getTime() - (d.getTimezoneOffset() * 60000)).toISOString().substr(0, 11);
                  pageDay2 = new Date(pageYear, pageMonth - 1, pageDay - 1).getDay();
              } else{
                  let d = new Date(pageYear, pageMonth - 1, pageDay + 1);
                  pageDate = new Date(d.getTime() - (d.getTimezoneOffset() * 60000)).toISOString().substr(0, 11);
                  pageDay2 = new Date(pageYear, pageMonth - 1, pageDay + 1).getDay();
              }

              pageDate = pageDate.slice(0, -1).replace(/(\s*)/g, "");

              setNowDate(pageDate + ' ' + '(' + dateArray[pageDay2] + ')');
          }

          setRefreshKey(refreshKey + 1);
      }

    
    return (
    		
            부분 생략
            
            <div className="d-flex justify-content-between">
                #### 전날, 당일, 다음날 버튼
                <div className=""><BsFillCaretLeftFill onClick={() => selectDate('prev')}/></div>
                <div className="h5 text-center" >{nowDate}</div>
                <div className=""><BsFillCaretRightFill onClick={() => selectDate('next')}/></div>
            </div>
    
    )
    

}

export default BoardList;