2022.06.21

1. 개발 도중에 콘솔로그가 두번 찍히는 현상 발생 (GET, POST 요청 마찬가지)

 

index.js 파일안에 있는 <React.StrictMode>가 감싸져있어서 그렇다. 

요렇게 <App/> 만 남겨주면 말끔히 해결된다. 

 

StrictMode가 되어있으면 두번씩 렌더링이 되기 때문이다.

이는 리액트 쪽에서 다음 아래와 같은 문제들이 발생했을 때 도움을 주기 위해서라고 한다.

 

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사

 

참고 블로그

https://velog.io/@hyes-y-tag/React-useEffect%EA%B0%80-%EB%91%90%EB%B2%88-%EC%8B%A4%ED%96%89%EB%90%9C%EB%8B%A4%EA%B3%A0

[React] console.log가 두번 실행된다고?

공식문서 참고 url

https://ko.reactjs.org/docs/strict-mode.html

Strict 모드 – React

 

 

 

2. status code 201 뜻

 

GET 메서드를 썼을 때는 200이 떴는데, POST를 쓰니까 201이 떠서 그 차이가 궁금했다.

 

201: POST 나 PUT 으로 게시물 작성이나 회원 가입 등의 새로운 데이터를 서버에 생성하는(쓰는, 넣는) 작업이 성공했을 때 반환하는 것

 

 

 

3. Input 필드 submit 이후에 비우는 법 

 

input에 유저가 자신의 학번을 적은 이후에 확인버튼을 누르면 필드의 value값을 초기화하고 싶었다. 

 

아래와 같이 form 태그있는 곳에 onSubmit을 등록해주고, e.target.reset() 함수를 작동시켜 

제출이 되면 함수가 작동하여 Input 입력값이 비워지도록 구현하였다. 

const handleSubmit = e => {
    e.preventDefault();
    if (userInput.studentNumber == '') {
      setErrorMessage(true);
      e.target.reset();
    } else {
      setErrorMessage(false);
      e.target.reset();
    }
  };
  
  return (
    <Background>
      <Container onSubmit={handleSubmit}>
        <UserInputContainer>
          <UserInput
            name="studentNumber"
            type="number"
            onChange={onChangeInput}
            autoFocus
            placeholder="학번을 입력하세요"
            className={errorMessage ? 'activateErrorColor' : ''}
          />
        </UserInputContainer>
        <ButtonContainer>
          <CancelButton type="button" onClick={activateModal}>
            취소
          </CancelButton>
          <ConfirmButton type="submit" onClick={checkStudentNumber}>
            확인
          </ConfirmButton>
        </ButtonContainer>
      </Container>
    </Background>
  );
};

 

코드 참고 링크 

https://bobbyhadz.com/blog/react-clear-input-after-submit

Clear Input values after form submit in React | bobbyhadz

 

 

 

4. Axios POST 요청 보내기

 

팀원분이 작성해주신 API 명세서에 body를 구성해서 보내달라고 했는데 어떻게 보내면 좋을지 고민했었다.

 

하단과 같이 보냈더니 201코드가 응답으로 잘 돌아왔다. 

const exampleRequest = async () => {
    try {
      const res = await client.post('api/v1/reservations', {
        name: '김정희',
        studentId: '2017000782',
        department: '연극영화학과',
        purpose: '리액트 스터디',
        year: 2022,
        month: 6,
        day: 22,
        startTime: '18:30',
        endTime: '20:30',
        color: '#F8DC81',
        description: '스터디 잘 진행해보겠습니다.',
      });
      console.log(res);
    } catch (e) {
      console.log(e);
    }
  };
  useEffect(() => {
    exampleRequest();
  }, []);