[React][TS] useLocation

useLocation

현재 위치(작업중인 코드)의 location 객체를 반환.

위치가 변경될 때마다 새로운 location 객체를 반환하기에, 위치 변화에 따른 동적인 UI 업데이트나 조건부 렌더링에 유용하게 사용 가능.

 

useLoaction의 주요 속성

- pathname : 현재 위치의 경로

- search : 현재 위치의 query parameter

- hash : 현재 위치의 hash

- state : 라우팅된 component로 전달되는 상태 객체

- key : location 객체의 고유 식별

 

useLocation 객체의 state 속성 예제

import { useLocation } from 'react-router-dom';

interface SelectedTable {
  table_id: string;
  columns: string[];
}

const location = useLocation();
const selectedTables = location.state?.selectedTables as SelectedTable[] || [];		// <=

 

맨 마지막 줄의 코드에 대한 설명을 작성하려고 했는데, 이에 포함된 변수? 객체 등이 좀 있어서 윗줄에 작성해보았다.

 

먼저 import { useLocation } from 'react-router-dom'; 는 useLocation 훅을 쓰려면 반드시 'react-router-dom'에서 import 해와야 한다.

 

다음으로, interface SelectedTable 은 내가 만들고자 한 데이터 형식을 정의해논 것이다.

table_id 와 columns 를 요소로 포함하고 있는 객체 형태를 정의해두었다.

 

const location = useLocation(); 는 useLocation 훅에서 현재 페이지의 위치 정보를 담고있는 객체를 location이라는 변수로 정의한 것이다.

 

대망의 마지막줄!

const selectedTables = location.state?.selectedTables as SelectedTable[ ] || [ ];

 

location.state : 방금 정의한 현재 페이지 위치 객체인 location에서 상태 객체 state를 불러온다. 여기서 state는 이 페이지로 오기 전, 아래 코드에서 받아온 정보들을 담고있다.

// 이전 페이지
const handleJoinTables = () => {
	navigate('/join', { state: { selectedTables, selectedTablesInfo } });
};

 

?. : optional chaining 연산자로, location.state로 불러오려는 객체가 null 또는 undefined일 경우 안전하게 접근할 수 있게 한다.

즉, location.state에 값이 존재할 때만 다음 option을 가져온다는 말이다.

 

selectedTables : 여기서는 값이 존재하기 때문에 다음 option인 selectedTables로 넘어가 해당 정보를 가져오게 된다.

 

as SelectedTable[ ] : 상단의 코드에서 interface로 정의했던 SelectedTable 타입의 배열로 데이터를 가져오겠다는 것이다.

 

|| [ ] : location.state?.selectedTables 가 undefined 또는 null이라면, 빈 배열을 기본값으로 한다.

 

 

 

타입스크립트가 처음인데, 큰 프로젝트에 합류하게 되어 공부해야 할 문법이 굉장히 많다.

사실 interface에 대해서도 잘 모르는데 대강 이해해서 사용중이다..

언젠가 날잡고 interface에 대해서도 공부 해봐야겠다.

(java의 interface는 아는데, 타입 명시하는 것 이외엔 비슷하지 않을까 싶다.)