input 요소 uncontrolled와 controlled 관련 Warning

 

<input
  type="text"
  value={percent}
  onChange={(e) => handleInputChange(e.target.value)}
  placeholder="0.00~100.00"
  min="0.00"
  max="100.00"
/>

아래와 같이 0.00에서 100.00까지 값이 입력가능한 인풋이 있습니다.

 

이때 컴퍼넌트에서 우리는 해당 컴퍼넌트가 control 되야하는지 유무에 따라서 

값을 state로 다뤄야할 지 ref로 다뤄야 할 지 결정해야 합니다.

저 같은 경우에는 값이 음수는 입력이 되지 않고, 100을 초가화지 않는 2자리 소수의 값을 입력 받기 위해 100이상의 값은 100, 0이하의 값은 0으로 바꾸려고 합니다.

즉 input값이 controlled입니다.

 

따라서 state를 이용해서 초기값을 관리하고 있는데, 이때 초기값은 undefined로 지정했습니다.

  const [percent, setPercent] = useState<string>();

 

하지만 React에서 input의 초기값을 undefined로 설정할 경우에는 uncontrolled라고 해당 input을 여깁니다.

이를 제가 값이 입력될 떄는 controlled 요소처럼 다루어서 위와 같은 경고문이 발생했습니다.

 

입력전에는 placeholder 값이 보이도록 하기 위해서 초기값을 undefined로 지정했는데 placeholder는 빈문자열이 와도 보이게 됩니다.

따라서 초기값을 "" 로 설정하면 해결 할 수 있습니다.

 

  const [percent, setPercent] = useState<string>('');

 

 

 

이때 string 타입이라고 제네릭으로 지정했는데 왜 초기값이 undefined가 가능한 가에 대해서는

useState의 경우에는 2가지 타입을 받을 수 있고, undefined의 경우 따로 입력하지 않아도 두 번째 타입에 의해 할당이 가능합니다.

   /**
     * Returns a stateful value, and a function to update it.
     *
     * @version 16.8.0
     * @see {@link https://react.dev/reference/react/useState}
     */
    function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
    // convenience overload when first argument is omitted
    /**
     * Returns a stateful value, and a function to update it.
     *
     * @version 16.8.0
     * @see {@link https://react.dev/reference/react/useState}
     */
    function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];