react를 공부하다가 항상 궁금했던 부분.
데이터를 받아올 때 왜 data?.user?.name 이런 식으로 쓰는가.
지난번에 한번 설명은 들은 것 같은데 기억은 나지 않고,
저렇게 사용하지 않으면 에러가 날 때가 많아서
습관적으로 저렇게 사용하고 있었지만
정확히 왜? 인지는 몰랐다.
정확히 알기 위해 chat GPT에게 물어봤다.
data?.user?.name 이렇게 쓰는 방식을
Optional Chaining(?.) 문법이라고 하고,
react에서 데이터를 받아오는 과정에서
서버로부터 데이터를 받아오는 동안 컴포넌트가 렌더링이 되는 경우 때문에 사용한다고 한다.
이때 데이터가 아직 없는 상태에서 해당 데이터를 사용하려고 하면 에러(TypeError)가 발생한다.
옵셔널 체이닝은 그것을 방지해주는 역할을 하는데
말하자면 데이터가 존재하지 않을 경우에도 에러가 나지 않게 해주고,
안전하게 값에 접근하게 해준다.
만약 해당 객체에 프로퍼티가 존재하지 않을 경우에는 에러대신 undefined를 반환한다.
react에서 옵셔널 체이닝을 사용하는 것이 필수적이지는 않다고 한다.
데이터를 받아오는 과정에서 항상 데이터가 있다는 보장이 있다면
적어주지 않아도 괜찮지만, 그렇지 않다면 적어주어 에러를 방지하는 것이 좋다고 한다.
React에서 Optional Chaining을 쓰는 경우
1.props나 state에 존재하지 않는 값에 접근할 때
const { user } = this.props;
const email = user?.email;- 중접된 객체나 배열에 접근할 때
const { user } = this.props;
const city = user?.address?.city;- 함수가 존재하는지 확인하고 호출할 때
this.props.onClick?.(); 옵셔널 체이닝을 쓰는 3번째 경우에 관한 것은 몰랐던 부분이다.
나중에 한번 써먹어봐야겠다.
