06일차) 조건부 렌더링

badassong·2022년 11월 7일
0

JS

목록 보기
15/31
post-thumbnail

Optional-Chaining(조건부 렌더링)

optional-chaning은 다른 조건부 렌더링 연산자를 더욱 간결하게 만들어서 사용하기 위해 탄생하게 된다.

1. 삼항 연산자

제일 처음에는 삼항 연산자를 사용했다.

 // 조건 ? 조건이 참일때 렌더 : 조건이 거짓일때 렌더
data ? data.fetchProfile : undefined

data는 동기적으로 받아와야 하는 데이터라 받아오는데는 시간이 걸린다.하지만, 받아올때까지 기다려주지 않고 다음 코드로 넘어가게 된다.

따라서 data가 없을때 발생하는 오류를 방지하기 위해 data가 없을때는 undefined를 렌더하고, data가 들어오면 data.fetchprofile을 다시 렌더링해준다.

2. && 연산자

그 이후에는 && 연산자를 사용했다.

// 조건 && 조건이 참일때 렌더 할 것
data && data.fetchProfile

&&연산자는 연산자 앞의 값이 참일 경우엔 뒤의 값을 거짓일 경우엔 앞에 것을 그려준다.

data가 없을 때 렌더할 부분을 따로 적어줄 필요가 없어 삼항 연산자에 비해 상당히 간결해졌다.

하지만 게으른 개발자들은 이 코드조차 길다고 느껴진다.

|| 연산자

&&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주었는데, 반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우도 있다.

// 조건 || 거짓이면 렌더 할 것
data || data.fetchProfile

* data가 참이라면 data가 그려지게 됩니다.

3. 옵셔널 체이닝(optional-chaining)

그렇게 위의 여러가지 조건부 렌더링을 거쳐 더욱 간결하고 가장 최신에 나온 문법인 optinoal-Chaining방법이다.

// 조건?.있으면 렌더 할 것 , 없으면 undefined 리턴
data?.fetchProfile

optional-Chaining? 연산자 앞 객체의 참조가 undefined 또는 null 이라면 undefined를 리턴해준다.

옵셔널 체이닝은 위의 두 연산자와 같은 역할을 한다. 하지만 사용은 훨씬 간단해지고 가독성이 좋아졌다.

profile
프론트엔드 대장이 되어보쟈

0개의 댓글