[Day 73] 2022-0928

🐈오늘 배운 것

✔️리액트 가상 돔 (Virtual Dom)

자바스크립트의 DOM 이 느린 것이 아니라, DOM을 변경하고 업데이트 - 리플로우가 발생하면서 속도가 느려지게 되는 것이다. 리액트의 가상 돔을 사용하지 않을 때에는 모든 변경사항에 대해서 실제 돔에 접근해서 변경하고, 변경이 일어나지 않은 다른 요소들까지도 업데이트가 되기 때문에 SPA 처럼 상호작용이 많은 - UI가 자주 업데이트 되어야 하는 페이지에서는 속도가 느려진다. 리액트에서는 가상 돔을 가지고 이전의 가상 돔 상태와 변경이 된 가상 돔을 비교해 실제로 변경이 되어야 할 부분에 대해서만 업데이트를 한다. 

 

그러면 리액트 가상 돔은 이전 상태와 현재 상태를 비교해서 어떻게 변경되는 부분을 알 수 있을까? 전체 DOM 트리의 세부사항을 하나씩 비교하기에는 너무나 많은 연산이 필요하기 때문에, 탐색에 휴리스틱 알고리즘을 사용한다. 휴리스틱은 우리가 꼭 필요하다고 판단되는 정보만 비교하자는 알고리즘이다. 리액트에서는 동일 레벨의 노드를 파악하고 그 자식 노드들을 순차적으로 파악하는데, 부모 노드가 같다는 전제 하에 각 자식 노드들의 변경은 고유한 key 값을 비교해서 파악한다. 이 key 값이 없다면 자식 노드가 하나 추가 되었을 때 전체 위치가 바뀌면서 나머지 자식들까지도 변경되었다고 판단되기 때문에 비효율적인 렌더링이 발생할 수 있다. 따라서 고유한 key 값을 가지고 변경이 되었다, 변경이 되지 않았다를 비교할 수 있는 것이다. 

✔️useMemo, useCallback 훅

useMemo

이전 '값'을 재활용 하는 훅. 영향을 주는 상태에 변화가 있을 경우에만 새로운 연산을 실행한다.

어떤 컴포넌트에서 입력되는 값이 동일한 경우가 많다면 그 값을 기억했다가 쓸 수 있도록 하는 것이다. value 라는 데이터를 가지고 연산을 하는 함수가 있다고 할 때, 실제로 그 value 가 변경이 되었을 때에만 연산 함수를 실행하도록 하는 것이다. useEffect 의 종속성 배열처럼, 연산에 영향을 주는 상태를 지정해주었을 때, 렌더링이 발생해도 값이 동일하다면 추가적인 함수 호출이 발생하지 않는다. 

// add 함수는 val1, val2 가 변하지 않는 이상 호출되지 않을 것이다.
const answer = useMemo(() => add(val1, val2), [val1, val2]);

useCallback

컴포넌트 안에 함수가 정의되어 있다면 해당 함수는 컴포넌트가 리렌더링 될 때마다 계속 생성이 된다. 이는 성능 저하로 이어진다. useCallback 을 통해서 정의되는 함수가 의존하는 값이 바뀌지 않는 한 기존에 만들어두었던 함수를 계속해서 반환한다. 함수를 생성하는게 성능에 드라마틱한 영향을 주는 것은 아니지만, 컴포넌트 렌더링 최적화를 위해서 반드시 필요한 작업. (props가 변경되지 않았다면 리렌더링을 방지하는 렌더링 최적화) 참조

const getItems = useCallback(() => {
    return [input + 10, input + 100];
  }, [input]);

• 참조 동등성? 주소 값이 같냐 다르냐?

함수를 리턴하는 함수(고차 함수)로 함수 인스턴스를 생성할 때 각각 다른 변수에 할당된다면 두 함수는 같은 함수로부터 생성되었어도 서로 주소값이 같지 않으므로 다른 함수라고 봐야한다. 내가 내려주고 싶은 정확히 그 함수를 props 로 전달해주려면 useCallback 을 사용해서 함수를 재사용 하는 것이 예상치 못한 성능 문제를 방지할 수 있음. 

✔️Next.js 와 Iron Session 을 이용한 유저 인증 로직

• 유저가 자신의 데이터를 가지고 로그인을 시도한다. 
• 로그인 요청이 오면, 해당 데이터를 DB에서 조회하여 새 인증번호를 발급하거나 || 유저를 생성하고 인증 번호를 발급해준다. 
• 사용자는 발급된 인증번호를 입력한다.
• 서버에서는 다시 DB에 해당 인증 번호가 있는지 조회하고 있다면 그와 연결된 user 모델의 id를 session의 user로 저장하여 세션을 발급해준다. 
• 세션을 발급하는 과정에서 Iron Session에서 제공되는 withIronSessionApiRoute 함수에 DB 요청 및 세션 발급을 수행하는 함수, 그리고 쿠키 옵션객체를 인자로 전달하여 호출한다. 

Iron Session 이란 암호화된 쿠키를 발급해줄 수 있는 Node.js 의 무상태 세션 도구라고 한다. 백엔드에서 클라이언트에 보내는 payload를 암호화시키고, 서버에서는 별도로 지정한 password 로 요청과 함께 온 쿠키 데이터를 복호화하여 확인할 수 있다. 암호화가 되어있기 때문에 클라이언트에서는 쿠키 데이터를 볼 수 없다는 것이 특징. 로직이 상당히 간소해서 세션을 위한 별도의 백엔드 구축이 필요없음. 

로직은 대강 위와 같은데, 실제 코드로 작성하려니 너무 어려워서 다시 복습이 필요할 것 같다. ;ㅅ;

🐈더 공부할 것

1. Next.js, prisma, planet scale, iron session => 사용자 인증 로직 구현해보기

2. Typescript

🐈오늘의 느낀 점

캐럿마켓 클론코딩 수업을 들으면서 챌린지를 따라가려고 했는데, 한 번 강의가 밀리니까 부트캠프와 병행하기가 힘들어졌다. 그래서 어쩔 수 없이 챌린지를 드랍했다 ㅜ.ㅜ 너무나 아쉽다. 대신 10월 한달간 정복한다고 생각하고 이해 될 때까지 계속 연습할 것이다! 클라이언트 로직은 어렵긴 하지만 몰랐던 부분을 많이 배우고 있는데, 백엔드 로직은 더 충분한 이해가 필요한 것 같다.