Repository navigation
14. 배열에 항목 제거하기 · GitBook #62
Description
Activity
onClick={() => onRemove(user.id)} 이 코드는 잘 동작하는데
onClick={onRemove(user.id)} 이 코드는 왜 동작하지 않는건가요?
혹시 아시는 분 계시면 알려주시면 감사하겠습니다.jsx 외부에서 정의되어진 event hander나 callback로 parameter를 pass할 때 arrow function을 씁니다.
현재의 User component에서 onRemove와 함께 id를 pass하여, UserList component를 통하고, App component에서 정의된 onRemove까지 id를 pass 하고 있는 것을 볼 수 있습니다.
@taeheonha1 답변 감사합니다. 그렇다면 CreateUser.js에서 onChange={onChange}가 가능한 이유는 parameter가 없어서 그런건가요?
왜 parameter가 있을땐 arrow function을 써야하는건가요? 이건 리액트에서 그렇게 제공하기 때문인걸까요@harrdas 님
onClick={onRemove(user.id)} 로 하면 바로 실행되어 버립니다.아래분 질문 답 드릴게요.
질문 ------
onClick={() => onRemove(user.id)} 이 코드는 잘 동작하는데
onClick={onRemove(user.id)} 이 코드는 왜 동작하지 않는건가요?답변 ---
onClick={someFunction()} 을 해버리면 해당 콤포넌트가 렌더링이 되는것과 동시에 someFunction함수를 실행시켜버립니다.그래서 보통 onClick={someFunction} 으로 지정해서 () 를 제외하는 방법으로 함수가 즉시실행 되지 않게 하고, 클릭했을때 실행이 되도록 해주죠
그런데 예제와 같이 onRemove의 경우, 해당 함수가 실행될 떄 아이디 값도 받아와야 하잖아요.
이런 경우에 onClick = { onRemove(user.id) } 를 해버리면, 해당 콤포넌트가 렌더링됨가 동시에 이 함수 실행이 되어버려서 아마 아무것도 렌더링이 되어버리지 않을거에요. 콘솔에서도 오류메시지가 발생할거구요.따라서 이런 문제들을 해결하기 위해 onClick에 콜백 함수를 넣어주고, 해당 함수가 실행될 때 user.id를 건네주어 실행시키는 방법으로 처리를 하는거에요
Reacted by Dok6n, ratta.j(라따/PX), devbelly, SiyoonKim, Yoooda, kim yong hee, guinness, min-gyu Kwak, Polarisiota, Hayoung Park and 8 moreReacted by Dok6n, ratta.j(라따/PX), guinness, kim yong hee, bboyooning, jiyun, Serin Kim , KangWoosung, ... and hanson1005hoon님만 제대로 자세하게 답변해주셨네요 자세하면서도 왜 그런지 정확하게 답변해주심 .. 감사합니다..
배열에서 요소 지우기
- filter를 사용하여 false 인 값만 담는다.
- 태그에서 변수를 전달하고 싶을땐 아래와 같이 작성한다.
<button onClick={() => onRemove(param)}>
복습
- input에서 onCick의 event 객체의 경우 위와 같이 변수로 전달해줄 필요 없다. (class형에서는 어떻게 동작할지 알아봐야한다.)
감사합니다!!!
잘봤습니다~
onClick={() => onRemove(user.id)} === onClick={function () {onRemove(user.id)}
14. 배열에 항목 제거하기 · GitBook
https://react.vlpt.us/basic/14-array-remove.html