[React] to-do list를 만들어보자!

기본 setting

 

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

input 앨리먼트에서 사용자가 입력하는 값을 listen하고 그것을 form 앨리먼트를 통해 submit 하는데, 새로고침 하는 것을 막기 위해 preventDefault()를 사용해주는 기본 틀을 만들었다 (js에서 form의 기본동작은 submit)

 

 

toDo를 받아주는 array 만들기

 

useState를 통해 기본 값이 배열인 state를 생성해줬다.

 

++)useState에서 변수를 수정할 때는 

toDo=""; 이런식으로 직접수정하는게 아니라 반드시 setToDo라는 함수를 통해 값을 간접적으로 수정해줘야 한다!

 

 

currentArray함수를 통해 새로운 array를 받아올 것이다. State는 언제나 새로운 것이여야 하기 때문이다!

그리고 이 currentArray함수는 previous state를 매개변수로 받아옴으로써 이전 state것을 수정하는 방식으로 값을 수정할 것이다.

 

const[toDo,setToDo]=useState("");
const[toDos,setToDos]=useState([]);
const onChange=(event)=>setToDo(event.target.value);
const onSubmit=(event)=>{
    event.preventDefault()
    if(toDo===""){
      return;
    }
    setToDos(currentArray=>[toDo,...currentArray]);
    setToDo("");};

이전 state로 배열을 받아오고 그 배열에 또 다른 배열을 추가할때를 살펴보자.

[6]을 prev로 받아오고 const food=[1,2,3,4]가 현재 추가할 배열일때

[6,food]를 하면 안된다! 제대로 작동이 안될 것임. [6,Array(4)]가 결과값으로 나옴

 

[6, ...food]를 해줘야 [6,1,2,3,4]라는 배열이 나올 것이다. 

여기서 이 ...을 스프레드 구문이라고 하는데

https://codemasterkimc.tistory.com/53

자바스크립트에서 점세개가 가지는 의미 (... in js)

주요기능은

1)배열을 합칠 때

2)배열 분해할 때

3) 두 object를 합칠때

4) 함수 인자를 배열로 쓸 때 

 

setToDos를 처음 했을 때는 우선 toDos의 기본값이 빈 배열이니까 currentArray에서 비어있는 배열을 받아올 것이다.

그리고 input을 통해 작성한 toDo와 아무것도 들어있지 않는 비어있는 배열 (currentArray)와 합쳐져서 새로운 toDo 배열이 업데이트 될 것이다. 

 

즉 ...currentArray는 current Array 함수가 매개변수를 통해 받아오는 이전 상태의 배열이 된다!

현재 상태 concat 이전상태 라고 생각하면 될 것이다!

 

cool -> hello -> pretty 순으로 input을 받아줬고  배열에는 이 원소들이 약간 스택처럼 쌓여있다

 

map을 사용해서 배열의 원소들을 불러오자!

 

이제 이 배열에 담긴 원소들에 해당하는 component를 만들어볼 것이다!

 

map은 자바스크립트 함수인데 array각각의 element들을 바꾸고 싶을 때가 있을거다.

예를 들어

['fun','cool''good','pretty']라는 배열이 있을 때

['fun','cool''good','pretty']].map()을 해주면 ()<--요 괄호 안에 함수를 넣을 수 있게 해주는데

이 함수는 array의 모든 item에 대해 실행된다.

그리고 return한 값이 새로운 array에 들어간다.

배열의 원소의 개수인 4 만큼 map함수가 실행이 되고 "^^"가 4개인 새로운 배열이 만들어진다.

그런데 이러면  기존의 아이템들 fun,cool,good,pretty에는 접근할 수 없게 되었다!

map은 함수의 첫번째 인자로 현재의 item을 가져올 수 있다!

 

즉, map함수의 첫번째 인자는 진행되고 있는 순서에 맞는 item이라는 것이다. 

예를 들어 첫번째 순서의 첫번째 인자는 fun이 될 것이다.

요렇게 첫번째 인자로 현재 순서의 item을 받아오고 그 item을 대문자로 리턴해볼 수도 있겠다.

$와 백틱을 통해서 귀여운 배열을 새로 생성해볼 수도 있다!

 

즉 map은 예전 array를 가져와서 변형하는 역할을 한다! 

 

 

<hr> 태그를 통해 수평선을 그어주고 map함수를 사용해서 item을 li태그에 담아주면 

 

짜잔!

 

근데 살짝 문제가 생겼다.

같은 컴포넌트의 list를 랜더할때 key라는 prop을 넣어줘야 한다는 에러가 떴다.

 

https://velog.io/@green9930/React-%EB%B0%B0%EC%97%B4%EC%97%90%EC%84%9C-key-%EA%B0%92%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0

React 배열에서 key 값이 필요한 이유

 

map함수에 대한 문서를 읽어보면 첫번째 인자는 value여야 한다.(toDo)

두번째 인자는 index이다. (0,1,2,3,4같은 배열의 인덱스를 의미한다. 

li 앨리먼트에 속성으로 key값을 넣어줘서 고유한 인덱스를 갖도록 하면 에러가 해결된다. 

 

최종코드

 

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;
    }
    setToDos((currentArray)=>[toDo,...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  return <div>
    <h1>My To Dos ({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>
}