todo list 만들기
만들기는 했는데 Enter을 해도 데이터가 넘겨지지 않는다 그래서 이걸 form으로 감싸주자.
form만 넣었는데 Enter에 반응한다.
form을 넣었으면 onClick을 안넣어도 된다. 왜냐하면 form 안에서는 onSubmit이 이미 등록되어 있어서 그렇다. 단 버튼에 type="button"을 넣으면 Enter가 안된다.
handleAddTodo 대신에 form을 이용한 onSubmit을 처리했다. 그리고 현재는 브라우저에서 빈 입력을 받아들이지 않지만 이걸 개발자가 처리하기 위해서는 InputText에 required를 넣어주었다.
이런식으로 간단하게 처리해주었다. 보면알겠지만 리스트, 객체 리스트의 성분을 접근하기 위해서는 map 사용이 절대적이다.
이때 체크된 경우의 처리는 위와같이 만들 수 있다.
SPA
SPA(Single Page Application)은 한 개의 페이지로 이루어진 애플리케이션으로 기존에는 변경사항에 대해 페이지를 새로 만들었으나 SPA에서는 컴포넌트만 바뀌기 때문에 조금더 자연스러운 느낌으로 작동하게 된다.
그래서 js파일들을 먼저 만들어 놓고 나중에 js를 갈아끼운다. 그래서 요청에 따라 다른 화면을 보여주는 것을 routing이라고 부른다. 이 부분은 react-router가 담당하게 된다.
문제는 이게 너무 커지만 js파일이 너무 커지면 한번에 너무 많은 js 파일들을 불러온다. 그래서 이를 해결하기 위해 코드 스플리팅이라는 기술을 사용한다. 또 검색엔진 최적화(SEO)가 힘들 수 있다. 왜냐하면 index.html 안에 든게 없기 때문에 탐색이 되지 않는다. 또 로딩되는 동안에는 흰 페이지가 나타날 수도 있다.
MPA
SPA vs. MPA
SPA, MPA란 무엇일까? 차분히 정리해보자. 1. 정의 글자 그대로 단순(?)하게 해석하면, SPA(Single Page Application)는 한 개(single)의 Page로 구성된 application 이고, MPA(Multi Page application)
velog.io
# 비동기 작업 - callBack, callBack Hell, Promise, async/await
자바스크립트는 싱글 쓰레드 -> 한번에 하나만 처리한다는 말이다.
그런데 비동기는 여러개의 작업을 수행한다는 말이다.
사실 비동기인이유도 결국 동기로 일이 처리될때까지 시간이 오래걸리기 때문이다. 그래서 시간이 오래걸리는 작업들은 비동기적으로 처리를 해야 다른 작업들을 처리할 수 있다.
대충 이런느낌이다. 이걸 해결하기 위해서 callBack 함수를 사용했다.
비동기작업이 필요한 이유는 서버 API나 setTimeout을 하게되면 언제 응답이 올지도 모르고 동기적으로 행해지면 응답이 돌아올때까지 js는 아무것도 못한다. 그래서 시간이 오래걸리는 작업들은 비동기로 수행을 해야 API를 호출후 응답이 오겠다는 믿음으로 다른 작업을 할 수 있다.
대충 위와같이 html 파일안에 작성했다고 하자.
1초 뒤에 더해진값을 console에 찍기위한 함수이다.
조건문 필요없으니까 뺴버리자
결국 동기적으로 처리하고 싶으면 위와같이 처리할 수밖에 없었다.
암튼 동기적으로 처리하려고하다보니 callBack 지옥이 만들어진다.
이렇게 callBack Hell이 되면 가독성이 크게 떨어지게 된다.
Event Loop
이걸 이해하기 위해 setTimeout관련 함수를 짜보자.
바로 Event Loop라는 개념이다.
setTimeout이나 API call하는 fetch 브라우저에 있는 함수들을 만나면 이 함수를 우선 WebAPI에 보낸다. 그리고 그 다음일을 수행한다. 그래서 1 -> setTimeout은 WebAPI에 보낸다. -> 3 으로 수행된다. 그리고 WebAPI에서의 timer가 0 되면 실행시키라는 의미로 Callback Queue로 함수를 보낸다. 그리고 Stack이 비어질때까지 대기한다. 그래서 비어지면 그때가서 setTimeout이 실행된다.
Promise
callBack Hell을 해결하기 위해서 Promise가 나온다.
Promise 첫번째 인자는 프로미스가 성공적으로 종료될때 실행시키는 함수이다.
reject는 실패시 반환한다. 실패시 Error 객체를 만들어 반환한다.
결과적으로 Promise 객체를 반환한다.
resolve나 rejcet가 1초 후에 실행되기 때문에 increase 함수의 비동기 실행의 보장을 then에서 활용할 수 있다. 그래서 결과적으로 callBack Hell을 면할 수 있다. 어느정도 덩어리로 확인할 수 있다.
에러에 대해서는 catch에서 잡아줄 수 있다.
그리고 Promise를 더욱 쉽게 사용할 수 있도록 async, await 함수가 나온다.
'Development(Web, Server, Cloud) > 22) React.js & Node.js' 카테고리의 다른 글
| React.js 정리(1-12) (0) | 2022.01.10 |
|---|---|
| React.js & Node.js 9일차 (0) | 2022.01.04 |
| react.js & node.js 7일차 (0) | 2022.01.01 |
| react.js & node.js 6일차 (0) | 2022.01.01 |
| react.js & node.js 5일차 (0) | 2021.12.31 |
