데스크탑 화면에서 등록한 이미지가 모바일 화면에서 사라지는 문제

문제 상황
데스크탑 화면에서 등록한 이미지가 모바일 화면에서 사라지는 문제가 발생했다.

문제 해결
모바일 버전의 이미지 등록과 관련된 부분을 한참 살펴봤지만 문제는 다른 곳에 있었다. 문제를 해결하기 위해 이리저리 폼을 살펴보는 과정 중에 데스크탑 버전에서 해당 폼의 인풋에 값을 적어놓고, 창을 모바일 화면으로 줄이면 인풋에 적어 놓았던 값들이 초기화 되어버리는 문제도 발견하게 되었다. (다시 창을 키우면 값이 화면에 나타난다.)
여기서 힌트를 얻을 수 있었다.
이미지 등록 부분의 문제가 아니라 아예 폼에 입력되는 상태값에 관한 문제라는 것을 알게 되었다.
상태값에 대한 부분을 살펴보면서, 점점 상위로 이동해 라우터 컴포넌트까지 살펴보게 되었다.

return (
  <div className="w-full flex flex-col h-screen">
  	<div className="hidden md:inline-block">
		<div className="hidden md:flex">
         {/* 데스크탑 레이아웃 */}
        </div>
		<Outlet />
	 </div>

	 <div className="md:hidden">
       	<div className="md:hidden">
         {/* 모바일 레이아웃 */}
        </div>
		<Outlet />
     </div>
  </div>

react-router-dom의 Outlet은 라우트 컴포넌트 내에서 자식 라우트들을 렌더링하기 위해 사용되는 컴포넌트이다. 반응형 디자인을 구현하기 위해 데스크탑과 모바일 레이아웃을 각각 따로 구현하는 과정에서 애초에 잘못 설계하였던 것이다.

이렇게 Outlet을 사용하여 라우팅된 컴포넌트를 다르게 처리하는 경우, 각각의 Outlet에 대해 해당하는 라우트에서 컴포넌트들의 상태가 다르기 때문에 문제가 발생한 것이다.
따라서 이렇게 데스크탑, 모바일에 따라 변하는 레이아웃들은 css를 통해 조건부로 처리하고, Outlet 컴포넌트를 하나로 통일시켜 해결하였다.

return (
  <div className="w-full flex flex-col h-screen">
  	<div className="hidden md:inline-block">
		<div className="hidden md:flex">
         {/* 데스크탑 레이아웃 */}
        </div>
		<div className="md:hidden">
         {/* 모바일 레이아웃 */}
        </div>
		<Outlet />
	 </div>
  </div>