점점 자는 시간도.. 회고 마치는 시간도 늦어지는데 내일 강의가 조금 걱정된다. 벌써 3시 반이라니.. 그나마 내일이 금요일이라서 다행이라는 생각이 든다. 그래도 나름 열심히 코드 리뷰를 진행하니 어느새 이번주도 노력할 수 있는 부문에서는 소화해냈다는 생각이 들어 조금 마음이 놓인다.
내일 수업도 열심히 달려보자!!
1.1. 폼에서의 상태 관리
피자를 선택하는 폼을 만들어보자. 어제 공부했던 상태 변수와 이어지는 내용이라 그래도 수월하게 이해할 수 있었다.
피자라는 변수에 피자 종류와 피자 토핑을 각각 split()을 써서 나누어 배열로 넣어주었다. INITAL_ORDER 초깃값을 먼저 설정해준다. 0번째 배열의 값인 '밀라노 스폰티니 피자', 모든 토핑이 없고 토핑 값은 빈값으로 초깃값을 설정해준다.
이벤트 발생시 nextOrderState에 원래 변수를 받은 새로운 value로 뒤집어쓴다. 토핑도 마찬가지로 체크가 되었을 때 체크된 모든 토핑 변수와 각각 체크된 토핑을 넣어준다. 두 폼의 피자 종류와 속성 모두 같은 상태 변수를 공유하기 때문에 같은 폼 안에 존재해야 한다.
토핑을 바꾸는 함수 또한 구현했다. 토핑과 체크를 하는 변수를 이벤트로 받아서 가져온다. 토핑을 추가할 때는 새로 들어온 토핑 변수를 뒤에 선언해서 이벤트로 들어온 토핑이 덮어쓸 수 있게 해주었다. 토핑을 삭제할 때는 필터 속성을 사용해서 삭제해주었다. 토핑의 개수를 세는 함수는 모두 체크가 되었을 때 토핑 속성을 넣을 수 있게 다른 변수를 선언하였다.
폼에서 상태 변수를 사용하는 것을 연습했는데 확실히 여러 번 폼을 보다 보니까 눈에 익는 기분이다. 이번주 과제에서 직접 사용해봐야 알겠지만 상태 변수 함수를 쓰는 방법은 확실히 알게 되었다.
2.1. 검색창 예제 만들기
- 디바운스, 스택 적용
검색창에 입력을 했을 때 연관 검색어에 저 키워드 배열을 띄워주는 검색창을 만들었다. 우선 freeze() 함수를 사용해서 객체를 못 바꾸게 선언해주었다.
stack()을 import 해와야 하는데 이렇게 했을 시에 컴포넌트를 바로바로 가져올 수 있어서 편리하다. 매번 직접 만들 필요가 없이 div 태그가 들어간 컴포넌트를 만들 수 있게 된다. 속성을 해석하자면 vertical은 수직의 의미로 현재 false이기 때문에 가로축을 의미한다. className 은 사용자가 입력한 클래스를 받아오기 위해 비워두었다.
컴포넌트의 제작자의 스타일과 커스텀 스타일을 받아올 수 있다. 그래서 gap, marginBlock, marginInline, vertical을 속성으로 넣어줬다.
들어가기 전에..
- 디바운스란? 사용자가 입력을 한 이후에 입력한 시간 이후에 상태 업데이트를 시도하는 것을 의미한다.
쿼리는 사용자가 입력한 검색어를 의미한다. 예를 들어서 '리'를 입력하면 리에 관련된 리액트, 리액트 라우터가 연관 검색어로 떠야 한다. 상태 변수 함수에서 쿼리를 가져왔기 때문에 쿼리에 관련된 키워드를 객체어서 filter(), include() 속성으로 찾아줘야 한다.
디바운싱은 자바스크립트로 넘어가게 된다. 그렇기 때문에 꼭 defaultValue 를 써야 한다. value는 리액트에서 사용하는 문법이다. 그렇기 때문에 디바운스를 사용했을 때에는 리액트에 의해서 제어되기 때문에 사용자가 입력해도 화면은 바뀌지 않는다.
3.1. 사이드 이펙트
사이드 이펙트는 살짝 맛보기만 하고 넘어갔다. 자세한 내용은 내일 더 정리해서!
- 리액트는 가상돔에서 JS 함수를 사용하기 위해서 JSX 를 사용한다. 리액트는 언제나 순수한 컴포넌트를 사용해야 하기 때문에 불순한 게 끼어들면 안된다. 그래서 사이드 이펙트가 존재하면 안된다. 이때 사이드 이펙트는 리액트가 예측할 수 없는 것을 이야기한다.
- ex) 불순하게 JS 의 객체를 리액트를 통해 직접 접근하는 경우, 예측할 수 없는 활동이고 사이드 이펙트, 즉 부수 효과이다.
