어제에 이어 두번째 페이지 만들기 도전.
아직 완벽히 이해 안가는 부분도 있으나 일단은 따라해보며 파악해보자.
버튼 클릭 시 결과화면에 띄우기 -> 데이터 조회 요청 -> query
-필요 기능 목록-
playground에서 프로필 조회 확인하기.
useRouter와 useQuery, gql 불러오기.
import {useRouter} from "next/router"
import {useQuery, gql} from "apollo/client"
export default function(){
return(
<div>
<div>이름:{}</div>
<div>나이:{}</div>
<div>학교:{}</div>
//중괄호 안에 조회한 데이터 들어갈 예정.
</div>
)
}
const router = useRouter()
//5-1. 먼저 playground에서 조회한 내용 복사하기.
const KOF = gql`
query{fetchProfile(
name:"도우너")
{
name
age
school
}
}
`
//5-2. query에서 조회된 값을 나타내기 위해 백틱 안의 내용 수정하기.
//iori는 query화면에 띄울 때 다시 사용됨.
const KOF = gql`
query kyo ($iori:String)
{fetchProfile(name:$iori)
{
name
age
school
}
}
`
const singo = useQuery(KOF, {variable:{iori:router.query.name}})
//여기 이오리 뒤에가 왜 라우터일까.
//variable에도 {}가 왜 사용될까.
//const{} = useQuery(a,b)의 활용법 찾아보기.
7.return에 조회한 값 나타내기. 데이터가 없을 경우도 고려해야 하며 짧은 코드 입력을 위해 삼항연산자 사용.
return(
<div>
<div>이름:{singo && singo.fetchProfile.name}</div>
<div>나이:{singo === undefined ? '' : singo.fetchProfile.age}</div>
<div>학교:{!singo ? '' : singo.fetchProfile.school}</div>
//useQuery를 할당한 singo 안의 fetchProfile안의 값을 조회.
</div>
)
}
아직 명확하지 않은 부분이 군데군데 보인다. 찾아보고 수정할 예정.
오늘 할 일
실습 몇번 더 반복해보고 숙제 다시 해보기.
알고리즘 풀기.
느리더라도 내 학습 속도에 맞춰 꾸준히 공부할 것.