우선 Subject라는 컴포넌트를 풀어해치고 그 내용을 App에 도입시켜서 이벤트를 구현해보도록 하겠습니다.
1. 소스코드 해체하기
다음과 같이 props 형태로 잘 정리된 Subject 컴포넌트를 주석 처리를 하고,
그 밑에 Subject.js파일에 있는 소스코드를 그대로 들고와서 복사 붙혀넣기 했습니다.
2. state형식으로 수정 후 이벤트 처리해주기
이때 props형태인 소스코드를 state형식으로 바꿔줍니다.
header라는 태그로 이벤트 처리를 다 하고, 다시 Subject 컴포넌트로 패키징을 해주는작업을 해줄겁니다.
이렇게 저장하고 실행을 하면 경고창이 잘 나옵니다. 하지만, 경고창에 확인을 누르면 화면이 다시 reload가 되는데, react는 reload시키지 않고도 역동적인 사이트를 만들 수 있게 됩니다.
여기서 알아야할것은 a태그에 href는 해당 페이지로 이동한다는 기본적으로 동작 속성이 있습니다. 이러한 동작 속성을 하지 못하게 만들면 되는것입니다.
3. debugger
onClick이벤트로 인해서 함수가 호출이 될때, 함수의 첫번째 파라미터 값으로 이벤트라는 객체를 주입해주기로 약속 했습니다. 매개변수 입력후, debugger를 입력해주면 debugger라고 해당되는 부분에서 실행을 멈추게 됩니다.
이때 크롬브라우저에서 F12를 누른후, Sources 부분에 가보면 여러가지 정보를 보기 쉽게 정리가 되어있는걸 보실 수 있습니다.
이러한 방법이 아닌 이벤트 방식으로 다르게 해볼겁니다.
4. preventDefault
이번에는 받아온 매개변수를 아애 이벤트처리하는데에 있어서 막아버리게 하는 방법입니다.
이것은 기본적으로 태그가 가지고 있는 기본적인 동작방법을 못하게 할때 사용하는 방법입니다.
'React > 이벤트' 카테고리의 다른 글
| 이벤트에서 state 변경하기(bind, setState) (0) | 2021.02.08 |
|---|---|
| 이벤트 state props 그리고 render 함수 (0) | 2021.02.05 |