[ReactJS] React Hook useState(), useEffect() 사용하여 데이터 요청 및 관리 (React로 아주 간단한 게시판 만들기 - 3)

이번장에서는 React의 핵심 기능이라고 할 수 있는 컴포넌트에서 사용되는 useState()와 useEffect()를 활용하여 이전에 게시글 목록 구성에 사용되었던 mock 데이터 구조를 변경하도록 하겠습니다.

우선 해당 포스팅은 React에만 초점이 맞춰져 있기 때문에 별도의 API는 구성하지 않을겁니다.
따라서 통상적으로 이루어지는 useEffect 과정에서의 ajax 요청 대신에 소스상에 게시글 목록 데이터를 가지고 있는 전역변수를 두고 해당 값을 사용하는 방향으로 작성됩니다.

 

이전글

2020/10/29 - [ReactJS] - [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (ReactJS로 아주 간단한 게시판 만들기 - 2)

[ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (ReactJS로 아주 간단한 게시판 만들기 - 2)

 

우선 React Functional Component의 핵심 요소인 useState()와 useEffect() React Hook 함수에 대해 짚고 가겠습니다.

useState()

useState는 컴포넌트에서 관리되는 변수(상태)값을 다루는데 사용됩니다.

기존에 Class Component에서 내부 컴포넌트 상태값으로 사용되었던 state 값 그리고 state 값을 변경하는데 사용되었던 setState 함수를 Funtional Component에서 useState() 함수를 통해 컴포넌트 내에서 사용될 state 변수 값과 그에 해당되는 setter method를 함께 생성해하여 배열 형태로 전달해 줍니다.

 

예를들어 아래와 같은 Class 형 Component를

class Counter extends Component {
    state = {
    	count: 0
    }
    
    increaseCount = () => {
    	this.setState({
        	count: this.state.count + 1
        })
    }
}

Function 형 Component로 대체했을때 아래와 같이 더욱더 간단하게 구성할 수 있습니다.

const Counter = () => {
    const [ count, setCount ] = useState(0);

    const increaseCount = () => {
    	setCount(count + 1);
    }
}

useEffect()

useEffect는 컴포넌트의 상태값 변화에 따라 컴포넌트 내부에서 변경이 이루어져야 되는것들을 처리할 수 있습니다.

Class Component에서 사용되는 Component Lifecycle 관련된 함수들(componentDidMount, shouldComponentUpdate, componentWillMount 등)의 역할을 그대로 맡아 처리할 수 있습니다.

기본 형태는 다음과 같습니다.

const Counter = () => {
    useEffect(() => {
    	데이터_가져오는_함수();
    }, [ ]);
}

첫번째 인자값으로 함수를 필요로하고 두번재 인자값으로 배열형태의 값을 필요로 합니다.

두번째 인자값에는 보통 컴포넌트 state 값이 들어가는데 배열에 포함된 값이 변경되었을때 해당 useEffect 내부 로직이 실행됩니다.

 

useState(), useEffect()를 비롯한 React Hooks에 관하여 더욱더 자세히 알아보고 싶다 하신다면 아래의 링크를 참조하시기 바랍니다.

Using the State Hook – React

 

 

이전 포스팅에 이어 Table에 직접 넣어주었던 게시글 데이터를 먼저 수정해주도록 하겠습니다.

앞서 말했듯이 이번 포스팅에서는 따로 서버와 통신하여 데이터를 주고받는 내용은 포함하지 않을것이기 때문에 아래의 소스 파일을 작성함으로 Data Store의 역할을 할 수 있도록 하겠습니다.

 

• src/Data.js - Github에서 소스보기

const postList = [
  {
    "no": 1,
    "title": "첫번째 게시글입니다.",
    "content": "첫번째 게시글 내용입니다.",
    "createDate": "2020-10-25",
    "readCount": 6
  },
  {
    "no": 2,
    "title": "두번째 게시글입니다.",
    "content": "두번째 게시글 내용입니다.",
    "createDate": "2020-10-25",
    "readCount": 5
  },
  {
    "no": 3,
    "title": "세번째 게시글입니다.",
    "content": "세번째 게시글 내용입니다.",
    "createDate": "2020-10-25",
    "readCount": 1
  },
  {
    "no": 4,
    "title": "네번째 게시글입니다.",
    "content": "네번째 게시글 내용입니다.",
    "createDate": "2020-10-25",
    "readCount": 2
  },
  {
    "no": 5,
    "title": "다섯번째 게시글입니다.",
    "content": "다섯번째 게시글 내용입니다.",
    "createDate": "2020-10-25",
    "readCount": 4
  },
];

const getPostByNo = no => {
  const array = postList.filter(x => x.no == no);
  if (array.length == 1) {
    return array[0];
  }
  return null;
}

export {
  postList,
  getPostByNo
};

간단하게 게시글 리스트를 갖고 있는 변수를 만들어주고 특정 게시글 번호를 통해 게시글 객체를 가져올 수 있는 함수 getPostByNo를 만들어주도록 합니다.

 

그리고나서 PostList을 아래와 같이 수정해줍니다.

 

• PostList.js - Github에서 소스보기

import React, { useState, useEffect } from 'react';
import CommonTable from '../../component/table/CommonTable';
import CommonTableColumn from '../../component/table/CommonTableColumn';
import CommonTableRow from '../../component/table/CommonTableRow';
import { postList } from '../../Data';

const PostList = props => {
  const [ dataList, setDataList ] = useState([]);

  useEffect(() => {
    setDataList(postList);
  }, [ ])

  return (
    <>
      <CommonTable headersName={['글번호', '제목', '등록일', '조회수']}>
        {
          dataList ? dataList.map((item, index) => {
            return (
              <CommonTableRow key={index}>
                <CommonTableColumn>{ item.no }</CommonTableColumn>
                <CommonTableColumn>{ item.title }</CommonTableColumn>
                <CommonTableColumn>{ item.createDate }</CommonTableColumn>
                <CommonTableColumn>{ item.readCount }</CommonTableColumn>
              </CommonTableRow>
            )
          }) : ''
        }
      </CommonTable>
    </>
  )
}

export default PostList;

여기서는 useState(), useEffect()와 같은 React Hooks 함수를 사용합니다.

 

우선 컴포넌트 내부에서 state 변수로 사용될 dataList을 useState()를 통하여 생성해주고

useEffect()로 Componnet가 최초로 Render 되었을 때 위에서 생성해준 postList를 setDataList() 함수를 이용해 dataList의 값을 초기화 해주도록 합니다.

그리고 나서 dataList를 map() 함수를 활용해서 테이블 형태로 render 하도록 합니다.

 

 

다음장에 이어서

2020/10/29 - [ReactJS] - [ReactJS] react-router 활용하여 게시글 상세 페이지 구성 및 마무리 (ReactJS로 아주 간단한 게시판 만들기 - 4)

---

프로젝트 예제 소스코드 주소

youspend8/react-simple-blog-example