[REACT] map / key

 

import { useState } from "react";

function App() {
  const [toDo, setTodo] = useState("");
  const onChange = (event) => setTodo(event.target.value);
  // console.log(toDo);
  const onSubmit = (event) => {
    event.preventDefault();
    console.log(toDo);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input 
        onChange={onChange} 
        value={toDo} 
        type="text" 
        placeholder="Write your to do..." />  
        <button>Add To Do</button>
      </form>
    </div>
    
  );
}
export default App;

*event.preventDefault

어떤 이벤트를 명시적으로 처리하지 않은 경우,

해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정. 

 

  const [toDos, setTodos] = useState([]);

  const onChange = (event) => setTodo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === ""){
      return;
    }
    // toDo="" or toDo.pust() (X) 
    // 우리는 state를 직접적으로 수정하지 않음. 
    setTodo(""); //직접적으로 수정하는 방법 
    //함수를 안에 넣는 방법 
    // 첫번째 인자: current state 
    // 두번째 인자: previous
    setTodos((currentArray) => [toDo, ...currentArray]); 
  };

array를 직접적으로 수정하지 않으면서 setToDos로 array에 element를 추가하는 방법

...[currentArray]

쉽게 말해서 currentArray += toDo 이런 느낌이라고 생각하면 됨

 

<h1>My ToDo({toDos.length})</h1>

리액트에서 JS 사용하고 싶다면 {} 안에 써줘야 함. 

 

 

react's map

map 안에 넣은 function의 return 값이 array에 들어가게 됨.

array에 있는 item을 무엇이든 원하는 것으로 바꿔준다.  

 

 

map 함수의 첫번째 argument: 현재의 item 가져올 수 있음.

 

map 함수의 첫번째 argument가 진행되고 있는 순서에 맞는 item인 것.

return 값이 어떻든 그 값이 새로운 array에 들어가게 됨.

=예전 array를 가져와서 번형 

 

array의 component return 하는 방법?

<ul>
        {toDos.map((item) => (
        <li>{item}</li>
        ))}
      </ul>

 

추가는 되지만 콘솔창에서 문제가 생김.

"key" prop이 없다는 경고 표시 

 

<ul>
        {toDos.map((item, index) => (
        <li key={index}>{item}</li>
        ))}
      </ul>

key 설정

데이터가 가진 고윳값을 key값으로 설정. why? key 값은 언제나 유일해야 하기 때문.  

컴포넌트에 고유 번호가 없을 시 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하면 됨.

고유한 값이 없을 때만 index의 값을 key로 사용해야 함.  

 

full code 

import { useState } from "react";

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;

    }

    setTodo("");

    setTodos((currentArray) => [toDo, ...currentArray]);

  };

  console.log(toDos);

  return (

    <div>

      <h1>My ToDo({toDos.length})</h1>

      <form onSubmit={onSubmit}>

        <input

        onChange={onChange}

        value={toDo}

        type="text"

        placeholder="Write your to do..." />  

        <button>Add To Do</button>

      </form>

      <hr/>

      <ul>

        {toDos.map((item, index) => (

        <li key={index}>{item}</li>

        ))}

      </ul>

    </div>

   

  );

}

export default App;

 

 

cf) 유동적인 데이터 렌더링 

 

concat 사용하여 데이터 추가 기능

import { useState } from "react"

const IterationSample= () => {

    const [names, setNames] = useState([

        {id: 1, text: '눈사람'},

        {id: 2, text: '얼음'},

        {id: 3, text: '눈'},

        {id: 4, text: '바람'}

    ]);

    const [inputText, setInputText] = useState('');

    const [nextId, setNextId] = useState(5); //새로운 항목을 추가할 때 사용할 id

    const onChange = e => setInputText(e.target.value);

    const onClick = () => {

        const nextNames = names.concat({

            id: nextId,

            text: inputText

        });

        setNextId(nextId+1);

        setNames(nextNames);

        setInputText('');

    }

    const namesList = names.map(name => <li key={name.id}>{name.text}</li>);

    return (

        <>

        <input value={inputText} onChange={onChange}/>

        <button onClick={onClick}>추가</button>

        <ul>{namesList}</ul>

        </>

    );

};

export default IterationSample;

 

filter 함수 사용, 항목 더블 클릭하여 데이터 제거 

const onRemove = id => {

        const nextNames = names.filter(name => name.id !== id);

        setNames(nextNames);

    };

   

    const namesList = names.map(name =>

        <li key={name.id}

            onDoubleClick = {() => onRemove(name.id)}>

            {name.text}

        </li>

        );

    return (

        <>

        <input value={inputText} onChange={onChange}/>

        <button onClick={onClick}>추가</button>

        <ul>{namesList}</ul>

        </>

    );