리액트 오류 : A component is changing a controlled input to be uncontrolled.

[App.jsx] 

import { useEffect, useState } from 'react';

import './App.css';

import axios from 'axios';

function App() {

    const [todos, setTodos] = useState(null);

    const [inputValue, setInputValue] = useState({

        //id : json의 방식의 데이터는 자동으로 입력됨

        title: '',

    });

    const fetchTodos = async () => {

        const { data } = await axios.get('http://localhost:4002/todos');

        console.log('data', data);

        setTodos(data);

    };

    useEffect(() => {

        fetchTodos();

    }, []);

    return (

        <>

            <div>

                {/* input 영역 */}

                <form>

                    <input

                        type="text"

                        value={inputValue.title}

                        onChange={(e) => {

                            setInputValue(e.target.value);

                        }}

                    ></input>

                    <button>추가</button>

                </form>

            </div>

[원인]

<input>태그에 입력하는대로 데이터를 넣는 상황에서,

 

(1) setInputValue(데이터)를 넣을때 오류 발생

(2) 데이터의 초기값은 객체임 { title: ''}

(3) <input>태그의 value도 {inputValue.title} 값으로 넣어주고있음

 

 

[해결]

setInputValue 부분도 객체로 변경해주면 됨

<input

       type="text"

       value={inputValue.title}

       onChange={(e) => {

       setInpuValue({ title: e.target.value });

       }}

 ></input>

 

끝.