[Error Handling] My Page 의 제어 컴포넌트(Controlled Component) 관련 에러

[slight-snow]

어떤 에러인가요?

• 페이지를 구성하는 컴포넌트 내에서 임의의 값이 제어되지 않는 경우 발생하는 에러입니다.

  

• Client 상의 코드는 아래와 같습니다.

              <input
                className={styles.mypage_id_name}
                value={userId}
                placeholder={userId}
                disabled
              />

• userId 는 React 의 useState 를 통해 상태로 관리되며, useEffect 를 통해 My Page 가 최초로 렌더링될 때 axios 요청을 통해 서버에서 받은 응답 중 사용자의 아이디에 해당하는 값을 setUserId 라는 상태변경 함수를 통해 userId 에 할당합니다.
• 하지만 서버상의 에러 혹은 클라이언트 상의 잘못된 요청으로 사용자의 아이디에 해당하는 값이 undefined 가 될 수 있기에 위의 코드는 value 의 값이 undefined 가 되어 예상치 못한 즉, 제어되지 않은 값을 지닐 수 있습니다.
• 그렇기에 컴포넌트 상의 값이 제어되지 않았다는 에러 문구가 나타난 것입니다.

에러 핸들링 방법

• 간단하게, userId 가 undefined 라는 값을 가지는 경우를 value 에 작성해주면 됩니다.

            <input
              className={styles.mypage_id_name}
             // userId 가 undefined 일 경우, 빈 String 값인 '' 를 할당하도록 합니다.
              value={userId || ''}
              placeholder={userId}
              disabled
            />

• 위와 같이 || 를 통해 값이 제어되도록 설정하면 에러 문구가 더 이상 나타나지 않습니다 :)

에러 핸들링을 위해 참고한 레퍼런스 링크

• StackOverflow 의 QnA 를 참고하였습니다. StackOverflow