REACT_심화_review_2편

포스트 목록 가져오기

포스트 목록 가져오는 순서

기능을 만들 때는, 데이터가 어떻게 변할 지, 어떤 순서와 메커니즘으로 동작할지 먼저 선 고민하고 후 구현하는 습관을 들이는게 중요하다. 포스트 목록을 가져오는 기능을 만든다고 가정했을 때, 아래와 같은 일련의 순서를 머릿속에서 그린 다음에 생각하면서 구현에 들어가는 것 이다.

moment 패키지?

자바스크립트에서 날짜, 시간 등을 좀 더 편하게 다루기 위해서 사용하는 친구이다. 자바스크립트에서 기존에 new Date() 등으로 날짜 시간, 다 따로 따로 가져와야하는게 귀찮고 번거롭기 때문에 'moment'를 사용하면 보다 빠르고 간편하게 시간 개념을 가져다 사용할 수 있다.

코드 사용예시:

insert_dt: moment().format("YYYY-MM-DD hh:mm:ss")

moment()로 호출하면 현재 시점을 기준으로 반환을 해준다. -> '.이후 format()이라는 내장함수를 사용하고 format("") 괄호안에 원하는 형식을 위의 예시처럼 "Year-Month-Day Hour:minutes:seconds"에 맞게 써서 넣어주면 그 형식에 맞게 포멧해서 데이터를 넘겨준다.

특정 컬렉션에 데이터를 추가하는 법

1) 컬렉션을 선택해준다.

코드 사용예시:

const postDB = firestore.collection("post");

2) .add()를 사용한다. -> .add() 괄호 안에 {} 데이터 값들만 넣어주면, .add({abdbdbd}) 형태로 작성해서 컬렉션에 데이터를 추가시킬 수 있다.

코드 사용예시:

postDB.add({ ...user_info, ..._post }).then((doc) => {
            
        }).catch((err) => {
            console.log("post작성에 실패했습니다.", err);
        })

3) 위의 코드에서 .add() 안에 들어가는 데이터인 user_info와 _post가 실제로 넣을만한 값인지 실제로 넣어보기전에 한번정도는 체크해주는게 좋다.

Debounce와 Throttle?

단 기간에 많은 양의 이벤트가 발생했을 때 해당 이벤트를 효과적으로 관리하는 방법 두 가지가 Debounce와 Throttle인데, 단 기간에 많은 양의 이벤트가 발생하는 예시로 크게 두가지를 많이 들 수 있는데,

1) 스크롤과
2) 검색 API이다. (연관 검색어, 키보드 타이핑할때마다 onChange로 검색키워드 관련 정보들을 보여주는 식)

이벤트가 발생하면 필연적으로 함께 발생하는 친구에 대해서 생각해보자. onChange가 일어나면, "onChange가 일어났을 때 어떤 작업을 해줘"라는 콜백을 준다. 어떤 이벤트가 일어났을 때의 "콜백"을 효과적으로 관리한다 라고 생각하면 좋다.

ex) ㄱ -> 가 -> 감 -> 감ㅅ -> 감사 순서로 하나하나 걸릴 것 인데, 걸릴 때 마다, 즉 onChange가 일어날때마다 검색키워드와 관련된 녀석들을 가져와 등의 콜백을 일으킬 것 이다.
-> 여기서 조심해야하는 부분은, 만약 모든 키워드 하나하나의 변화마다 콜백으로 요청이 계속해서 들어가면, "감사합니다" 한번을 쓰는동안에도 리렌더링만 몇번이 일어날까..? 계속해서 바꾸고, 또 바꾸고 하기 때문에 문제가 생긴다. (어떤 차원의 문제일까?)

너무 많이 요청하는것도 막아주어야 하고, 리렌더링을 너무 많이 하는것도 막아주어야한다. 이걸 해도 되는 이유는 클라이언트 입장에서 보았을 때 하나하나 중간과정에서의 연관검색어보다, 결국 최종적인 워드 "감사합니다"의 대한 연관검색어 결과값을 원하기 때문이다. (무의미한 요청들과 계속되는 리렌더링을 Debounce와 Throttle을 사용해서 방지하자)

이 방지 작업의 의미와 목표는 onChange 자체를 막아주는게 아니라, onChange가 일어났을 때 실행되는 콜백의 실행을 효과적으로 제어해주는 것 이다.

Debounce

이벤트가 들어오면, 일정 시간을 기다렸다가 이벤트를 수행하는 것 이다. 여기서 "일정 시간" 내에 또 다른 이벤트가 들어오게 되면 이전 요청은 취소하고 해당 이벤트로 넘어가진다. 즉 검색을 완료해서 입력이 멈추게 되면 -> 그때 해당 이벤트가 수행이 된다.

즉, 이벤트가 들어왔을 때 콜백이 원래는 바로 수행되야 되지만, debounce를 걸어놓게 되면 설정해놓은 일정시간 동안에는 콜백이 실행이 되지 않고, 기다리게 된다. 다른 이벤트가 일정시간내에 들어오면 또 그 새로 들어온 이벤트의 콜백으로 넘어가지게 되는 형태이다.

Throttle

Debounce와 비슷하지만 다른점은, 새로운 이벤트가 들어왔을 때 이전의 이벤트들에 대한 콜백 즉 실행해야되는 것들이 사라지는게 아니라 들고있는다. (실행은 하지 않고, 그냥 가지고 있는단 의미) 가지고 있다가, 마지막것만 실행을 해준다.

정리하면, 일정시간동안 일어난 이벤트들을 모아가지고, 가장 최근에 일어난 이벤트의 콜백만 실행을 해준는 것이 Throttle.

Debounce와 Throttle의 사용은 어떻게 해야할까?

상황마다 각각 상황에 맞게 필요한 것들을 사용해주면 되는데, 이전 이벤트들을 삭제하는 성격의 debounce와 보관하고 있는 throttle의 성격을 생각해서 각각에 맞게 사용해주면 된다. (이전 이벤트들을 가지고 있을 필요없다면 debounce를, 필요하다면 Throttle을 사용해주면 된다)

loadash로 이벤트 관리하기

loadash란?

loadash는 자바스크립트 유틸리티 라이브러리이다. loadash는 정말 많은 일을 해주는 고마운 친구인데, 배열 관리(중복제거), 모듈화 (성능 향상) 등등 굉장히 많은 일을 편하게 해줄 수 있게 도와주는 친구이기 때문에 사용빈도도 높고, 공식문서를 한번 보고 내용들을 검토해보면 매우 도움이 된다. 공식문서 링크: https://lodash.com/

함수형 컴포넌트의 특징과 리렌더링의 관계?

함수형 컴포넌트의 특징은 리렌더링이 되게 되었을 때, 함수(컴포넌트) 내에 있는 변수들도 전부 초기화가 된다는 것 이다. -> 이게 debouce와 throttle과 무슨 관계냐면, 초기화가 되기 때문에 원래 정해놓은 일정 시간(밀리터리 세컨)동안은 실행하지 않고 기다려야하는 콜백이 실행이 될 수도 있고, 원래의 제 기능을 다 하지 못하게 되는 경우들도 생긴다는 것 이다.

메모이제이션해주는 usecallback

그렇다면, 재 렌더링이 일어날때에는 debounce와 throttle을 쓸 수가 없는걸까?
답은 No이다. 쓸 수 있는 방법은 "usecallback"을 사용하면 가능하다.

코드 사용예시:

const keyPress = React.useCallback();

코드에서 볼 수 있듯이 useCallback()이라는 친구는 함수를 메모이제이션 한다고 하는데, 즉 어디다가 저장을 해놓는 개념이다. -> 이 컴포넌트가 리 렌더링이 되더라도, 해당 함수를 초기화하지마라, 내가 메모이제이션한, 즉 저장한 함수 계속해서 쓸것이다 라고 말하는 개념이다.

코드 사용예시:

const keyPress = React.useCallback(debounce, [text]);

앞에오는 인자값에는 어떤 걸 구동시킬건지 함수를 넣어주고, 뒤에는 array로 무언가가 변할 때 해당 함수도 변할거야 라는 의미로 사용한다. 즉, 해당 함수를 초기화할 조건을 두번째 인자값으로 넣어주는 것 이다.

(useEffect와 다른 기능을 수행하지만, 사용방법은 매우 흡사하다)

리렌더링이 계속해서 될 지언정, debounce함수를 메모이제이션을 해놨으니까 -> 초기화가 되지 않았다. -> 컴포넌트가 리렌더링이 되어도 이 함수는 초기화되지 않았기 때문에 debounce를 정상적으로 수행할 수 있게되는 것 이다.

useCallback은 최적화 하기에 굉장히 중요한 친구이므로, 반드시 기억하고 있자.