[Next.js] Warning: A component is Changing an uncontrolled input to be controlled Error

[React] 경고: 구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다. 에러

 

구성 요소가 제어되지 않은 입력을 제어하도록 변경하고 있습니다.

[Next.js] Warning: A component is Changing an uncontrolled input to be controlled Error Page

기본적으로 말 뜻대로 react 구성요소가 제어할 수 없는 (선언되지 않거나, 제어할 수 없는) 입력을 제어하도록 변경하고 있을 때, 나타나는 경고로 화면에 값이 표현되지 않거나 동작자체가 이상해질 때(체크 박스, 라디오 박스 등 개발자가 의도한대로 동작하지 않음)도 있는 반면에 동작은 정상적으로 되는데 콘솔창에 나타날 때도 있다.

 

에러가 발생하며 동작자체가 이상해질 경우

* 겪어본 해결방법

1. 사용하려는 값이 의도한대로 존재하는가? 확인해보기

내가 사용하고 제어하려는 값 (변수, state) 등의 값이 내가 의도한대로 들어가지 않았을 경우가 있다. 

이 때문에 없거나 다른 값을 제어하다보니 개발자가 의도한 동작이 되지 않는다.

 

2. 선언 Scope 확인

보통 전역Scope로 선언된 변수나 state 이름 그대로 지역Scope에서 사용할 경우 발생, 반대의 경우에는 컴파일시 미리 잡힘

 

 

에러가 발생하며 동작은 하는데 값이 표현이 되지않거나 동작은 제대로 할때의 해결방법

 

1. 부모 컴포넌트에서 props로 전달받는 값

2. 백엔드에서 전달받는 값 등 외부에서 전달되는 값

3. 비동기로 처리되어 반환되는 값

주로 위의 3가지 값을 포함하여 전달받아야 되는

값을 화면 내 첫 렌더시, 초기화 기능이 있는 버튼 클릭 시, 새로고침 (F5)로 인하여 undefined가 들어갔을 경우 해당 에러가 발생한다.

 

* 겪어본 해결방법

1. 전달 받는 값의 초기화 값을 설정해주고 전달 받는 값이 없을 경우 초기화 값을 넘겨준다.

2. 초기화 버튼 시 변수나 state등 모든 값들을 초기화 해줘야 하는데 빠진게 없는지 확인한다.

 

예시)

1.

초기 값을 []같은 빈 배열로 선언한 state가 후에 배열에 값이 들어올 경우 크기가 달라져 새로고침시에 에러가 발생했다.

const [test, setTest] = useState<boolean[]>([]);

...

onSuccess: (data) => {
    let checkList = [];
    for (let i = 0; i < data.docs.length; i++) {
      checkList.push(false);
    }
    setTest([...checkList]);
},

...

 

2. 받는 배열의 최대 크기만큼 같은 타입의 falsy값(false)으로 넘겨주어 해결했다.

  const init = [false, false, false, false, false, false, false, false, false];
  const [test, setTest] = useState<boolean[]>([...init]);

...

onSuccess: (data) => {
    let checkList = [];
    for (let i = 0; i < data.docs.length; i++) {
      checkList.push(false);
    }
    setTest([...checkList]);
},

...

 

3.

이후 해당 배열을 초기화해주는 버튼을 클릭 시에 배열을 []로 초기화 한다면 초기화 시 에러 발생

받는 배열의 크기만큼 같은 타입의 falsy값을 초기화 값으로 설정하여 초기 값 설정, 초기화시 Handler에 사용

onClick={() => {
		   
         ...
        
        setCheckList([...init]);
        
         ...
        }
    }

 

정리

1. 사용하려는 값을 정확하게 파악해서 잘 사용하고,

2. 초기화, 할당을 논리적으로 잘만 해준다면 겪지 않을 문제이다.