React learning #6 to Do List ,map

const food =[1,2,3,4]

[5,food]// [5,Array[5]] 배열 안에 숫자와 배열이 들어감

[5,..food]//[5,1,2,3,4] 배열 안의 elements가 들어감

 

setTodos((currentTodo)=>[Todo, ...currentTodo])

 

 

function App() {
    const [toDo, setToDo] = useState("");
    const [toDos, setToDos] = useState([]);
    const onChange = (event) => setToDo(event.target.value);
    const onSubmit = (event) => {
        event.preventDefault();
        if (toDo === "") {
            return; //to Do가 없으면 이 함수가 동작하지 않도록
        }
        setToDo(""); // submit후 input에 value값 삭제  초기화
        setToDos((currentArray) => {
            const newArray = [toDo, ...currentArray];
            console.log(newArray);
            return newArray;  해결       (https://stackoverflow.com/questions/36085726/why-is-setstate-in-reactjs-async-instead-of-sync).

        });
        console.log(toDos);
    };
    return (
        <div>
            <h1>My To Do List({toDos.length})</h1>
            <form onSubmit={onSubmit}>
                <input
                    onChange={onChange}
                    value={toDo}
                    type="text"
                    placeholder="Write your to do..."
                />
                <button>Add To Do</button>
            </form>
        </div>
    );
}

 

---

Map

 

["hi","there"].map((item)=>item.toUpperCase())

["Hi","There"]

map은 배열의 각 item에 적용 됨

총 2번 실행되어 새로운 배열을 만들어냄

 

console.log에 뜨는 경고

react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.

map을 사용하면  react.js는 key를 입력하길 요구한다.

 

            <ul>
                {toDos.map((item, index) => (  map의 첫번 째 인자로는 value, 두번 째 인자로서 index를 받음 
                    <li key={index}>{item}</li>
                ))}
            </ul>
    );
}

 

https://github.com/UHyun-K/react-for-beginner/commit/f1adda8b2448f61c38473f15085d4b317be7197f