회원가입 피드백

[DevelopSoo]

1. 리액트의 장점은 새로고침 없이 화면 변경이 가능하다는 점입니다. 강제로 새로고침하지 않고 자동으로 변경하는 방법을 알아봅시다.
   

   mission/src/components/Header.tsx

   Line 18 in ace6b46

   location.reload();

2. 로그인 버튼 클릭 시 로그인 여부를 로컬스토리지에 저장해야 하지 않나요?? 로그인 여부는 저장하지 않고 로컬스토리지에서 데이터를 가져오고 끝이네용
   

   mission/src/pages/SignIn.tsx

   Lines 65 to 80 in ace6b46

   	const onSubmit: SubmitHandler<Inputs> = (data) => {
   	const storageData = localStorage.getItem('key');
   	if (storageData !== null) {
   	const signUpStorageData = JSON.parse(storageData);
   	if (
   	signUpStorageData.email === data.email &&
   	signUpStorageData.password === data.password
   	) {
   	navigate('/');
   	} else {
   	alert('이메일 또는 비밀번호가 일치하지 않습니다.');
   	}
   	} else {
   	alert('사용자 데이터를 찾을 수 없습니다. 회원가입을 먼저 진행해 주세요.');
   	}
   	};

3. 회원가입인데 서비스에서 딱 한 명만 회원가입할 수 있는 형태로 만들어져있군요.
   

   mission/src/pages/SignUp.tsx

   Line 95 in ace6b46

   localStorage.setItem('key', JSON.stringify(data));

4. 로컬스토리지에서 데이터를 가져오는 코드가 거의 비슷한 것 같습니다. 공통 함수 혹은 훅으로 빼서 재사용할 수도 있을 것 같아요
   

   mission/src/components/Header.tsx

   Lines 12 to 13 in ace6b46

   	const localStorageData = localStorage.getItem('key');
   	const storageData = localStorageData ? JSON.parse(localStorageData) : null;

5. 로그아웃하면 아예 삭제를 해버리네요. 그럼 회원가입도 다시해야하지 않나요?
   

   mission/src/components/Header.tsx

   Line 17 in ace6b46

   localStorage.removeItem('key');

6. 보통 로컬스토리지는 컴포넌트 렌더링과 상관이 없기 때문에 useEffect로 처리하는 경우가 많습니다. 로컬스토리지로 현재 로그인 상태 확인 시 useEffect를 활용해보는 것도 좋겠네요. 법칙은 아니지만 로컬스토리지에서 데이터를 가져오는 동안 렌더링이 늦어질 수도 있어서 useEffect를 많이 쓴다네요.