👩🏻💻 Today Learn
- 알고리즘 2문제
- 아웃소싱프로젝트
- 설문조사 질문 db불러오기
💡 알게된 내용
프로젝트 진행 중 설문조사 질문 데이터를 db.json에 만들고 데이터를 화면에 보여주기 위해 가져오는 작업을 하면서 에러가 발생해서 질문을 하러 갔다가 옵셔널체이닝에 대해 알게 되었다.
const { isPending, isError, data } = useQuery({
queryKey: ['countryLists'],
queryFn: getCountryLists,
});
const [currentPage, setCurrentPage] = useState(0);
const [answers, setAnswers] = useState(new Array(4).fill(null));
const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true);
console.log('엔서', answers);
const totalPage = data?.length || 0; // 이부분!
const navigate = useNavigate();그래서 옵셔널체이닝에 대해 찾아보면서 생각했다.
"아 오늘의 TIL은 이거다"
옵셔널체이닝이란?
?.
: 옵셔널체이닝을 사용하면 프로퍼티가 없는 중첩객체를 에러없이 안전하게 접근할 수 있다.
필요한 이유
: 예를들어 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 해보자. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다
let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError: Cannot read property 'street' of undefined이런 경우엔 에러가 발생한다.
옵셔널체이닝이 생기기 전에는 &&연산자를 주로 사용했다고 한다!
let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 AND로 연결해 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했는데 AND를 연결해서 사용하면 코드가 아주 길어진다는 단점이 있다.
사용방법
?. 앞의 평가 대상이 undefined 나 null 일 경우에 평가를 멈추고 undefined 를 반환해준다.
다시 접근해보자!
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.user?.address 로 읽으면 유저 객체가 존재하지 않더라도 에러는 발생하지 않는것이다!
이걸 토대로 알 수 있는 사실은 ?. 은 앞의 평가대상에만 동작하고 확장되지 않는다는 것이다.
추가)
참고로 위 예시에서 사용된 user?.는 user가 null이나 undefined인 경우만 처리할 수 있다.
user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 합니다. 그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생합니다.
참고자료
✍🏻 회고
하나 배웠으니 문서를 더 찾아보고 읽어보면서 이걸 언제 사용하면 좋을지 익히고 적절히 사용하도록 해봐야겠다!
