React - 로그인 전역관리

💜 localStorage 와 useState Hook을 사용한 로그인 전역관리

[ 김보윤 ]

• localStorage 와 useState Hook을 사용한 로그인 전역관리
• 실제 구현 모습

• 작성한 코드

1. fetch 함수를 이용하여 위시리스트와 장바구니 상품 목록의 데이터를 불러옴
2. useEffect 에서 해당 함수를 실행 시키고, 의존성 배열 안에 해당 state 값을 넣어서 값이 변경될 때 리렌더링 되도록 함

const [wishList, setWishList] = useState(0);
const [myBagList, setMyBagList] = useState(0);

  useEffect(() => {
    fetch(`${BASE_URL}/users/wishlist`, {
      headers: { Authorization: localStorage.getItem('token') },
    })
      .then(res => res.json())
      .then(data => setWishList(data.wish_list));
  }, [wishList]);

  useEffect(() => {
    fetch(`${BASE_URL}/carts`, {
      headers: { Authorization: localStorage.getItem('token') },
    })
      .then(res => res.json())
      .then(data => setMyBagList(data.carts));
  }, [myBagList]);

3. 데이터 베이스로 부터 전송받은 user의 이름을 localStorage 에 저장한 후 이를 변수에 담아 조건부 렌더링 실행

const userName = localStorage.getItem('first_name');

<button className="navBtn" onClick={openModal}>
  {userName ? `${userName}님, 반가워요!` : 'Sign in | Sign Up'}
</button>
<button className="navBtn">
  {userName ? `My Wish List(${wishList.length})` : 'My Wish List'}
</button>
<button className="navBtn">
  {userName ? `My Bag(${myBagList.length})` : 'My Bag'}
</button>