[westargram] react로 옮기기 작업 2 - 메인페이지

Chanho Yoon·2021년 3월 8일
0

westargram

목록 보기
8/11

React로 옮기기 2

westagram -> 리액트로 옮기기

현재 레이아웃 옮기기는 다했고, mock데이터를 활용하는데 따로 mockdata.js로 분리해야하고, 댓글, 좋아요 기능이 state에 반영되도록 해야한다.

게시글 좋아요에 따른 state 변화

인스타그램에선 좋아요 누름과 동시에 서버로 전송하는건가?? 아니면 먼저 좋아요 컴포넌트 sate에 like 버튼 수를 바꾸고 몇 초 뒤에 서버로 전송하는건가??

게시글 댓글 입력

게시글 댓글 삭제

  removeComment = ( id ) => {
    this.setState({
      comments: this.state.comments.filter(( comment ) => comment.id !== id)
    });
  };

filter를 활용해서 id가 다른 것만 놔두고 새로운 배열로 반환

댓글삭제시 문제 발생

댓글 추가할 때 id값으로 comments.lenghid값을 주었는데 중간 댓글을 지우고 다시 입력하면 중복되는 id값이 생겨서 같이 지워져버리는 현상 발생
해결법으로 `react-uuid'를 사용하였다.

import uuid from 'react-uuid'
...생략
const comment = {
      'id'  : uuid(),
      'name': 'test',
      'text': this.state.comment
    };
    this.setState({
      comments: this.state.comments.concat(comment)
    });

mock 데이터 활용

실제 db에서 받아온 데이터처럼 사용하기 위해 .json 파일을 따로 만들어 fetch로 요청해서 json 데이터를 받아오도록 하자.

contentHeaderObj.json
mainContentObj.json 파일로 따로 분리해서 data 폴더에 넣었다. 이것을 요청하려면 현재 local주소인 http://localhost:3000/data/mainContentObj.json 을 하게되면 아래와 같이 json 객체로 저장된 데이터를 확인할 수 있다.

fetch로 json 객체를 받아오는 코드

  componentDidMount() {
    fetch('http://localhost:3000/data/contentHeaderObj.json', {
      method: 'GET'
    })
    .then(res => res.json())
    .then(data => {
      this.setState({
        contentHeaderObj: data,
      });
    });

    fetch('http://localhost:3000/data/mainContentObj.json', {
      method: 'GET'
    })
    .then(res => res.json())
    .then(data => {
      this.setState({
        mainContentObj: data,
      });
    });
  }

의문점

아직도 리액트의 단방향 데이터 흐름을 잘 이해하지 못하겠다..

만약 하나의 게시글이 있다고 하면 해당 게시글에 제목,내용,댓글,좋아요 등을 한 번에 다 가져오고 자식 컴포넌트로 데이터만 뿌리고 그 자식 컴포넌트에서는 데이터를 출력하고 요청이 들어오면 ajax를 사용해서 서버로 보내는건가?? 그렇다면 처음 받아본 최상위 부모 컴포넌트에서 받아온 데이터는 굳이 자식 컴포넌트에는 수정을 안해도 되는건가??

프론트 단에서 우선 (빠르게) 사용자 액션에 따라 보이는 뷰가 바뀌게 하는 방식.
자식 컴포넌트가 부모 컴포넌트의 state 값을 변화시는 방식으로 구현할 수 있습니다. 이 때 보이는 뷰는 실제 데이터로 받아온 데이터는 아니겠네요. 사용자 입장에서 즉각적으로 변화가 일어난 것 처럼 보입니다.
화면에 보여지는 뷰가 무조건 백엔드로 부터 받아온 데이터에 기반하게 하는 방식.
말씀하신대로 이벤트 발생 - 해당 이벤트에 대해 서버와 통신 - 그 결과값 서버로 부터 받아옴 - 받아온 데이터에 기반한 state 변화 - 뷰 변화로 이루어 집니다.
만약 결제 시스템(예를 들어 장바구니)와 같은 민감한 정보의 경우 2번 방식으로 하여 반드시 보여지는 화면과 실제 서버의 데이터가 정확히 일치하도록 설계 할 수 있을 것 같네요.

명쾌한 답변에 궁금증 해결!!

  • 실제 데이터에서 받아온 방식이 아닌 일단 사용자에게 즉각적으로 보여지게 하는 방식
  • 보여지는 화면과 실제 서버의 데이터가 정확히 일치하도록 하는 방식

0개의 댓글