오늘 새로 알게된 내용 정리

type과 interface

참고글

• TypeScript에서 Type을 기술하는 두 가지 방법, Interface와 Type Alias

onChange에서 e 이외에 parameter를 받는 방법

<InputTextStyle
  placeholder="포지션"
  value={position}
  onChange={positionChangeHandler.bind(null, index)}
/>

input의 텍스트가 변경될때 발생하는 onChange 이벤트에서 prameter로 e 객체를 가져올수 있다. prameter로 다른 것도 받고 싶어서 위와같이 작성해보았다.

const positionChangeHandler = useCallback(
  (e, index) => {
    const { text } = e.nativeEvent;
    setPositionList(
      produce(draft => {
        draft[index].position = text;
      }),
    );
  },
  [positionList],
);

positionChangeHandler 함수를 이렇게 생겼다. 나는 당연히 e 객체를 기본값으로 제공해주니 다른 parameter를 받으려면 e 뒤에 넣어줘야한다고 생각해서 e뒤에 내가 받고싶은 parameter를 넣어주었는데 index를 콘솔에 찍어보니 undefined가 나온다.. 구글에 검색해보니 이벤트인자(e)보다 먼저 넣어줘야 한다고 나와있다.

아래와같이 e보다 앞에 적어주니 index를 가져온다..! 와우..!

const positionChangeHandler = useCallback(
  (index, e) => {
    const { text } = e.nativeEvent;
    setPositionList(
      produce(draft => {
        draft[index].position = text;
      }),
    );
  },
  [positionList],
);

참고글

https://stackoverflow.com/questions/29099610/how-to-pass-multiple-parameters-to-inputs-onchange-handler

useState에서 immer 사용하기

immer 사용 참고글

https://react.vlpt.us/basic/23-immer.html

immer 사용중 에러 [Error: An immer producer returned a new value and modified its draft. Either return a new value or modify the draft]

immer 라이브러리를 사용해 state를 관리하던중에 에러가 발생하였다.

아래와 같이 코드를 작성해주었더니..

setTagList(produce(draft => draft.push(text)));

이런 에러를 만나게되었다. 에러 문구를 구글에 검색해보았더니 운좋게도 바로 이유를 알 수 있었다..!!!!

괄호가없는 화살표 함수는 return 문으로 작동하기 때문이다.

immer의 produce 함수는 아무것도 return하지 않는 void 타입의 함수인데

괄호가없는 화살표 함수는 return을 적어주지 않아도 return기능을 실행하기 때문에 에러가 난것이다.

그래서 아래처럼 코드를 수정해주었다.

setTagList(
  produce(draft => {
    draft.push(text);
  }),
);

참고글

https://stackoverflow.com/questions/60806105/error-an-immer-producer-returned-a-new-value-and-modified-its-draft-either-r