React onClick에 함수 넘길 때의 매개변수 처리

Today, What I learned?

redux와 styled-components, react-router-dom을 이용해서 좀 더 업그레이드된 투두 리스트를 만드는 중!..

이전보다 컴포넌트를 좀 더 세분화 하다보니 버튼 컴포넌트도 분리하게 되었다.

문제는 버튼 컴포넌트에 전달되는 여러 함수들을 어떻게 실행시킬 것이냐!.. 였는데...

리액트에서 onClick 이벤트에 매개변수가 있는 함수를 어떻게 넘겨줄 것인지를 알게 된 과정을 정리해본다.

 

 

기존의 코드

type에 따라서 props로 받아온 다른 함수들을 실행시키도록 하고 싶었다.

저기까진 좋았는데, 기능이 추가됨에 따라 타입이 추가되다 보니 삼항 연산자로는 버거운 상황이 발생..

 

 

이게 최선일리가 없어

계속 이렇게? 줄줄이 소세지처럼? 간다고? 

이렇게 쓰는 것은 삼항 연산자를 쓰는 의미가 없다는 느낌과..

이건 좀 아니다는 생각이 들어서 함수를 분리하기로 결정...

 

 

 

수정한 코드

클릭시 type을 매개변수로 받아 type에 해당하는 함수를 리턴하는 onClickHandler를 만들어서 onClick 이벤트에 넣어주었다.

 

실행해보니?... 클릭도 하기 전에 무한 삭제 컨펌 창의 늪에 빠져버렸다.. 😇

확인을 눌러도 컨펌창이 계속 뜨며 서버를 종료해야 하는 슬픈 일이 발생했다. 

 

 

왜 이렇게 되었나요?

onClick 이벤트에 함수를 전달하면 onClick={handler()} 렌더링되는 시점에서 함수가 호출된다.

아래 같은 순서로 호출되는 것이다.

handler();
<button></button>

 

즉 이벤트 호출 시 동작하는 게 아니라 렌더링 되는 시점에서 호출하여 실행하기 때문에 컨펌 창이 뜨는 것!..
()없이 전달해야 함수 자체를 전달할 수 있는데, 이것은 아래와 같이 매개변수가 없을 때 사용하는 방식.

 <Input type="text" placeholder="제목" id="title" value={title} onChange={changeTitleHandler} />

 

JSX에서 이벤트 핸들러 함수를 작성하면 자동으로 이벤트 객체가 첫 번째 매개변수로 전달이 된다고 한다.
그래서 위와 같이 onChange에 아무 매개변수가 전달되지 않았어도, 아래처럼 이벤트 객체를 사용할 수 있다.

  const changeTitleHandler = (event) => {
    setTitle(event.target.value);
  };

 

그럼 매개변수는 어떻게 전달하냐!...
매개변수를 전달하기 위해서는 익명 함수로 감싸서 넣어주는 방법이 있다.
익명 함수가 실행되는 부분에서 전달한 함수를 호출해서 매개변수를 넘기는 방식이다.
그래서 최종 수정한 코드..

 

 

 

최종 수정한 코드

익명 함수로 따로 빼낸 함수를 전달해 주었더니 모든 기능 정상작동!~

 

 

 

이벤트 객체 외에 매개변수를 넘겨주려면 익명 함수를 써야 하는구나.. 를 깨닫게 되었다.

여차저차 새로운 투두리스트를 완성했으니 내일은 또 정리를 한번 해봐야겠다!!..