Toast

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

토스트 제거

- 현상

토스트 제거 시 이전 toasts 상태를 참조 하고 있어서 이전 상태가 같이 렌더링 되는 현상이 발생했다.

 

// Toast.jsx
...
React.useEffect(() => {
    if (!dismiss && autoClose) {
      setTimeout(() => {
        setDismiss(true);
      }, autoCloseDelay);
    }
  }, []);

// useToasts.js
const removeToast = id => setToasts(toasts.filter(toast => toast.id !== id));

 

- 발견

removeToast함수에서 setToasts에 값이 아닌 함수를 전달하여 업데이트 해주었다.

   

const removeToast = id => setToasts(toasts => toasts.filter(toast => toast.id !== id));

 

- 배운점

setter함수에 값을 주면 다음 상태를 직접 전달하고  함수를 주면 보류 중인 상태를 가져와서 다음 상태를 업데이트 해주는  차이를 알게 되었다.

 

- 선언

useState에 setter`함수에 값을 전달해 줄 지 함수를 전달해 줄 지 잘 생각해 보아야겠다.

 

useState 또는 useRef 5개 사용하기

- 현상

toast의 정보를 가져오기 위해 5개의 Input요소의 값을 조정하기 위해 5개의 state를 사용하는 방법과 5개 ref를 사용하는 방법이 있었다. 하지만 두 가지 방법 모두 코드가 많아지고 복잡한 현상이 있었다.

   

- 발견

Form으로 감싸면 폼의 자식인 요소를 찾는 방법이 nativeEvent에서 제공된다.

 

- submit event가 발생한 submit button의 type 가져오기

(단, 각 button을 구별할 수 있는 id 같은 props를 미리 정해줘야 한다. )

 

type: e.nativeEvent.submitter.id

 

- input의 값 또는 체크 상태 가져오기

       

message: e.nativeEvent.target[4].value
autoClose: e.nativeEvent.target[6].checked

- 배운점

Form은 앞으로 사용할 일이 많을 텐데 새로운 기능을 알게 되었다. 

   

- 선언

Form 을 익숙하게 사용하고 아직 사용해보지 못한 기능들을 사용해보는 기회를 가져야겠다.