[react] react 실전 & Rest API ② - postView 만들기

글을 작성하고 제출하면 아래에 목록이 나오는 postView를 만들 것이다.

1. posting section 만들기
   글을 쓸 수 있는 폼을 만든다. input과 textarea에는 onChange 이벤트를 걸어서 value가 바뀔 때마다 바로 바로 값을 넣어준다.
   form 에는 onSubmit 이벤트를 걸어준다.

      handlingChange = (event) =>{
      this.setState({[event.target.name]:event.target.value}) // 값이 변할때마다 setState
        }
      handlingSubmit = async (event) =>{
        event.preventDefault() // event 기능 -> 막는다 
        let result = await api.createPost({title:this.state.title,content:this.state.content})
        //createPost 구성은 api 문서에 작성된대로
        //await를 사용해서 동기 처리될 수 있도록함
        console.log("완료됨!",result) 
      }
      render(){
        return (
          <div className="PostingSection">
              <h2>글 작성하기</h2>
              <form onSubmit={this.handlingSubmit}>
                <input
                  name="title"
                  value={this.state.title}
                  onChange={this.handlingChange}
                />
                <textarea
                  name="content"
                  value={this.state.content}
                  onChange={this.handlingChange}
                />
              <button type="submit">제출하기</button>
              </form>
          </div>

   npm start 하고 실제로 글을 작성하고 제출해보면 개발자도구 > 콘솔창에서 데이터가 잘 넘어가는 것을 확인할 수 있다.

2. ViewSection을 만든다. 작성한 글 목록이 보여지게 된다.

   <div className="ViewSection">
       /* PostView 자리 */
   </div>

3. PostView를 만든다. PostView는 ViewSection 안에 들어가게될 자식 컴포넌트다.

   src > Components 폴더를 만들고 그 안에 PostView.js를 만들어 다음과 같이 작성해준다.
   PostView는 App으로부터 props를 받아서 id,title,content를 뽑아낸 후 표시한다.
   하지만 지금은 받을 수 있는 props가 없으므로 dummy_prop을 만들어서 임의로 표시 했다.

   import React, { Component } from 'react';
   const dummy_prop = {
     id: '1'
     title:'테스트용',
     content:'테스트용 글입니다.'
   }
   class PostView extends Component {
     render() {
         const {id,title,content} = dummy_prop
         return (
             <div>
                 {id}
                 <h3>{title}</h3>
                 <p>{content}</p>
             </div>
         );
     }
   }
   
   export default PostView;

4. 작성한 모든 post를 불러와보자
   우선 api와 PostView를 App에 import하고 getAllPosts()를 해준다. 데이터를 불러오기 가장 적절한 상태는 componentDidMount이다.

   • getPost()라는 함수를 아래와 같이 만든 후 componentDidMount에서 호출한다.

   • 불러온 데이터를 저장해놓을 results라는 state를 배열 형태로 추가해준다.
     _result라는 변수에 api.getAllPosts()로 작성한 모든 글을 불러와서 넣는다. 이때 await를 해주는 이유는 비동기로 처리하게 되면 아래 setState에서 getAllPost()결과를 기다리지 않고 먼저 동작하여 results state에 undefined를 넘겨주기 때문이다.

      (생략)
      import api from './api';
      import PostView from './Components/PostView'
     
      class App extends React.Component {
        constructor(props){
          super(props)
          this.state ={
            title:'',
            content:'',
            results:[],
          }
        }
      componentDidMount(){
        this.getPosts()
      }
      async getPosts(){
        const _results = await api.getAllPosts()
        //_results.data 아무 것도 없음
        //api 요청을 기다리지 않고 비동기로 처리해서 그럼
        //async와 await로 해결
        this.setState({results:_results.data})
        console.log(_results)
      }
     

5. 불러온 데이터를 PostView 컴포넌트에 뿌려주자.
   비어 있던 ViewSection에 map를 이용하여 PostView로 채워준다.

        <div className="ViewSection">
         {
           this.state.results.map((post) =>
           <PostView 
             key = {post.id}
             id = {post.id}
             title={post.title}
             content={post.content}
           />
           )
         }
       </div>

6. PostView에 dummy_prop를 진짜 props로 바꿔주자.

    class PostView extends Component {
    render() {
        const {id,title,content} = this.props 
        return (
            <div>
                {id}
                <h3>{title}</h3>
                <p>{content}</p>
            </div>
        );
    }
}

잘 나옴

실행결과