auth를 이용하여 해당 uid 로그인시에만 버튼 노출 여부

[김상우]

리액트에서 회원가입 후 유저가 생성 될탠데
유저1
유저2
유저3
이라는 회원이 있다고 할때

유저1에는 간단히 admin 권한을 위하여 글쓰기 버튼을 보여주고
나머지 유저들은 글쓰기 버튼을 볼 수 없습니다.
이런 코드를 짤때
유저 정보가 auth 객체에 담겨 있고 onAuthStateChanged 로 인증 상태변경을 감지시키고
유저1이 로그인 했을 시 글쓰기 버튼을 보여준다고 할때
(auth 정보가 user에 담겨있을 시)user.uid === 해당유저의uid ? <버튼> : null

이런식으로 쓸 수 있을까요?
아니라면 어떤 방식으로 구현해야 할까요?

[codingapple]

로그인 후에 유저정보를 state 아니면 localstorage에 넣어두고
위처럼 삼항연산자같은거 쓰면 됩니다

[김상우]

          {
            user.uid === "mRuiAcm0cDZvSIuFALYuCREHb5j2" ? <Link as={Link} to="/writing"><span className="product_span">상품등록</span></Link> : null
          }

이렇게 하니깐 로그인 되있을땐 잘되는데
로그아웃 버튼 누르니깐 빈페이지에 이런 에러들이 나옵니다ㅠㅠ
user는 ContextProvider.js에서 받아온 유저객체입니다.
로그인 페이지, 회원가입 페이지는 별도로 존재하고 auth를 이용했습니다

[codingapple]

user라는 변수에 뭐가 있으면 user.uid 하라고 if문같은거 추가합시다 
mRuiAcm0cDZvSIuFALYuCREHb5j2 이런거 직접 저장하는거보다 
유저이메일이나 role 항목같은거 만들어서 그거 보관해두는게 나을듯요 

[김상우]

ContextProvider.js에서 조건문을 달면 될까요?
어떻게 작성해야할지 자세히 알 수 있을까요?ㅠㅠ
계속 실패합니다....

const [user, setUser] = useState(null); 
const [role, setRole] = useState("") 
로 지정했고

useEffect안에서
auth.onAuthStateChanged(setUser) 이렇게 되있을때

useEffect 밖에서
if(user){
  setRole(user.uid)
}

이런식으로 하는게 아닌가요?ㅠㅠ...

[codingapple]

.uid 쓰는 곳에다가 if문 추가하면 됩니다
undefined 아니면 null 값에 점찍으면 에러내줍니다

[글쓴이]

글