이벤트2 [TIL] (22.08.10.) React 버튼 onClick 이벤트 처리 상황 리액트 프로젝트에서 비슷한 기능을 수행하는 두 개의 버튼을 만들었다. 해당 버튼들에 onClick 이벤트로 모달창을 띄우도록 isModalOpen 값을 변경해주는 함수를 적용하고자 한다. 그리고 클릭한 버튼이 무엇인지에 따라 Modal 컴포넌트에 다른 children 을 주어 Modal 내에 다른 내용이 띄워지도록 처리하고 싶었다. 기존 코드는 이런 식이었다. 고민지점 문제는 특정한 버튼을 클릭할 때, 이 버튼이 어떤 버튼인지에 따라 Modal 의 children 에 들어가야 하는 값이 달라져야 하는데, 그걸 어떻게 해야할지 모르겠다는 점이다. 적용 일단은 하드코딩 느낌이 있지만, 버튼 별로 띄워주고자 하는 Modal 이 다른 거라고 생각했고, 각 버튼에 변경해줘야 하는 모달 상태를 따로 설정하고,.. 2022. 8. 10. [JavaScript] 이벤트 (1) - 이벤트(event)의 개념과 사용법 요약 1. 이벤트는 우리가 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)이다. 2. 이벤트가 발생되면 실행되는 코드 블럭을 이벤트 핸들러 또는 이벤트 리스너라고 하며, 이 코드블럭이 이벤트에 응답해서 실행하도록 정의하는 것을 이벤트 핸들러를 등록 했다고 표현한다. 3. 웹 이벤트를 사용하는 방법은 3 가지가 있다. 1) 이벤트 핸들러 프로퍼티 2) 인라인 이벤트 핸들러 (사용 권장x) - html 태그에 이벤트 핸들러(자바스크립트 코드) 가 직접 기술된다는 점이 단점이다. - html 은 정보를 표현하기 위한 수단. 제어와 관련된 것은 javascript 로 분리시키는 것이 좋다. 3) addEventListener() removeEventListener() .. 2022. 6. 14. 이전 1 다음
