리액트 - forwardRef, POST

프로젝트 하면서 리액트 구조와 기능을 익혀가고있다.

새롭게 알게된 것 또는 알았지만 써보니까 새로운것(?) 들이 참 많다 

 

1. 리액트에서 ref 는 prop으로 전달될 수 없다 

 

부모에서 ref를 선언해놓고

자식에게 전달할때는

자식 요소를 forwardRef 로 감싼 다음에 ref를 파라미터로 전달한다

export const ModalWrapper = forwardRef(
  ({ onClick, onSubmit, onChange }, ref) => {
    return (
      ...

 

2. POST 리퀘스트 보내기 

 

다짜고짜 input 데이터만 받아서 POST 하려니까 당연히 서버에서 받아주지 않는다. 

FormData 객체를 사용하거나 아래와 같이 payload 방식으로 보낼 수 있다. 

두 방식은 1. header의 필요 유무와 2. JSON형식 여부가 상이하다 

const BASE_URL = 'https:// ... ';

export function postQuestion(content) {
  const payload = {
    subjectId: 7964, // url에서 받아와야함
    content: content,
	...
  };

  fetch(`${BASE_URL}/...`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  })
    .then(response => {
      if (!response.ok) {
        // 요청이 성공하지 않은 경우 처리
        throw new Error('Failed to post question');
      }
      return response.json(); // 서버에서 JSON 응답을 받을 것으로 가정
    })
    .then(data => {
      console.log('Success:', data); // 성공적인 요청에 대한 응답 데이터 처리
    })
    .catch(error => {
      console.error('Error:', error); // 에러 처리
    });
}

 

하나씩 기능을 구현해가면서 깊은 막막함과 짜릿함을 번갈아가며 맛보고있다.

모르는게 많아서 다른 팀원들의 도움을 많이 받기도 한다.

혼자 다 감당하려면 못했을지도 모르는 것들도 있다. 나도 짐을 덜어주는 팀원이 되길