트위터 클론코딩 - CRUD 2

우선 트윗 코드가 좀 너저분해질 예정이기 때문에 따로 컴포넌트를 빼겠다.

 

components 폴더에 Gweets.js 폴더를 만들고 Home.js에서 필요한 것들을 props로 전달 해주겠다.

 

import React from "react";

function Gweets({ GweetObj }) {
  return (
    <div>
      <h4>{GweetObj.text}</h4>
    </div>
  );
}

export default Gweets;
-------------------------------------------
Home.js

        {dbGweets.map((gweet) => (
          <Gweets key={gweet.id} GweetObj={gweet} />
        ))}

 

---

권한

 

그 다음 삭제,수정 버튼을 만들고 글을 작성한 유저만 삭제,수정 버튼이 보이게 한다.

글을 작성할 때 db에 creatorId: userObj.uid 값을 보내주는데 그 값과 Home.js에서 

현재 로그인 하고 있는 유저의값 (App.js 에서 받아온 userObj.uid) 이랑 비교한 뒤 그 불리언 값을 Gweets.js에 props로 보낸뒤 && 연산자를 통해 렌더링 해주면 된다. (true면 렌더링 false면 비렌더링)

 

 Home.js
          
          <Gweets
            key={gweet.id}
            GweetObj={gweet}
            isOwner={gweet.creatorId === userObj.uid}
          />
          
-----------------------------------------------------

Gweets.js

function Gweets({ GweetObj, isOwner }) {
  console.log(isOwner);
  return (
    <div>
      <h4>{GweetObj.text}</h4>
      {isOwner && (
        <>
          <button>삭제</button>
          <button>수정</button>
        </>
      )}
    </div>
  );
}

 

 

이 처럼 권한에 따라 버튼이 보이고 안보인다.