- Published on
✨ React 2022년 개정판 #6 이벤트
- 글쓴이
📌 목차

💁🏻
- 수업 소개
- 실습 환경 구축
- 소스코드 수정방법
- 컴포넌트 만들기
- props
- 이벤트
- state
- Create
- Update
- Delete & 수업을 마치며
이벤트
html
태그 - onClick
<input type="button" onClick="alert('hi')">
위의 태그는 사용자가 버튼을 클릭했을 때 hi라고 경고창을 띄울 수 있는 태그
이벤트 기능
컴포넌트에서 어떤 일이 발생했을 때
사용자가 추가적인 어떤 작업을 처리할 수 있도록 하는 기능
- 헤더 컴포넌트에 이벤트 기능 넣기
- onChangeMode라고 하는 prop 값으로 함수를 전달
=> 컴포넌트 안에서 링크를 클릭하면 컴포넌트가 이 함수를 호출해서
헤더를 클릭했을 때 해야 되는 작업들이 실행되게 하기.
ex)헤더라고 하는 경고창이 뜨게 하기
return <header>
<h1><a href="/" onClick={(event)=>{
event.preventDefault();
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
a
태그에 onClick
이벤트 걸기
1.1 a
태그는 순수한 html
과 똑같지 않다. = 유사 html
유사 html이기 때문에 리액트가(리액트 개발 환경) 이걸 최종적으로 브라우저가 이해할 수 있는
html
로 컨버팅 해주므로 html
문법과 100% 일치하지 않는다.
onClick={}
/ 안에 함수 쓰기
return <header>
<h1><a href="/" onClick={function(event){
}}>{props.title}</a></h1>
</header>
}
a
태그를 클릭했을 때 안의 함수가 호출된다.
콜백 함수로 들어간 함수가 호출될 때 리액트는 이벤트 객체를 첫 번째 파라미터로 주입해줌.
- 이벤트 객체와
event.preventDefault
이벤트 객체는 이 이벤트 상황을 제어할 수 있는 여러 가지 정보와 기능이 들어가 있는데
event.preventDefault
를 하게 되면 a
태그가 동작하는 기본 동작을 방지한다.
만약 a 태그를 클릭했을 때 페이지 리로드가 일어나지 않게 하기 위해서는
이벤트 객체에 preventDefault를 쓴다.
a
태그의 기본 동작: 클릭했을 때 href에 연결된 페이지로 리로드
=> a
태그를 방지하면 클릭해도 리로드가 일어나지 않게 된다.
onClick의 함수가 호출됐을 때
head의 props로 전달된 onChangeMode가 가리키는 이 함수를 호출.
return <header>
<h1><a href="/" onClick={function(event){
event.preventDefault();
props.onChangeMode(); =>이 부분에서 함수를 호출하므로 ()를 붙인다.
}}>{props.title}</a></h1>
</header>
}
위의 코드는 컴포넌트에 이벤트 기능을 부여해서 컴포넌트 사용자가 헤더를 클릭했을 때
해야 될 작업을 정의할 수 있도록 처리해 준 것.
1.2 function 축약 -> arrow function으로 교체
return <header>
<h1><a href="/" onClick={(event)=>{ => 이부분
event.preventDefault();
props.onChangeMode();
}}>{props.title}</a></h1>
</header>
}
2.css
를 클릭하면 경고창에 2가 뜨고
3.javascript
를 클릭하면 경고창에 3이 뜨게 만들기
2.1 내비게이션을 클릭했을 때 nav 컴포넌트도 onChangeMode함수의 props를 갖는다.
<Nav topics={topics} onChangeMode={()=>{}}</Nav>
props는 함수를 전달하는데 이 함수의 첫 번째 파라미터로 id
값이 오게하고
함수가 호출될 때 그 id
값이 경고창으로 뜨게 한다.
nav 태그에서 a
태그를 클릭했을 때 이벤트가 발생하게 만들어야한다.
<a href={'/read/'+t.id} onClick={event=>{}}>{t.title}</a>
이렇게 파라미터(event)가 하나인 경우에는 괄호를 생략해도 상관없다.
그다음에 이 nav의 onChangeMode를 호출.
onChangeMode는 id
값을 필요로 하기 때문에 이 함수를 호출할 때 id
값을 주입해야 되는데
그 id
값을 얻어내는 가장 쉬운 방법은 id
값을 부여해주는 것이다.
함수 안에서 이 이벤트 함수 안에서 a
태그의 id
속성을 얻어내려면 이벤트 객체를 사용한다.
이벤트 객체가 갖고 있는 타겟이라고 하면 그 이벤트를 유발시킨 태그를 가리키고 여기서는 a
태그를 가리킨다.
그 a
태그가 가지고 있는 id
값을 가져오고 싶다면 뒤에다가 id
라고 붙여준다.
function Nav(props){
const lis = []
for(let i=0; i<props.topics.length; i++){
let t = props.topics[i];
lis.push(<li key={t.id}>
<a id={t.id} href={'/read/'+t.id} onClick={event=>{
event.preventDefault();
props.onChangeMode(event.target.id);
}}>{t.title}</a>
</li>)
}
return <nav>
<ol>
{lis}
</ol>
</nav>
}
목록 안에서 링크를 설치하는 법과
링크가 이벤트를 호출할 때 어떠한 입력 값을 주는 방법도 배웠다.!