TIL_인증확인 후 조건부 렌더링 하기

1. 메인페이지 이동했을 때 /me API 정보를 통해 유저의 정보를 가져오기

1) 메인페이지에 내 정보 가져오기 -발급된 access_token정보 입력해주기
(데이터를 가져오는 타이밍은 조건에 따라 다름 - useEffect 사용

useEffect(() => {
	fetch("http://auth.jaejun.me:10010/me", {
    method: "GET",
    header: {
     Authorization:
     "토큰 정보"
     },
     })
     .then((res) => res.json()
     .then((data) => console.log(data)
},[])

여기까지 하면 콘솔에 이메일이 잘 찍히는 것을 볼 수 있음.
그러면 이제 내 이메일이 UI 페이지에 찍히도록 해야함.

2. Response에 유저의 정보가 잘 담겨있다면 유저의 이메일을 UI에 출력하고 아니면 바로 로그인화면으로 갈 수 있게 하기

• 아이디가 있거나, 없거나 : 조건부 렌더링 - 삼항 연산자 사용

useEffect(() => {
fetch("http://auth.jaejun.me:10010/me", {
    method: "GET",
    header: {
     Authorization:
     "토큰 정보"
     },
     })
     .then((res) => res.json()
     .then((data) => {
      data.email !== undefined 
      ?setGetUser(data)
      :console.log("bye") // 이메일이 undefined가 아니면, 데이터 가져오기.
      });
},[])
~~
//아이콘 부분
<p>{getUser && getUser.email}</p>

// 그냥 {getUser}로 담아주면 안됨. 여기서도 조건부 렌더링이 들어가야함.
첫 렌더링했을 때 값이 없으니까 오류가 뜸. 이때 경우의 수가 1개니까 
&& 연산자 사용 - 계정 있을 때만 렌더링 할 거니까.

• 유저 정보 없으면 로그인페이지 가게 하기 ➡️ useNavigate
  (페이지 이동 시에 link : 조건없이 바로 넘어갈때 / navigate : 조건 있을 때)

import { useNavigate } from "react-router-dom";

function Main() {
 const navigate = useNavigate();


 useEffect(() => {
    fetch("http://auth.jaejun.me:10010/me", {
      method: "GET",
      headers: {
        Authorization:
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo2NiwiaWF0IjoxNjYxMjY4MjcwLCJleHAiOjE2NjM5NDY2NzB9.i32_BYRvoN4gxzBcwT5dXAhccbDKnKn85hUmcPgnlHQ",
      },
    })
      .then((res) => res.json())
      .then((data) => {
        data.email !== undefined ? setGetUser(data) : navigate("/"); //("/login")인데 나는 로그인 페이지 경로가 그냥 / 이라 이렇게 적음.
      });

  }, []);
  

이렇게 잘 들어왔다!!! 뭔가 아이디만 들어오게 하고 싶은데...
애초에 이메일 형식으로 API 가져와서 그건 안될 것 같다 ㅎㅎ..
오늘 뭔가 너무 많이해서 ... 내일 또 복습해야할 듯!!