[React JS] To Do List 만들기

▶JS와 다른점: state를 직접적으로 수정하지 않는다. state는 무조건 setState함수를 사용하여 수정한다.

e.g.) 기존에 빈배열에 요소를  추가해줄 때, array명.push() 이런식으로 코드를 작성했는데 그렇게 하지 않습니다. 혹은 toDos = []; 이런 식으로 X 

toDos array를 수정하고 싶다면 수정하는 modifier function을 사용해야 합니다. 

 

array에 element를 추가하는 방법

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

• state는 항상 새로운 거여야 한다. 

modifier 함수를 사용할 때는 두가지 옵션이 있다. (복습개념)

1. setToDo("hi") // 직접 값을 전달하기 

2. setToDo ((currentArray) => [toDo, ...currentArray]); //현재값에 새로운 값을 더해서 리턴하기 

*함수를 내보낼 때 react.js는 함수의 첫번째 arg로 현재 state를 보낸다. 

 

 

map()함수

*리액트가 제공하는 것이 아닌 자바스크립트가 제공하는 함수이다.

 

기본형식: array명.map(function) 

기존의 엘리먼트에 map의 인자로 보내는 함수를 각각의 엘리먼트마다 실행시켜서 새로운 값을 담은 배열을 return해준다. 즉, 하나의 array에 있는 item을 내가 원하는 무엇이든지로 바꿔주는 역할을 한다. (예전 array를 가져와서 변형하는 것)

e.g.) 기존의 item마다 map의 인자로 전달된 함수를 각각 실행해서 새로운 배열을 return하고 있다.

["감자", "고구마"].map(()=>":)");
//output: (2) [':)', ':)']

*단점: 기존의 item에 접근할 수 없게 된다. -> 해결방안: map은 함수의 첫번째 arg로 현재의 item을 가져올 수 있다. 

map의 함수의 첫번째 argument가 진행되고 잇는 순서에 맞는 item이라는 것이 포인트 //*item이라는 변수명은 내가 원하는 것으로 작성이 가능하다. 해당 배열의 item이라는 것만 명시해줄 수 있으면 된다.

e.g.) 

["are","you","there"].map((item)=>item.toUpperCase())
//output: (3) ['ARE', 'YOU', 'THERE']

 map함수를 사용해서 투두리스트에 적용해보자

import { useEffect, 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;
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    //input 내용 비워주기
    setToDo('');
  };
  console.log(toDos);

  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          type={toDo}
          placeholder="write your to do..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

이렇게 코드를 작성하고 나면 콘솔에 에러 메세지가 뜬다. 

->같은 component의 list를 render할 때 key라는 prop을 넣어줘야 한다고 알려주고 있다. 그 이유는 react가 기본적으로 list에 있는 모든 item들을 인식하기 때문이다. 

 

해결하기 위해서는 li태그에 key속성을 주고 거기에 고유값(unique)을 주면된다. 

 

▼map함수 문법

(method) Array<any>.map<JSX.Element>(callbackfn: (value: any, index: number, array: any[]) => JSX.Element, thisArg?: any): JSX.Element[]

• map함수에 대한 문서를 보면 첫번째 arg는 value여야 하고(각각의 toDo를 의미) 두번째 arg는 index(number타입)이다 여기서 index가 unique값이 되는 것이다. 

	<ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      
 //위의 코드를 정적으로 풀어서 쓰면 아래와 같이 된다.
   	  <ul>
          <li key={0}>{item}</li>
          <li key={1}>{item}</li>
          <li key={2}>{item}</li>
          <li key={3}>{item}</li>      
      </ul>

->위의 예시코드를 이렇게 고치면 에러 메세지가 사라진다. 

해당 코드로 toDos에 있는 각각의 item으로 li를 만들었다.

*toDos는 string으로 구성된 array 

 

마지막으로 아래의 코드를 통해서 JS객체인 toDos array와 react Element로써의 array를 비교해볼 수 있다.  

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

 

▼콘솔 결과

->위에가 string으로 된 toDos이고 아래는 react element인 array이다. 

 

 

 

Spread syntax 

• 아래의 코드에서 ... 점 3개로 표시된 것이 spread syntax 즉 전개 구문이다. 
• 전개 구문은 ES6에서 추가 됐으며 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다. //뭐라는 것인지 모르겠으나 공홈에 그렇게 설명되어 있음
•  
• 크게 "객체"와 "배열"에서 적용한다.

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

• 해당예시에서는 toDo 라는 string입력 값(새로운 item)을 ...currentArray를 통해 기존에 있던 array item을 전개해서 새로운 배열을 retrun하여 toDos 배열을 업데이트하는 기능을 한다. 

 

자세한 내용은 아래를 참고하자.

https://blog.naver.com/jaeeun_98/222413964953​

[Javascript/ES6] ES6 ~ ES11 핵심 문법, 전개 구문(Spread Syntax)

전개 구문 - JavaScript | MDN