조건부 랜더링이란 쉽게 말해서 내가 어떤 버튼(수정,등록 or 로그인,로그아웃)을 클릭하냐에 따라서 화면에 어떤 그림을 그려줄지 조건부로 나뉘어서 보여주겠다는 뜻입니다.
javascript는 작성된 코드가 상단부터 파싱되기 때문에 데이터를 요청하고 응답을 받아오는 동안 화면에 그려질 데이터의 내용이 undefined 이므로 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생합니다.
이 부분이 효율적으로 실행되기 위해서 화면을 미리 그려놓고 데이터를 그려주기 위해서 조건부렌더링을 사용합니다.
1.삼항 연산자
data는 동기적으로 받아와야하는 데이터입니다.
하지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 아래처럼 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어줘야 했습니다.
data ? data.fetchProfile : undefined
2. && 연산자
&&연산자는 데이터가 없을 경우 자동으로 undefined를 반환해줍니다. 데이터가 없을 때 따로 div를 쓸 필요가 없으면 else 부분을 쓸 필요가 없죠. 하지만 이 코드조차 길다고 느껴집니다.
data && data.fetchProfile
&&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주었는데, 반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우도 있습니다, Nullish coalescing 연산자라 불립니다.
??연산자는 앞의 값이 빈 값이면 뒤의 값을 보여주며 ||연산자는 앞의 값이 거짓(false)일 경우 뒤의 값을 보여줍니다.
data ?? data.fetchProfile data || data.fetchProfile
3.옵셔널체이닝
optional-chaing이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자 입니다.
optional-Chaining은 ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴해줍니다.
위에 있는 삼항연산자, && 연산자와 똑같은 기능을 하는 것이죠.
data?.fetchProfile
글의 출처: 코드캠프
