2021-12-16 TIL

Fact

• 기존에 지킬 테마 블로그를 개츠비로 변경하고 기존에 있던 포스트들을 다 이동시켰다.
• 로그인 로그아웃 페이지를 만들고 하드코딩을 했다.
• 내 프로필 페이지를 만들었다.

Feelings

• 개츠비 find-answer 테마를 적용했는데, 가독성이 정말 좋은 것 같다. [강력추천]

Findings

• useMemo는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.
• useCallback()은 함수를 메모제이션 하기 위해서 사용되는 hook함수이다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때 까지 저장해놓고 재사용할 수 있게 해준다.

const memoizedCallback = useCallback(함수, 배열)

예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언 되어 있다면, 이 함수는 해당 컴포넌트가 랜더링 될 때 마다 새로운 함수가 생성된다.

const add = () => x + y

하지만 useCallback() 을 사용하면, 해당 컴포넌트가 랜더링되더라도 함수가 의존하는 값들이 바뀌지 않는한 기존 함수를 계속해서 반환한다. 즉 x 또는 y값이 바뀌면 새로운 함수가 생성되어 add 변수에 할당되고, x와 y의 값이 동일하면 다음 렌더링될때 이 함수를 재사용한다.

const add = useCallback(() => x + y, [x, y])

-

Future Action

• 서버사이드렌더링, 클라이언트 사이드 렌더링, 넥스트 동작원리 블로그 포스트정리
• 이해가 안가는 정보가 있으면 직접 쳐보는 노력을 해야겠다.
• 직접 쳐보는 연습을 하기위해 연습용 리액트 프로젝트를 만들어야겠다.