~0524 React toDolist pt.1

스마트폰 기포 두방울 생겨서 액정필름 갈았는데 8개 생김ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ아그리고 주문한 워치 필름은 안맞음 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

본격적으로 프로젝트를 시작함에 있어 toDoList 할 일 적어놓는 것을 만들건데 이건 바닐라자바스크립트로도 만들어 봤는데

우린 리액트를 배우니까 리액트를 사용해 더 효율적으로 코드를 작성할 수 있다하니 배워보자. 고

 

또 중간 캡쳐안했다 멍충이 히히 그림.1

13line return부터 보면 input의 입력을 하면 onChange를 통해 입력 값을 가져오고(배웠음 수도 없이), toDo는 이 value를 나타낸다. 그리고 form태그를 추가해 onSubmit으로 버튼 클릭시 line7~ 아무값도 없이 클릭 했을 시 return으로 함수를 종료하고, setToDo를 통해 입력창을 빈칸으로 만든다. state 설명은 생략

여기까지는 toDoList에서 해야 할 일을 입력하는 입력창을 만든 과정 되시겠다.

 

line5를 보면 해야할 일을 적고 그 일들을 저장하기 위해 state하나 생성 초기값이 [ ] array이다. 그림.2

toDos를 array로해서 직접적으로 array를 수정하는 방식이 아닌, 함수를 통해 array를 수정하는 방식을 택한다. 여기서 말하는 수정은 우리가 앞으로 입력창에 해야할 일 toDos를 입력하면 array에 이 element가 추가되거나 삭제하는 것을 의미한다. 두가지 방법이 있는데 

 

1. 그림.1의 line11처럼 setToDo와 같은 함수로 state의 값을 직접 수정하는 방식 

2.  setToDos가 함수를 받아 함수를 통해 수정하는 방식 2번방법에서 밑의 사진을 보자

setToDos는 현재의 배열을 인자값으로 받는다. 그림. 3

현재의 배열을 가져오고(toDos) [새엘리먼트, ...array]는 array에 새로운 엘리먼트를 추가하도록 해준다.

그냥 [toDo(새로운 입력 값), currentArray] 를 할 경우 합쳐지지 않음. 

ex) number = [1,2,3]에 새로운 엘리먼트인 4를 넣고싶음 [4, ...number]을 사용.

 

setToDos에서는 현재의 state(toDo)가 들어간 새로운 array를 리턴해주는 역할을 한다.

즉 이 array에는 todo와 이전의 toDos(지금까지 넣은 엘리먼트 포함된 array)를 가지게 된다.

 

실제로 그 역할을 해내고 있는지 콘솔창을 통해 확인해 보자.

---

 

입력할 때 마다 기존의 배열 log되는건 console.log(setToDos)가 state의 toDo값이 변할 때 마다 리렌더링 되면서 실행되기 때문

---

 

마지막

 

toDos.length를 통해 array의 엘리먼트들의 개수를 h1태그를 통해 보여줌 보이다 시피 기능을 얼추 갖추었지만

직접 할 일들을 보여주지 않고, 삭제기능, 개수가 너무 많을 때 조치법 등 두번째 파트에서 좀 더 기능을 갖춰 볼 것이다.

 

마지막 전체 코드랑 h1태그가 나타내는거 보여주고 끝! 이번주 시간 보람차게 보낸다 민규야 잘한다 너 멋져 ╰(⊡-⊡)و✎

 

글씨 작아서 안보이나?