useSelector, useState 를 같이 사용하며 생긴 문제점

useSelector를 통해 redux의 store의 상태를 useState로 컴포넌트의 상태로 할당해주려 했으나 undefined를 반환하는 결과가 발생했다.

문제점은 다음과 같았다.

실행되는 시점의 문제
useState: 컴포넌트가 렌더링 되기 전에 실행
useSelector: 컴포넌트가 렌더링 된 후에 실행

즉 실행시점이 useState가 더 빠르기 때문에 발생하는 문제였다.
그렇다면 이 문제를 어떻게 해결해야할까 고민을 하다 발결한 해결방법이다.

	const currentNickName = useSelector((state: RootState) => state.member.memberinfo?.nickName);
	const currentEmail = useSelector((state: RootState) => state.member.memberinfo?.email);

	const [replaceNickName, setReplaceNickName] = useState<string | undefined>(undefined);
	const [replaceEmail, setReplaceEmail] = useState<string | undefined>(undefined);

	useEffect(() => {
		setReplaceNickName(currentNickName);
		setReplaceEmail(currentEmail);
	}, [currentNickName, currentEmail]);