리액트 공부하기 - 오류는 없는데, 화면에는 렌더링이 안될때?

프로젝트를 경험하다가, 분명 vs code나, 화면에는 오류가 안뜨는데..

렌더링이 안된적이 있었다.

아마, 패치 받아오는 과정에서.. 받아오기 전에, 먼저 그 값을 사용하는 걸 적어놔서 그런것 같다.

패치 쓸 때는 조건부 렌더링 꼭 적어주기....

---

 

💥 오류는 없는데 화면이 안 나오는 이유?

조건부 렌더링이 없어서 "silent fail"이 발생하는 것!

 

예시: 

<MovieCard title={movie.title} />

movie가 아직 API 로딩 중이면 undefined.title이 돼서 아무것도 안 보이고, 콘솔에만 warning 날 수도 있고, 심지어 warning도 안 뜨는 경우가 많아.

특히 VS Code가 잡아주지 않는 이유는, 타입이 any나 undefined까지 허용되기 때문 (JS는 느슨해서)

---

해결 방법: 조건 넣기

예시 1: movie 존재 여부 먼저 체크

{movie && <MovieCard title={movie.title} />}

 

예시 2: movie.title이 없을 때 대체 텍스트

<MovieCard title={movie?.title || "제목 없음"} />

---

Tip: "오류는 안 나지만 안 보인다" 싶을 땐 이렇게 점검해보자.

1. 그 데이터가 진짜 존재하는지 console.log() 찍어보기
2. null, undefined, [], '' 중 어떤 falsy 값일 수 있는지 체크하기
3. 렌더링 코드 앞에 조건부 렌더링을 붙여보기 (data &&)