부모에게 받은 값이 부모의 상태라면, 자식은 부모의 상태가 바뀌는지 인지하지 못하므로 의존성을 걸어줘야한다
문제 상황
// likeCount 부모 컴포넌트에서 likeCount가 0에서 바뀐다
// 자식은 최종적으로 변화된 값을 초기값으로 사용해야하기 떄문에
// 자식도 변화를 그대로 이어받으려면 자식 컴포넌트 내에서 의존성을 걸어줘야한다
export const LikeToggle = ({ id, isLiked, likeCount, onClick }) => {
const [state, toggle] = useToggle();
const [count, setCount] = useState(likeCount);
useEffect(() => {
isLiked && toggle();
}, []);
해결
export const LikeToggle = ({ id, isLiked, likeCount, onClick }) => {
const [state, toggle] = useToggle();
const [count, setCount] = useState(0);
useEffect(() => {
isLiked && toggle();
setCount(likeCount);
}, [likeCount]);
contextApi에 토큰 값을 저장해서 라우터의 리다이렉트의 기준으로 쓸 시, 비동기 상황과 맞물려 제대로 동작하지 않는다 세션에 토큰은 있는데 contextApi의 토큰 변수가 갱신되지 않을 수 있다
⇒ contextApi의 토큰 변수와 세션 스토리지의 토큰 유무를 모두 비교해준다
const getInitialData = async () => {
const { data } = await getMyInfo(); // 불러오는 시간이 걸린다
setUserInfo({
token: sessionStorage.getItem('authorization'),
username: data.userName,
userId: data.userId,
group: data.group,
});
};
<Route path="/signup" exact component={SignUpPage}>
{hasAuth || sessionStorage.getItem('authorization') ? (
<Redirect
to={{
pathname: '/',
state: {
from: '/signup',
},
}}
/>
) : (
<SignUpPage />
)}
</Route>