[항해 플러스 프론트엔드 3기] 3주차 WIL

Q1. 과제

  이번주 과제의 주제는 React Hooks 였습니다. 회사에서 class 기반으로 개발을 하다보니(Angular) hook을 쓸 일이 없었는데 이번에 확실하게 개념을 잡을 수 있었습니다. hook도 그 근본은 class이다보니 이해하는 데 큰 어려움은 없었습니다. 그래서인지 심화 과제도 hook 그 자체보다는 메모이제이션과 관심사 분리가 주된 내용이었습니다.

Q2. 시도

  가장 기억에 남는 시도는 useRef를 useState로 구현하는 부분이었습니다.

Q3. 문제점

  머리 속에 useRef는 리랜더링 되지 않는 값, useState는 리랜더링이 필요한 값이라고 주입식으로 외우다 보니 useRef를 useState를 써서 구현하라는 요구 사항이 처음에는 이해가 되지를 않았습니다. 그러나 잘 생각해보면 useState의 역할은 setter를 사용하지 않은 state의 변화는 리렌더링을 통해 화면에 반영하지 않는다라는 것이고 그 얘기는 반대로 말하면 useState의 값을 setter 함수를 쓰지 않고 변경하는 경우 메모리 상에서는 변경되지만 React가 이를 리랜더링을 통해 화면에 반영하지 않는다는 얘기고 이는 정확히 useRef의 동작과 일치하는 것이죠.

Q4. 해결

import { useState } from "react";

export function useRef<T>(initialValue: T): { current: T } {
  const [ref] = useState<{ current: T }>({ current: initialValue });
  return ref;
}

Q5. 3주차 느낀 점

  이번주 과제 난이도는 솔직히 자료 학습 없이 AI의 도움을 받아서 과제만 딱 처리하면 주말 + 평일 하루 정도면 끝낼 수 있을 정도의 난이도였다. 하지만 휴일이 하루 있는만큼 놓치고 있던 React 기본기를 다잡고 싶었고 화요일까지는 거의 학습만 하다가 수요일 목요일에 하마터면 과제 제출도 못할 뻔 했다. ㅎ_ㅎ... 뱃지 욕심은 없지만 그래도 fail은 가슴 아프니까...