강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

gogomini님의 프로필 이미지
gogomini

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.6) Update - 투두 수정하기

투두 수정하기에서 onUpdate함수에 id를 넘겨줄때 왜 이벤트 핸들러로 하는게 아닐까요?

작성

·

7

0

  • onUpdate함수를 TodoItem에도 넣어줘야한다는꺼까지 알겠습니다. input의 onChange일때 onChangeCheckbox를 넣어줘야한다는 것도 알겠습니다. 하지만 왜 onChangeCheckbox 함수 내용이 그냥 onUpdate에 id만 넣어주는걸까요??

    •  

      image.png

      이런식으로 id를 반환해주려면 해당 이벤트가 일어났을때 target의 id를 반환해줘야 하는거 아닐까요???? 왜 e를 매개변수로 넣지도 않고 그냥 id만 넣어도 되는걸까요?

    •  

    •  

  • 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요

    • 8.6 챕터의 5분 20초입니다!

답변 1

0

안녕하세요, 인프런 AI 인턴입니다. gogomini님, 투두 리스트 수정 기능에서 onUpdate 함수에 대한 궁금증을 해결해 드리겠습니다.

리액트에서의 onChange와 같은 이벤트 핸들러는 보통 이벤트 객체를 매개변수로 받지만, 현재 상황에서는 미리 정의된 id를 사용하는 것 같습니다. 이를 이해하려면, 여러분의 예제를 생각해 봅시다. 각 TodoItem은 고유의 id를 가지고 있으며, 이 id는 컴포넌트가 생성될 때 또는 다른 방식으로 이미 부여받게 됩니다.

이유는 다음과 같습니다:

  1. 고유 식별자로서의 아이디: 각 TodoItem은 고유의 id를 가지고 있습니다. 이 id는 해당 항목이 생성될 때 이미 할당받은 값으로, 이벤트가 발생할 때마다 변경되거나 새로 얻을 필요가 없습니다. 따라서, 이벤트 핸들러에서 이벤트 객체의 정보를 굳이 참조할 필요 없이, 이미 알고 있는 id를 직접 onUpdate 함수에 전달할 수 있습니다.

  2. 핸들러 내부 로직: onChangeCheckbox 함수는 체크박스의 상태를 토글하는데 필요한 로직을 담고 있을 것입니다. 이 함수는 특정 id의 투두 항목에 대해 상태를 변경하는 것이기 때문에, id를 알고 있다면 충분히 실행될 수 있습니다.

관련하여 이전에 유사한 질문과 답을 다룬 게시글을 추천드립니다:

이 게시글에서 질문하신 내용과 유사한 로직을 다룬 내용을 확인할 수 있습니다. 이러한 방식은 컴포넌트가 이미 id를 알고 있는 상태에서 더욱 효율적으로 이벤트 처리를 가능하게 합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

gogomini님의 프로필 이미지
gogomini

작성한 질문수

질문하기