Portfolio

👿 Problem

Cookie는 CSR에서 사용하는 것이나, 현재 프로젝트는 SSR이기 때문에 쿠키값을 참조할 수 없다.

함수를 실행하기 전에 랜더링이 먼저 이뤄지면서 의도한 값이 아닌 undefined 를 참조하게 된다. 또한 SWR에 의해 반복적으로 API를 재호출하여 값이 업데이트 되더라도 state 의 상태 변화가 추적이 되지 않아 제대로 값이 업데이트가 되어도 props 및 url 에 반영이 안된다.

현상

→ swr을 통해 API 통신(get요청)을 할 때 Undefined값을 참조하니, url 경로가 이상해진다.

→ props형태로 하위 컴포넌트에 데이터를 넘겨주려 해도 undefined가 전달된다

😇 Solution

쿠키 참조 문제

→ useEffect() 를 활용하여 CSR 영역에서 쿠키를 가져와서, state로 관리하도록 한다


const [user, setUser] = useState('')
useEffect(() => {
  setUser(JSON.parse(Cookies.get('user')))
}, [])

함수를 실행하기 전에 랜더링이 먼저 이뤄지면서 의도한 값이 아닌 undefined 를 참조

→ state를 useEffect() 에 넣어서 상시 추적하게 하여, 업데이트가 이뤄지도록 한다


const [user, setUser] = useState('')
const { data } = useGetUser(user.userId)
useEffect(() => {
  setUser(JSON.parse(Cookies.get('user')))
}, []) // useEffect 1
useEffect(() => {}, [user]) // useEffect 2

2-1. API url에 값을 넣어서 보내야 하는데 undefined 가 나와서 에러가 발생할 수 있는 경우

→ swr custom hook에서 인자로 받는 값이 있는 경우에만 API 요청을 한다


const useGetUser = (userId) => {
  const { data, error } = useSWR(userId ? `users/${userId}` : null, fetcher)
// userId가 있는 경우에만 request를 보낸다
  return {
    data,
    isLoading: !error && !data,
    isError: error,
  }
}

2-2. props로 값을 전달해야 하는데 undefined 가 전달되어 에러가 발생할 수 있는 경우

→ optional Chaning(?)을 써서 props값이 제대로 있는 경우에만 전달한다.

→ props가 참조하는 user state 값이 업데이트 되면, 리랜더링을 통해 업데이트 된 props 값이 전달된다


return(
<EditAboutMe userId={user?.userId} visible={visible} toggle={toggle} />
)


1. 처음에는 useGetUser()의 인자로 null들어가기 때문에 useSWR()에 의한 API 호출이 발생하지 않는다.
2. useEffect 1을 통해 CSR 영역에서 쿠키를 받아와서 user State에 저장한다.
3. useEffect 2에 의해 user State가 변했다는 것을 감지한다.
4. useSWR에 의해 API 재호출이 발생하는데, 업데이트 된 user state가 인자로 들어가기 때문에 제대로 API가 호출된다.
5. useGetUser()를 통해 user state가 업데이트 되었고, 해당 스테이트를 활용하는 dom의 경우, props를 통해 하위 컴포넌트로 전달 된다.

🧐 Reference

참 잘했어요 👍

API response값 상태 관리 문제(+Cookie)

👿 Problem

😇 Solution

🧐 Reference