[Next.js + TS] today i learned 8/7: 마크다운 에디터 데이터 가져오기 & API통신 준비 (Next.js 개발 3일차)

오늘은 자식 컴포넌트(마크다운 에디터)의 관리하는 상태를 부모 컴포넌트로 가져와서 그 값을 이용했다. 그리고 아직 서버를 맡은 팀원이 API 구축을 다 하지 못해서 반영되는 모습을 실제로 볼수는 없지만 axios를 이용한 서버와의 API통신 준비, 그리고 그 데이터 여부에 따른 페이지 리다이렉트까지 완료하였다. 

1. 마크다운 상태관리

용어 타이틀에 값이 있고 + 마크다운에 값이 있을 때 저장하기 버튼 활성화

마크다운 에디터는 react-simplemde-editor에서 toast-ui로 바꾸었다. 아래는 Markdown.tsx 컴포넌트의 일부이다.

  const handleChange = useCallback(() => {
    if (!editorRef.current) {
      setContentNotFoundError(true)
      return
    } else {
      setContentNotFoundError(false)
      console.log(contentNotFoundError)
      props.onChange(contentNotFoundError)
    }
    (...)

props.onChange를 통해 contentNotFoundError 상태 변경 값을 부모 컴포넌트로 보낼 수 있게 준비를 마쳤고,

부모 컴포넌트에서

<Markdown onChange={() => setContentNotFoundError(false)} />

이렇게 불러왔다. useState처리는 자식 컴포넌트와 부모 컴포넌트 둘 다에 되어있다.

 

2. 서버와의 API통신과 데이터 저장

이부분은 아직 서버 API가 없어서 제대로 기능은 못하는데, 저장하기 버튼을 누르면 onSubmit 함수가 실행되고 API 주소로

1. 용어의 제목
2. 마크다운 에디터에서 작성한 값
3. 관련 용어(태그들)

을 보낸 뒤 성공과 실패 여부에 따라 각각 response와 error.response를 콘솔에 출력한 뒤 전체적인 용어 생성 과정에 대한 상태인 makeTermsProcess state를 true로 set해준다.

아래에 catch 부분에서 makeTermsError는, 용어 생성 과정에서 어떠한 문제가 발생했는지 그 데이터의 값을 저장하는 상태라고 보면 된다.

  const onSubmit = useCallback(
    (e: any, props) => {
      e.preventDefault()
      if (!contentNotFoundError && !contentNotFoundError) {
        setMakeTermsError('')
        setMakeTermsProcess(false)
        axios
          .post('/RESTAPI', {
            titleInput,
            // props.initialValue,
            relatedTerms,
          })
          .then((response) => {
            // 성공
            console.log(response)
            setMakeTermsProcess(true)
          })
          .catch((error) => {
            console.log(error.response)
            setMakeTermsError(error.response.data)
          })
      }
    },
    [
      titleInput,
      {
        /* props.initialValue*/
      },
      relatedTerms,
    ],
  )

  if (data) {
    return {
      redirect: {
        destination: '/terms',
        permanent: false,
      },
    }
  }

 

useCallback 함수이므로 뒷정리 값으로 각각 titleInput, (props.initialValue), relatedTerms가 들어갔고 마지막에 data가 있다면 용어 목록 페이지로 리다이렉트 하려고 하였다. 여기서 data가 있는지 없는지를 확인하는 방법은 SWR을 사용하는 것이다.

 

아래는 useSWR을 사용하는 방법인데, API와 이를 가공하는 fetcher함수를 각각 나열해주는 것이다.

  const { data } = useSWR('RESTAPI', fetcher)

그리고 아래는 fetcher 함수이다.

import axios from 'axios'

const fetcher = (url: string) =>
  axios
    .get(url, {
      withCredentials: true,
    })
    .then((response) => response.data)

export default fetcher

axios를 사용하는데 여기서는 이제 get으로 url로부터 데이터를 받아오는 과정이다.

 

그런데 문제가 있다면, 마크다운 에디터의 값을 어떻게 가져오는지 명확하지 않은 상태라는 것이다.  자식 컴포넌트에서 가져온 값을 axios에 활용해야 하는데 그 방법을 잘 모르겠다. 그래서 props.initialValue값을 넣어뒀다가 주석처리를 했다. 이 initialValue는 마크다운 컴포넌트에서 props로 선언한 값인데, 마크다운 컴포넌트까지 쓰면 글이 너무 길어지므로 생략한다. 이부분은 따로 더 찾아봐야 될 것 같다.

 

아무튼 이렇게 서버와의 API통신을 위한 과정을 어느정도 마쳤고, 이제 더 알아봐야 할 부분은 리다이렉트를 하는 과정과 마크다운 에디터의 데이터를 props형태로 받아와서 axios.post에 사용하는 방법이다.