23.04.28 TIL

샤이니·2023년 4월 28일
0

learned.log

목록 보기
38/46

오늘은 무엇을 했나요?

피어 코드리뷰

다른 수강생의 위클리 미션 코드에 대해 처음으로 코드리뷰를 달았다! 생각보다 타인의 코드를 보고 분석하고, 개선점에 대해 논의를 하는 것이 상당한 노동임을 깨달았다ㅋㅋ

지난 위클리 미션을 할 때, 내가 가장 많이 고민했던 부분이 바로 "관심사 분리"이다. 아주아주 멍청한 컴포넌트를 만드는 것에 힘을 많이 쏟았다. 그러다보니 자연스럽게 피어의 코드에서 그렇지 않게 구현된 부분이 눈에 들어왔다.

좋은 개발자가 되기 위해 추상화를 하고, 클린 코드를 작성하는 방법에 대해 항상 고민이고 공부 중이다. 리팩토링에는 끝이 없는 것 같다.

이도 그럴 것이 이번에 리액트 소스코드를 분석하면서, 여러 버전을 거쳐 18 버전이 나온 지금, 불과 2버전 앞의 소스코드와 비교했을 때 상당히 추상화가 많이 되어있는 것을 살펴볼 수 있었다.

특히 reconciler에서 코어로 훅을 주입하는 코드의 추상화가 너무나 많이 되어서 블로그를 참고하면서 분석하는 데도 벽을 느꼈던... 더 성장해서 꼭 소스코드 분석을 완료하리라!!

그러니까, 리팩토링은 하면 할 수록 할 게 보이는 것 같다.


이번 코드리뷰에서 가장 기분 좋았던 것은 고민이 묻어나는 코드인 것이 보인다는 피드백을 받았던 점!ㅎㅎ

오늘의 나는 무엇을 새롭게 배웠나요?

useCallback

컴포넌트 내에서 함수를 선언할 때 사용한다.

  • 해당 함수가 불필요하게 계속해서 생성되지 않고, 이전에 생성한 함수를 재사용하도록 최적화한다.

  • 보통, 함수를 선언하면 매번 새로운 함수가 생성된다

    • 이전에 생성한 함수와 새로 생성한 함수가 서로 다른 객체라면, 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트의 props가 변경되었다 하더라도, 자식 컴포넌트에서는 이전에 생성한 함수와 새로 생성한 함수를 서로 다른 객체로 인식하여, 불필요하게 리렌더링이 발생하는 문제가 있다.
  • useCallback으로 방지 가능

const memoizedCallback = useCallback(
  () => {
    // 함수
  },
  [/* dependency array*/],
);
  • 첫번째 parameter : 함수
    • 함수를 메모이제이션함.
    • 이전에 생성한 함수와 새로 생성한 함수를 비교해 이전에 생성한 함수와 같은 경우 이전에 생성한 함수를 반환하고, 다른 경우 새로운 함수를 생성함
  • dependency array
    • 빈배열 [] : 이전에 생성한 함수 재사용
    • props나 state 값: 해당 값들이 변경되었을 때에만 새로운 함수를 생성, 이전에 생성한 함수와 다른 객체로 인식한다.

useCallback은 자식 컴포넌트에서 props로 전달받은 함수를 사용할 때, 해당 함수가 자주 변경되지 않을 때 사용하는 것이 좋다.

공부하면서 어떤 어려움이 있었나요?

큰 어려움은 없었던 하루였다. 다만, WIL을 하느라 많은 것을 학습하진 못했고 응용하는 법을 배웠다.

내일의 나는 무엇을 공부해야 할까요?

  • WIL 구현
  • vite 공부
  • 스타일컴포넌트 공부

0개의 댓글