비동기 통신과 조건부렌더링-옵셔널 체이닝 (Optional-Chaining)

JS는 작성된 코드가 위에서부터 순서대로 실행되기 때문에

데이터를 요청하고 응답을 받아오는 동안 화면에 먼저 그려지면서 화면에 그려질 데이터의 내용이 undefined가 됩니다.

따라서 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생합니다.

const FETCH_BOARD = gql`
  query {
    fetchBoard(number: 40) {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const { data } = useQuery(FETCH_BOARD);
  console.log(data);

  return (
    <>
 
    //오류가 발생되는 해당 코드
	<div>작성자 : {data.fetchBoard.writer} </div>
    <div>제목 : {data.fetchBoard.writer} </div>
    <div>내용 : {data.fetchBoard.writer} </div>
    </>
  );
}

에러가 발생하지 않고 효율적으로 실행되기 위해서 우선 정적인 부분을 화면을 미리 그려놓고 그 다음, 데이터를 그려주기 위해서 조건부렌더링 을 사용합니다.

조건부 렌더링에는 &&연산자, 삼항연산자, 옵셔널체이닝 이 있습니다.

삼항 연산자

data ? data.fetchBoard : undefined

처음엔 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 경우를 모두 적어줘야 했습니다.

데이터가 있다면 ? data.fetchBoard , 없다면 ? undefined

&& 연산자

data && data.fetchBoard

&&연산자는 데이터가 있다면 보여주고,

데이터가 없을 경우엔 undefined를 반환해줍니다.

Nullish coalescing 연산자

&&연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주었는데,

Nullish coalescing 연산자 는 반대로 앞의 값이 거짓일때 뒤의 값을 보여주는 경우입니다.

data ?? data.fetchBoard

data || data.fetchBoard

**??연산자** 는 앞의 값이 빈 값이면 뒤의 값을 보여주며
**||연산자** 는 앞의 값이 거짓(false)일 경우 뒤의 값을 보여줍니다.

옵셔널 체이닝 (Optional-Chaining)

코드를 더욱 간결하게 사용하는 연산자 입니다.

data?.fetchBoard

? 연산자 앞 객체의 참조(data)가 undefined || null 이라면 undefined를 리턴해줍니다.

데이터가 있다면, 해당 데이터(fetchBoard)를 리턴해줍니다.

// Optional-Chaining을 사용한 예시
	<div>작성자 : {data && data.fetchBoard?.writer} </div>
    <div>제목 : {data?.fetchBoard?.title} </div>
    <div>내용 : {data ? data.fetchBoard?.contents : "loding .."} </div>

그렇다면 Optional-Chaining은 데이터가 완전히 들어올 때 까지 기다리는 것인가요 ?

아닙니다!

데이터가 없을때는 우선 undefined를 리턴했다가,
데이터가 들어오면 들어온 데이터를 가지고 화면을 다시 렌더해주는 것 입니다. 이를 리렌더링 이라고 부릅니다.

💡 optional chaining 언제 사용하나요?

데이터를 화면에 렌더링 할 때 사용합니다.
백엔드와 통신해서 받아오는 데이터들은 시간이 걸리기 때문에 옵셔널 체이닝을 사용해야 화면에 오류가 안나고 잘 렌더 됩니다.