[React] 뒤로가기 버튼 클릭시 이전 검색 결과 보여주기

위와 같이 뒤로가기 버튼을 클릭했을 때 이전의 검색 결과를 보여주는 것을 정리해보려고 한다.

먼저 라우터의 경로는 아래와 같다.

// Root.jsx

export default function Root() {
	return (
    	<>
      		<SearchHeader />
      		<Outlet />
      	</>
    )
}

// App.js

const router = createBrowserRouter([
  {
  	path: '/',
    element: <Videos />,
    errorElement: <NotFound />,
    children: [
    	{index: true, element: <Videos />},
  		{path: '/videos', element: <Videos />},
        {path: '/videos/:query', element: <Videos />},
  		{path: 'videos/watch/:videoId', element: <VideoDetail>}
    ]
  }
])
export default function App() {
	return (
    	<RouterProvider router={router} />
    )
}

SearchHeader에서 검색한 내용은 Videos 컴포넌트에서 useParams()을 통해 query로 받는다.

마찬가지로 뒤로가기 버튼을 누르면 url은 그대로 남아있기 때문에 이것을 활용하면 된다.
SearchHeader 컴포넌트에서도 useParams()으로 query를 받아서 query가 변할 때마다(useEffect사용) 검색창의 text를 변경해주면된다.

// SearchHeader.jsx

export default function SearchHeader() {
	const { query } = useParams();
	const [text, setText] = useState('');
  
  	useEffect(() => {
    	setText(query || ''); 
      	// query가 없다면 ""으로 해주어야 undefined가 뜨지 않는다!!
    }, [query]);
  
  	return (
    	...
    )
}