pre-project 9일차 (22.08.30. 질문, 답변 수정 페이지 구현)

✅ 오늘한 일

질문 수정 페이지 구현

질문 상세 페이지에 작성된 title, body의 데이터를 Link 컴포넌트를 사용하여 질문 수정 페이지로 이동하면서 url에 state값으로 질문의 아이디값, 제목, 내용을 넘겨준다.

이동된 페이지에서 useLocation을 사용하여 url에 담아둔 state값을 useState에 할당하고 input에 defaultvalue를 설정해주어 수정전 작성 내용을 보여준다. 이후 수정이 된다면 state값이 변하고, 이 값을 axios를 사용하여 서버측에 headers에 토큰값과 함께 넘겨준다.

// QuestionViewer.js
<StyledLink
  to={`/questionedit/${questionId}`}
  state={{ title: title, body: body, questionId: questionId }}
>
  <span>Edit</span>
</StyledLink>

// QuestionEdit.js
  const location = useLocation();
  const [questionPost, setQuestionPost] = useState({
    title: location.state.title,
    body: location.state.body,
  });

질문 수정 페이지

📌 해야할 일

• 답변 작성 기능 구현
• 답변 수정 기능 구현
• 백엔드와 통신하기