객체를 state로 이용할 때는 readonly로 직접 변경 못하게 막기

 

리렌더링 방지를 하는게 아니라면 아래와 같은 코드는 쓰지 않는게 좋다.(리렌더링 방지를 원한다면 useRef가 적합하다)

  const [application, setApplication] = useState<ApplicationType>({
    name: "june",
    product: "SEB",
  });

// application을 직접 변경하는 것은 리렌더링을 일으키지 않음
application.name = "seung";

 

코딩단계에서 막을 수 있게 타입스크립트로 타입가드를 하자.

readonly를 이용해서 직접 변경을 막은 코드이다.

interface ApplicationType {
  readonly name: string;
  readonly product: string;
}

  const [application, setApplication] = useState<ApplicationType>({
    name: "june",
    product: "SEB",
  });

  application.name = "seung"; // 읽기 전용 속성이므로 'name'에 할당할 수 없습니다.ts(2540)