React.js를 이용해서 게시판 만들기

※2021-하계-학교-스터디※

0. 디렉토리

1. 컴포넌트 

리스트, 게시글을 컴포넌트로 생각!

[그림1] 컴포넌트

2. 코드

item.js (게시글 컴포먼트)

// item.js
// 게시판 컴포넌트 만들기 = [그림1]의 녹색 부분 
import React, { useState } from 'react';
function Item({item}){
    return (
      <div>
          <span>{item.id}</span>
          <span>{item.title}</span>
          <span>{item.createdAt}</span>
      </div>
    );
}
export default Item;

• 함수 Item의 매개변수 item은 properties속성으로 props라고도 불린다. 
• 이 함수는 item을 받아서 해당 item의 id, title, createdAt을 박스에 담아 출력한다.

list.js (리스트 컴포넌트)

import React, { useState } from 'react';
import Item from './item';
function List({items}){
    // 출력하는 과정1
    return (
      <div>
          {
              items.map((item)=>
                  <Item item = {item}/> 
              )
          }
      </div>
    );
}
export default List;

• <div>태그 안에 있는 map를 이용해 동적인 List를 반영할 수 있게 리팩토링한다. 물론, 아래와 같이 작성할 수도 있지만 item이 10개만 넘어가도 쉽지 않다.

  <div>
    <Item item={items[0]}/>
    <Item item={items[1]}/>
    <Item item={items[2]}/>
    <Item item={items[3]}/>
  </div>

• items(=list)를 매개변수로 받아서 각 원소를 item.js의 item매개변수로 넘겨준다. 

App.js (브라우저 컴포넌트: c/c++의 main문과 같음)

import logo from './logo.svg';
import './App.css';
import List from './components/list';
import axios from 'axios';
import {useState, useEffect} from 'react';
function App() {
  const list = [
        {id:1,title: "우상혁 2m 35cm 대박!!",createdAt:"2021.06.30"},
        {id:2,title: "양궁 안산 3관왕!!! ",createdAt:"2021.07.01"},
        {id:3,title: "야구 준결승 진출!!",createdAt:"2021.07.01"},
        {id:4,title: "여자 배구 8강 진출!!",createdAt:"2021.07.03"},
        {id:5,title: "펜싱 단체 금메달!!!",createdAt:"2021.07.04"},
    ]
    return (
      <div>
        <List items={list}/>
      </div>
    );
}
export default App;

<실행순서>

1. 일단, 직접 정의한 리스트(list)를 이용해 화면에 출력할 것이다. 
2. return문의 <List items={list}/> 에서, 앞서 정의한 list를 List태그에 넘겨서 리스트 컴포넌트를 구성할 것이다.
3. list를 전달받은 List태그의 매개변수 items는 원소들을 list.js로 전달된다. list.js는 map을 이용해 App.js에서의 list원소들을 item.js에 하나씩 넘겨준다. 
4. 각 원소(게시물 컴포넌트)를 전달받은 item.js에서는 해당 item의 id, title, createdAt를 출력한다. 

3. 서버와의 통신 Axios

❗🤔❓❗ 만약 사용자가 직접 리스트를 정의하는 것이 아니라, 데이터가 모여있는 어떤 서버와 통신을 해서, 그 데이터로 게시판을 만들고 싶을 수도 있다. 그러기 위해서 필요한 라이브러리가 있는데, 바로 axios이다. 

다음 라이브러리를 설치하려면, 아래의 명령어를 해당 프로젝트가 있는 폴더 레벨에서 실행해준다. 

npm i axios

axios라는 라이브러리는, HTTP 통신을 가능하게 해주는 라이브러리로, 간단하게 생각하면, 클라이언트가 서버와 통신할 수 있게 해준다. 

 

HTTP 통신에는 4가지 Method가 존재한다. 

• GET 
• POST
• PUT
• DELETE

이 명령어들은 CRUD와 연관지어 이해하면 쉽다. 아래의 표를 참고하면 좋을 것 같다. 

(CRUD: 웹 개발을 할 때 필요한 기능에 대한 축약어) 

//App.js
import logo from './logo.svg';
import './App.css';
import List from './components/list';
import axios from 'axios';
import {useState, useEffect} from 'react';
function App() {
  const [posts, setPosts] = useState([]);
  //웹에서 서버로 요청 --> 나 리스트 전달해줘 
  const getPosts = () =>{
    axios
    .get('서버주소')  //axios를 통해 HTTP요청을 보내는 코드
    .then((response)=>{ //then()에서는 HTTP요청을 통해 받아온 데이터를 처리할 수 있다
      setPosts(response.data); // 이전에 useState으로 생성했던 setPosts함수를 통해 data를 posts에 저장합니다.
    })
  }
  useEffect(getPosts, []);
  return (
    <List items={posts}/>
  );
}
export default App;

• axios 라이브러리와 react라이브러리로부터 useEffect함수도 import해줘야 한다.
  
• useEffect
  • 내부에서 posts의 state을 변경시킨 결과로 인해 컴포넌트의 재 렌더링(화면에 그려지는 것)이 일어나게 된다.
  • 렌더링 -> useEffect -> posts state 변화 -> 렌더링 -> useEffect -> posts state 변화 -> 렌더링 
  • 이를 해결하기 위해 useEffect에 두번째 인자를 전달한다. 빈 배열( [] )을 전달하면 변화를 감지할만한 요소 자체가 없으므로 useEffect는 최초 렌더링시에 한번만 실행되는 것이 보장된다. 두번째 인자로 배열을 전달하면 렌더링시에 배열 내의 요소가 변화될 때에만 useEffect를 실행한다. 렌더링시에는 다시 useEffect가 실행되니 아래와 같이 무한렌더링이 일어나게 된다.

4. 결과

npm start를 하면 결과를 확인할 수 있다.

위의 결과에 css코드를 더 가미하면 실제 게시물을 만들 수도 있게 된다.

아래의 코드를 App.css에 넣어주자.

.div{
  border-radius: 5px;
  background-color: white;
  margin: 20px;
  padding:10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.title{
  font-weight: bold;
}

그리고 item.js에서 <div> 태그를 이렇게 바꿔주자. 

<div className="div">
  <span>{item.id}</span>
  <span className="title">{item.title}</span>
  <span>{item.createdAt}</span>
</div>

그러면 다음과 같이 정렬된 상태로 출력할 수 있다.

cf) useEffect를 이해하는데 참고한 링크

https://codingbroker.tistory.com/30 

[react] 예제로 따라하는 리액트 훅(hook) - useEffect