[error] Type error: 'result' is possibly 'null'

Next.js와 typescript를 사용한 프로젝트를 진행하면서 만난 에러이다.

 

Type error: 'result' is possibly 'null'.

const result = await db.collection("community").findOne({ _id: new ObjectId(props.params.id) });
  return (
    <div>
      ...
          <div>오늘의 노력을 간략하게 소개해주세요.</div>
          <input className="title_box" name="title" placeholder="제목" defaultValue={result.title} />
          <div>어떻게 성장할까요?</div>

          <textarea className="content_box" name="content" placeholder="내용" defaultValue={result.content} />
      ...

 

위 코드에서 result.title 와 result.constent 에서 result가 'null'인 것 같다는 에러를 뱉어내고 있다. 

 

찾아보니 Typescript가 result가 비어있는 객체일 수도 있다고 판단하기 때문이라고 한다. 

따라서 빈 객체인 result 안의 title이나 content에 접근하려고 하니 에러를 뱉어내는 것이다.  

이를 해결하기 위해서는 여러 방법이 있는데 

 

나는 그 중에 가장 쉬운 옵셔널 체이닝을 사용했다. 

 

해결

input className="title_box" name="title" placeholder="제목" defaultValue={result?.title} />

 

result?.title   과 같이 접근 전에 ? 를 붙이면 된다.

이는 result 객체 안에 접근하기 전에 result 객체의 존재를 먼저 확인하는 간단한 문법이다. 

 

result 객체가 존재하면 코드를 실행하고 없으면 무시하라는 의미이다. 

 

예전에 팀 프로젝트를 진행하면서 Array 형태의 data를 api로 받아서 .map()으로 화면에 뿌려준 적이 있었는데 

그때 에러를 막기 위해서 Array.isArray(data)로 형태를 확인한 후에 진행되도록 했던 적이 있는데 그것과 비슷한 것 같다. 

 

매우 간단하면서도 에러를 방지할 수 있는 효율적인 문법이라는 생각이 든다. 

 

참조

 

https://kyounghwan01.github.io/blog/TS/object-null/#%E1%84%8B%E1%85%A8%E1%84%89%E1%85%B5

Object is possibly 'null'