14. 배열에 항목 제거하기 · GitBook

[utterances-bot]

14. 배열에 항목 제거하기 · GitBook

https://react.vlpt.us/basic/14-array-remove.html

[harrdas]

onClick={() => onRemove(user.id)} 이 코드는 잘 동작하는데 onClick={onRemove(user.id)} 이 코드는 왜 동작하지 않는건가요? 혹시 아시는 분 계시면 알려주시면 감사하겠습니다.

[taeheonha1]

jsx 외부에서 정의되어진 event hander나 callback로 parameter를 pass할 때 arrow function을 씁니다.

https://reactjs.org/docs/faq-functions.html#how-do-i-pass-an-event-handler-like-onclick-to-a-component

현재의 User component에서 onRemove와 함께 id를 pass하여, UserList component를 통하고, App component에서 정의된 onRemove까지 id를 pass 하고 있는 것을 볼 수 있습니다.

[harrdas]

@taeheonha1 답변 감사합니다. 그렇다면 CreateUser.js에서 onChange={onChange}가 가능한 이유는 parameter가 없어서 그런건가요? 왜 parameter가 있을땐 arrow function을 써야하는건가요? 이건 리액트에서 그렇게 제공하기 때문인걸까요

[lacomparte]

@harrdas 님 onClick={onRemove(user.id)} 로 하면 바로 실행되어 버립니다.

[ghost]

parameter 가 있을때 arrow function 을 사용해야 하는게 아니라 그냥 함수를 사용해야 하는데 arrow function 이 간결해서 사용하는 것으로 생각이 됩니다. onClick={ onRemove(user.id) } 는 함수를 호출하는 것이고, onChange={ onChange } 에서 onChange 는 함수가 들어있는 변수입니다.

[1005hoon]

아래분 질문 답 드릴게요.

질문 ------ onClick={() => onRemove(user.id)} 이 코드는 잘 동작하는데 onClick={onRemove(user.id)} 이 코드는 왜 동작하지 않는건가요?

답변 --- onClick={someFunction()} 을 해버리면 해당 콤포넌트가 렌더링이 되는것과 동시에 someFunction함수를 실행시켜버립니다.

그래서 보통 onClick={someFunction} 으로 지정해서 () 를 제외하는 방법으로 함수가 즉시실행 되지 않게 하고, 클릭했을때 실행이 되도록 해주죠

그런데 예제와 같이 onRemove의 경우, 해당 함수가 실행될 떄 아이디 값도 받아와야 하잖아요. 이런 경우에 onClick = { onRemove(user.id) } 를 해버리면, 해당 콤포넌트가 렌더링됨가 동시에 이 함수 실행이 되어버려서 아마 아무것도 렌더링이 되어버리지 않을거에요. 콘솔에서도 오류메시지가 발생할거구요.

따라서 이런 문제들을 해결하기 위해 onClick에 콜백 함수를 넣어주고, 해당 함수가 실행될 때 user.id를 건네주어 실행시키는 방법으로 처리를 하는거에요

[DoK6n]

1005hoon님만 제대로 자세하게 답변해주셨네요 자세하면서도 왜 그런지 정확하게 답변해주심 .. 감사합니다..

[wenodev]

배열에서 요소 지우기

• filter를 사용하여 false 인 값만 담는다.
• 태그에서 변수를 전달하고 싶을땐 아래와 같이 작성한다.

  <button onClick={() => onRemove(param)}>

복습

• input에서 onCick의 event 객체의 경우 위와 같이 변수로 전달해줄 필요 없다. (class형에서는 어떻게 동작할지 알아봐야한다.)

[jody96]

감사합니다!!!

[jwu-ice]

잘봤습니다~

[JustJOSU]

@1005hoon 덕분에 onRemove는 왜 arrow function을 사용하게 됐는지 아주 잘 이해됐습니다. 정말 감사합니다!!!

[1wooseok]

onClick={() => onRemove(user.id)} === onClick={function () {onRemove(user.id)}