React #7

Leesu·2022년 10월 21일

React : 작은 프로젝트부터, 리액트 전용 [TIL]

목록 보기

6/22

넘 재밌당

✅ Create To Do List(1)

To do List 를 만들어보자

// app.js

function App() {
	const [toDo, setToDo] = useState("");
    const onChange(event) => setToDo(event.target.value);
	return (
    	<div>
        	<input 
                vlaue={toDo}
                onChange={onChange}
            	type="text" 
                placeholder="Write your to do.." 
            />
        </div>
	)
}

input의 값을 받아올 toDo, onChange 이벤트가 발생하면 toDo의 값을 변경해줄 setToDo 설정
input의 값을 form 내부로 추가해주기

// app.js

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

<button>Add To Do</button> 버튼을 클릭하면 submit 이벤트를 발생시켜 리스트에 추가해주자
그전에 submit 의 기본 이벤트 제거해주기

const onSubmit = (event) => {
  event.preventDefault();  <<<----
  if(toDo === "") {
    return;
  }
  setToDo("");
};

return (
  <div>
  	<form onSubmit={onSubmit}>  <<<----

event.preventDefault(); 함수로 기본 이벤트를 제거해주고,
input 에 submit 이벤트가 발생하면 setToDo 로 toDo 비워주기로!
만약 toDo의 값이 없다면 함수 종료시키기
기본 틀 완료!

✅ Create To Do List(2)

이제 여러개의 toDo 를 받을 수 있는 array 를 만들고, array 에 element를 추가하기

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

const onSubmit = (event) => {
  event.preventDefault();  <<<----
  if(toDo === "") {
    return;
  }
  setToDos((cureentArray) => [toDo, ]);
  setToDo("");
};

cureentArray 으로 현재 state를 받아오자
그리고 새로운 array 를 return 해줄건데,
새로운 array에 새로운 toDo + 모든 이전 toDos 까지 추가해줄 것

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

const onSubmit = (event) => {
  event.preventDefault();  <<<----
  if(toDo === "") {
    return;
  }
  setToDos((cureentArray) => [toDo, ...cureentArray]); <<<----
  setToDo("");
};

[toDo, ...cureentArray]
→ 꼭 ... 을 추가해야 새로운 toDo와 기존 array의 값들이 합쳐진 새로운 array 가 생긴다.
추가하지 않을 경우 [toDo, array(0)] 처럼 array 안에 또 다른 array가 생기는 것!

✅ Create To Do List(3)

map() 함수를 사용하여 array 에 추가한 element 들을 각각 component 로 만들자

- `map()` 함수

배열을 가지고 있을 때 각각의 element들을 바꿀 수 있게 해줌
map() 은 ()에 함수를 넣을 수 있는데 배열의 모든 item에 대해 실행됨
즉, 배열에 6개의 item이 있다면 6번 함수가 실행되고
새로운 array로 return 해준다.
예시)
[‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’].map(() => “:)”)
결과)
[‘:)’, ‘:)’, ‘:)’, ‘:)’, ‘:)’ ‘:)’]
참고
- 새 배열이 생성된다 = 기존의 배열에 접근할 수 없다.
- 그러나 map()은 함수의 첫번째 인자로 '현재의 item'을 가지고 올 수 있어서,
  map(item) -> item이나 원하는 어떤 변수명을 넣으면 item자체를 리턴하는 것도 가능하다!
예시)
[‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’].map((item) => item.toUpperCase())
결과)
[‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’]
그리고 li 태그를 사용해 리스트로 보이게 하자!

return (
  <div>
  	<h1>My To Dos ({toDos.length})</h1>
    <form onSubmit={onSubmit}>
    	<input
          ...
    /form>
    <hr />
    <ul>
      {toDos.map((item, index)) => 
      	<li key={index}>{item}</li> )} <<<----
    </ul>
)