조건부 렌더링이란 무엇일까??
조건부 렌더링 (optional-rendering)이란 무엇일까??
내가 수업때 조건부렌더링을 사용한 부분은 객체타입의 데이터를 불러올때.
불러오는 속도가 데이터가 저장되는 속도보다 빠르다면 그 객체의 값이 undefined로 나오기 때문에
조건부렌더링 이란 기술을 사용했다.
예를 들어 fetchBoard라는 API는 데이터를 불러오고 그 데이터를 data라는 변수에 담아야한다.
그리고 그 data변수안에 담긴 API의 리턴값들을 jsx등의 넣어 사용해야하는데.
이때 fetchBoard로 불러올 내용이 아직 DB에 저장되지 않았다면
data.fetchBoard.writer의 값은 undefined가 출력된다.
이를 막기위한 기술이 바로 조건부 렌더링인데 이 기술은 많이 필요한 만큼 점점 더 간결화 됬다.
나는 총 3가지의 기술을 배웠는데 이를 포스팅해보겠다.
{data && data.fetchBoard.writer}
// 데이터가 있다면 data.fetchBoard.writer를 출력해라.
{data ? data.fetchBoard.writer : "로딩중입니다.}
//3항 연산자활용, 데이터가 비어있지 않다면 writer를 출력하고 data가 비어있다면 로딩중입니다를 출력해라.
{data?.fetchBoard.writer}
//1번과 똑같은 내용이지만 제일 많이사용하고 간단하고 가독성도 좋다.
