교육 계획 작성기 작성: Remix에서 복잡한 양식 다루기

안녕하세요! 이 미니 시리즈를 계속하면서 Remix에서 복잡한 형식을 처리한 방법을 여러분과 공유하고 싶습니다. 알다시피, 저는 현재 다음과 같이 보이는 이 교육 계획 작성기를 만들고 있습니다.



Remix는 actions를 통해 백엔드로 전송된 데이터를 처리할 것으로 예상합니다. 간단한 양식을 다룰 때는 꽤 멋지지만 여기에는 이러한 열이 있고 각 열에는 여러 연습이 있으므로 어떻게든 데이터를 그룹화할 수 있으면 좋을 것입니다.

첫 번째 아이디어는 docs에 있는 그대로 처리하는 것이었습니다.

export const action = async ({ request }) => {
  const formData = await request.formData();

  const title = formData.get("title");
  const slug = formData.get("slug");
  const markdown = formData.get("markdown");
  ...
}

이렇게 하면 Object.entries 와 같은 입력 이름을 지정하면서 formData 에서 col-1-ex-1 를 어떻게든 호출할 수 있습니다. 그것이 얼마나 지루했는지 상상할 수 있습니다. 그래서 해결책을 찾았고 qs (querystring) 패키지의 도움으로 매우 영리한 해결책을 찾았습니다.

패키지는 각 운동 입력에 다음과 같은 이름을 부여할 수 있도록 합니다.

단계[${idx}][${exercise.id}][제목]

단계[${idx}][${exercise.id}][세트]

단계[${idx}][${exercise.id}][reps]

이 스니펫으로 요청을 구문 분석한 후

export const action: ActionFunction = async ({ request }) => {
  const text = await request.text();
  const parsed = qs.parse(text) as YourCustomType

  ...
}

다음 구조를 제공합니다

phases: [
  {
     exerciseId: { 
        sets: number,
        reps: number,
        title: string,
     },
     exerciseId2: { 
        sets: number,
        reps: number,
        title: string,
     }
  },
  {
     exerciseId3: { 
        sets: number,
        reps: number,
        title: string,
     }
  },
  {
     exerciseId4: { 
        sets: number,
        reps: number,
        title: string,
     },
     exerciseId5: { 
        sets: number,
        reps: number,
        title: string,
     }
  },
] // 3 objects represent 3 columns (phases) in the app

이 구조는 작업하기가 훨씬 쉽습니다. 그리고 가장 좋은 점은 단 두 줄의 코드를 사용하여 이 구조를 얻었다는 것입니다 😅

읽어주셔서 감사하고 이것이 누군가에게 도움이 되기를 바랍니다! 조심하세요 😉

소스 코드 -> Strongion

원본 스레드 -> github discussion