배운 것
Event Delegation
- 이벤트를 상위에 하나만 걸어서, 하위에서 이벤트 버블링으로 받아서 처리하는 기법을 event delegation이라고 한다.
<!-- $list -->
<ul>
<li class="list-item"> 클릭하면 A 이벤트 발생 1 </li>
<li class="list-item"> 클릭하면 A 이벤트 발생 2 </li>
</ul>원래 기존에는 li 태그를 querySelectorAll로 받아와서 이벤트를 하나하나 걸어줬다. input태그도 마찬가지이다.
$list.querySelectorAll('.list-item').forEach('click', (e) => {
// A 이벤트 처리 코드
})이렇게 될 경우 li는 똑같은 이벤트가 id만 달라지고 계속 걸리는 셈이다. 따라서 이벤트 버블링 현상을 이용하여 $list ( li의 상위 )에서 이벤트를 잡아서 처리한다. 이 때, e.target으로 처음 이벤트가 시작된 엘리먼트를 받아올 수 있다.
$list.addEventListener('click', e => {
const { className } = e.target;
if ( className === 'list-item' ) {
// A 이벤트 처리 코드
}
})리액트의 경우 내부적으로 이렇게 구현해준다고 한다.😮!!
이벤트 버블링이란?
가장 안의 요소부터 밖의 요소까지 이벤트가 전파되는 것이다.
위에서li클릭 이벤트는ul의 클릭 이벤트 핸들러까지 동작할 수 있게한다.
자세한 내용 : 버블링과 캡처링
낙관적 업데이트
낙관적 기법은 api 요청이 성공할 것이라고 낙관적으로 보고, 서버에 api(POST, PUT, DELETE)를 호출함과 동시에 동시에 클라이언트에 상태를 추가하는 기법이다.
api 요청의 응답이 완료되면 다시 네트워크 요청(GET)을 보내서 sync 해준다.
- api 호출
- state에 api 호출을 통해 변경될 데이터를 미리 반영함
- api 호출 완료시 GET을 통해 화면을 다시 렌더링(sync)
페이스북의 댓글달기가 이런 방식을 사용하다고 한다. 서버와 통신시 로딩을 하거나, 막아버리는 것이 안전하지만 사용자 경험이 좋지 않을 수 있기 때문에 낙관적 기법을 사용한다.
input text 임시 저장
localStorage를 사용해 구현한다.
localStorage에서 키 값을 통해 값 불러와서input의value로 설정한다.
localStorage.getItem(TEMP_INPUT)input에keydown(입력) 이벤트 발생시localStorage에 키 값을 통해 업데이트한다.
localStorage.setItem(TEMP_INPUT, '입력중...')- submit되고 나면
localStorage에 저장되어 있던 값을 삭제해준다.
localStorage.removeItem(TEMP_INPUT)이 때 키 값을 상수로 선언하면 오타의 확률을 줄일 수 있는 소소한 이득이 있다.
🚀 SPA 구현 시 신경써줘야 할 것들
SPA에서는 url 관련해서 신경써줘야 할 것이 많다. SPA 이전 방식에서는 api를 호출하기 위해 정보를 담아 보냈던 url이 브라우저의 url에도 반영되어 있었다. 하지만 SPA에서는 이런 정보(ex. 검색 필터)를 위해 pushState를 통해 url을 바꿔줘야만 한다.
또, url이 바뀐다고 해서, 알아서 화면을 바꿔주지 않기 때문에 url이 바뀔 때 놓치게 되는 몇 가지 상황이 있다.
- 새로고침 시
querystring또는pathname을 통해 웹 페이지 업데이트 해주기 - 뒤로 가기, 앞으로 가기 시 상태가 반영되지 않으므로
popstate이벤트를 등록해서queryString또는pathname을 통해 웹페이지 업데이트해주기
더 공부해야 할 것
리액트로 개발하면서, 어떤 것들을 놓쳤는지 너무 잘 알게된 강의였다. 리액트에서 신경쓰지 않고 개발했던 것의 내부원리를 뜯어봐야 할 필요성을 느꼈다.
- Javascript의 이벤트 관리
- 리액트 라우터의 원리
- 리액트 오픈소스 뜯어보기
느낀 점
오늘 너무너무너무 재밌었다! 내가 겪었던 문제들이 왜 그랬는지 알 수 있었고, 사용자 입장에서 모두 세심하게 고려해야할 대상이었다. 과거에 url이 반영되지 않는 문제를 해결하면서 낑낑거렸던 시간들이 헛되지 않았다는 생각도 들었다😊 또, 기본을 잘 몰라서 그런 문제들의 해결에 시간이 오래 걸렸던 점이 아쉽기도 했다. 지금이라도 이런 지식을 알게 되어서 기쁘다.
기본을 탄탄히 하고, 사용성을 세심하게 고려할 수 있는 개발자로 성장해나가야겠다.😎
