Today I learned

TIL. 기억하고 싶은 코드

📌 fetch에 순서 정하기 ( without added then)

fetch 요청을 할때 추가적으로 함수를 실행시키고 싶을때 .then().then() 이런식으로 사용해야만 하는줄알았다. 사실 then을 계속 사용했을때 지저분한 느낌이 들었다.

알아낸 방법은 .then()안에서 return 문을 활용하는 것이었다.

  const fetchLogin = () => {
    {
      radio &&
        fetch(`${BASE_URL}/${radio}/signin`, {
          method: 'POST',
          body: JSON.stringify({
            email: inputValues.email,
            password: inputValues.password,
          }),
        })
          .then(res => res.json())
          .then(res => {
            localStorage.setItem('access_token', res.access_token);
            setIsLoggedIn(true);
            alert('로그인에 성공했습니다');
            return goToMasterPage()
          }[여기])
          .catch(err => console.log(`err`, err));
    }
  };

사실 내가 사용하고 싶었던것은 코드안에 [여기] 라고 쓰여있는 부분에 함수를 사용해서 수정하는 것이었는데 아직 알아내지 못했다.
하지만 return을 안에서 사용하면 모든게 다 정리가 되고 페이지 이동이 가능하다.

📌 useParams

fetch요청을 할때 쿼리로 url을 전송을 해줬어야했다. 그때 pathname 을 가져와서 특정 아이디를 slice 해서 사용했었다. 이게 좀 위험한 방법이다. 우선적으로 id 값이 한자리라는 보장도 없을 뿐더러 고정된 값이 나오는게 아니기때문에 위험하다.
그래서 애초에 routes.js 에 :id 라고 적어줬기때문에 useParams에 id값을 가져와서 사용했다.

내가 처음 사용했던 방법

fetch(`${BASE_URL}/applications/services/${pathname.slice()/masters`, {

수정한 방법

const { id } = params;
    fetch(`${BASE_URL}/applications/services/${id}/masters`, {

📌 prev 사용

setState를 해야할 때 그 이전값을 그대로 가져와야하는 경우가 있다.
그 이전값 + 현재값을 state에 저장해야하는 경우
대부분 나는 아래와 같이 작성해왔다.

const getInputValue = e => {
    const { name, value } = e.target;
    setInputValues({ ...inputValues, [name]: value });
  };

그런데 이렇게 작성하게되면 외부값의 의존하는 함수의 형태가 되게된다.
그래서 prev를 사용해준다. 꼭 이름은 prev가 아니어도 되지만 일반적으로 prev를 사용하는거같다.

 const getInputValue = e => {
    const { name, value } = e.target;
    setInputValues(prev => ({ ...prev, [name]: value }));
  };

이렇게 prev를 사용해주면 외부값의 의존하지않는 함수의 형태로 사용할 수 있다.

추가적인 예로

  const width = () => {
    setIsWidth(!isWidth);
  };

위와 같은 방법보다는 아래와 같은 방법이 더 좋다.

  const width = () => {
    setIsWidth(prev => !prev);
  };