상황

부모 컴포넌트에서 useState를 사용하여 상태값을 생성하고 api 요청을 받은 후 상태값을 변경해 자식 컴포넌트에 props로 넘겨줘야하는 경우일 때, 상태 값이 객체라면 의미있는 데이터를 할당하기 전까지 실제 데이터와 같은 형식(타입)으로 초기화를 해줘야하는지 null값으로 초기값을 설정해야하는지 고민이 되는 상황

문제

문제 1

상태값의 초기값을 null로 할당해준다면 TypeScript에서는 상태값의 타입을 실제 데이터 타입 또는null로 설정해주어야할 것이고 부모 컴포넌트에서 그 상태값이 null일 때는 자식 컴포넌트가 렌더링이 되지 않도록 하는 등의 에러 처리가 필요할 것이다.

문제 2

const [updatedCandle, setUpdatedCandle] = useState<CandlestickData>({
    time: '',
    open: 0,
    close: 0,
    high: 0,
    low: 0,
});

const [updatedCandle, setUpdatedCandle] = useState<CandlestickData | null>(null);

상태값을 위와 같은 방식으로 초기화를 해준다면 실제 데이터를 api를 통해서 받아오기 전까지 open, close 등의 값들이 0원으로 표시될 수 있어 사용자들에게 잠깐의 시간이지만 암호화폐의 시세가 0원으로 인식되어 혼란을 줄 수 있다고 생각되었다.

해결

먼저, 문제 1처럼 null로 초기화하는 것은 초기에 데이터가 없는 상태를 나타내기 위한 일반적인 방법이다. 하지만 타입을 복잡하게 만들 수 있으며, 렌더링 로직을 관리하기에도 번거로움을 줄 수 있다.

또한, 상태값이 null일 때 자식 컴포넌트가 아예 렌더링되지 않기 때문에 데이터가 생기기 전까지 사용자에게 빈 화면이 보여져 사용자는 이러한 상태를 보고 애플리케이션이 오류가 발생했다고 생각할 수도 있기 때문에 좋은 방식이라고 생각하지 않았다.

위 코드를 실행하여 로그가 어떻게 찍히는지 확인하고 리액트의 생명주기를 한번 더 이해하고 왜 상태값을 null값보다는 명확하게 초기화해야하는지 더 잘 이해하게 되었다.

초기값을 null 또는 undefined로 준다면 예기치 않은 동작이 발생할 수 있고 다른 개발자나 내가 이 코드를 확인할 때 초기값이 무엇인지 인지하기 쉽고 컴포넌트의 동작을 예측할 수 있을 것이라 판단했다.