[React] useLocation이란 ?

useLocation이란?

useLocation은 사용자가 현재 URL 경로에 대한 정보를 제공하는 React 컴포넌트의 일부로 사용됩니다.
useLocation 훅을 사용하면 현재 경로(location) 객체에 접근할 수 있습니다. 이 객체에는 현재 URL과 관련된 다양한 정보가 포함되어 있습니다. pathname, search, hash, state 등의 속성을 통해 현재 경로에 대한 정보를 확인할 수 있습니다.

useLocation을 사용하게된 이유

1. 게시판에서 axios로 받아오는 API를 다시 재요청하는 것은 서버의 과부하를 일으킬 것이라 판단하였다.
2. 위의 근거로 Notice에서 사용되는 API data를 useState로 상태관리후 props로 넘겨주면 해당 components에서 사용이 가능하기 때문에 사용하게 되었다.

Notice components

const Notice = () => {
  const navigate = useNavigate();
  const [noticeData, setNoticeData] = useState([]);
.
.
.
const getNoticeData = async () => {
    const APIURL = "http://localhost:3100";
    axios.get(`${APIURL}/board/posts`).then((response) => {
      setNoticeData(response.data.boardList);
    });
  };
useEffect(() => {
    getNoticeData();
  }, []);
  
  return(
    <NoticeBody>
		{noticeData.slice(10*(Page-1),10*((Page-1)+1)).map((data) => {
    		return (
                    <div key={data.id}>
                       <DataContainer onClick={() =>{
                          navigate("/NoticeInfo", {state: {noticeData:data}});
  //해당 부분이 state를 통해서 NoticeInfo로 넘겨주는 코드이다.
                        }}>
                        <DataNum>{data.id}</DataNum>
                        <DataTitle>{truncate(data?.title, 10)}</DataTitle>
                        </DataContainer>
                      </div>
                    );
                  })}
     </NoticeBody>
                          
    )
}

NoticeInfo Components

export default function NoticeInfo() {
    const location = useLocation();
    const noticeData = location.state.noticeData;
  //useLocation을 통해서 NoticeInfo로 접근하면서 state도 동시에 전달해줌
return (
	//이하 생략   
	);
}

회고

useLocation을 활용하므로 Location의 객체를 선언하고, 이 객체를 활용해서 현재 경로의 정보(state 등등) 을 사용 할 수 있게되었다.