React - 로그인 전역관리
💜 localStorage 와 useState Hook을 사용한 로그인 전역관리
[ 김보윤 ]
- localStorage 와 useState Hook을 사용한 로그인 전역관리
- 실제 구현 모습
- 작성한 코드
- fetch 함수를 이용하여 위시리스트와 장바구니 상품 목록의 데이터를 불러옴
- 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]);
- 데이터 베이스로 부터 전송받은 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>
Author And Source
이 문제에 관하여(React - 로그인 전역관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bboyooning/4uoevywk저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)