Router와 조건부 렌더링!

전은찬·2023년 1월 14일
0
post-thumbnail

Router와 조건부 렌더링!

라우터 객체란 페이지 이동과 관련된 기능을 가진 객체이다.
이 객체를 사용해서 A => B 페이지로 이동할 때,
"B 페이지로 라우팅한다"라고 말한다.

라우터는 정적라우팅과 동적라우팅으로 나눌 수 있는데
로그인페이지처럼 누구나 같은 페이지로 이동하는 것을 "정적라우팅"이라 하고,
게시글같이 여러페이지가 생길 수 있는 경우에는 "동적라우팅"을 사용한다.
등록된 게시글의 ID, 게시글 번호를 활용해서 불러온다.

// 동적라우팅 사용 방법. 자료출처: 코드캠프 //

조회할 때는 useQuery()를 사용하는데 useMutation()과 약간의 차이점이 있다.
useMutation()은 대괄호를 사용해서 실행함수 이름을 정해주고 그 이름을 입력해서 끌어왔다.
useQuery()는 중괄호를 사용해서 그 안에 { data }로 적어주어야한다.

그리고 useQuery()는 비동기 방식으로 페이지가 그려질 때 자동으로 요청이 날아간다.
이 때 data를 받아오는 동안 화면에 그려질 data의 내용이 undefined이므로 첫 화면이 그려지는 시기에 data를 불러오면서 에러가 발생한다.
이를 해결하기 위해 화면을 미리 그려놓고 데이터를 그려주기위해 조건부 렌더링을 사용한다.
쉽게 말해 요청에 대한 응답을 받기 전에 html을 그려주고, data가 받아지면 그 data내용을 채워 넣어주는 것이다.

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

삼항연산자:

data는 동기적으로 받아와야하는 데이터다.
하지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어주어야 한다.

data ? data.fetchBoard: undefined

&&연산자:

&&연산자는 데이터가 없을 경우 자동으로 undefined를 반환해준다.
데이터가 없을 때 따로 div를 쓸 필요가 없으면 else 부분을 쓸 필요가 없다.

data && data.fetchBoard

?? / || 연산자:

추가로 &&연산자는 앞의 값이 참일 경우 뒤의 값을 보여주는데
반대로 앞의 값이 거짓일 때 뒤의 값을 보여주는 경우인 Nullish coalescing연산자가 있다.
??연산자는 앞의 값이 빈 값이면 뒤의 값을 보여주고,
||연산자는 앞의 값이 거짓일 경우 뒤의 값을 보여준다.

data ?? data.fetchBoard

data || data.fetchBoard

옵셔널 체이닝이란

기존의 &&연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자이다.

data?.fetchBoard

이렇게 동적라우팅을 조건부 렌더링과 함께 사용하여 게시글을 등록하고 페이지를 이동할 수 있게 만들었다면 백엔드 컴퓨터의 문제, 수정하려는 게시글이 삭제되는 경우 등 여러가지 에러에 대한 경우의 수를 생각해 줄 필요가 있다.

graphql 뮤테이션에 try ~ catch를 적용하여
성공에 대한 처리, 실패에 대한 처리를 나누어 작업해주면 된다.

부트캠프 첫주차가 지났다.
첫날과 오늘.. 비교해보면
둘 다 어렵고 헤매고 어지럽지만 점차 적응해가고 있는 내가 보인다..
4시간 밖에 못자다가 5시간을 잔 날에는 더 상쾌하다는 느낌까지 든다 🤣
첫주차가 지나면서 최소한의 데이터 통신 세트(?)를 알게 되었는데 이 기초적인 뼈대를 튼튼하게 만들고 살을 추가해주면 여러가지 페이지를 구현할 수 있을 것이다.
첫주차의 뼈대를 꼭 이해하고 복습하자!

profile
no record no memory

0개의 댓글