[React] onClick 이벤트 생성
만들고 싶은 이벤트는
1.h1
태그 안의 단어를 클릭했을 때 (onClick/preventDefault)
2. mode가 welcome으로 변경되면서 (bind/setState)
3. content의 내용이 변경되는 이벤트 (이건 적지 않았다.)
1. onClick 이벤트
일단, 이벤트가 실행되어야 하는 a태그안에 onClick 속성을 넣어준다. 이때, jsx에서는onClick
을 camelcase로 적어야 함을 주의하자. 또한, 속성값은 ""
가 아닌 {}
안에 넣어주어야함도 확인! 더불어, onClick
되었을 때 작동할 내용을 적어주기 위해 함수까지 넣어주었다.
<header>
<h1><a href="/" onClick={function () {
//작동할 함수내용
}}>{this.state.subject.title}</a></h1>
{this.state.subject.sub}
</header>
2. preventDefault()
a태그가 들어있는 h1을 클릭하면 href링크로 페이지가 이동하게 되는데, 이번 이벤트에서는 페이지 이동이 아니라 클릭시 content내용을 변경시킬 것이기 때문에,e.preventDefault()
를 사용하여 클릭해도 페이지가 이동되지 않도록 할 수 있다.
<header>
<h1><a href="/" onClick={function (e) {
e.preventDefault();
}}>{this.state.subject.title}</a></h1>
{this.state.subject.sub}
</header>
3. bind()
a태그를 클릭하면 stat에 초기화 시켜준 mode값이 welcome
으로 변경되어야 함으로, this.state.mode = 'welcome';
을 적어 주었다. 그런데, 여기까지하면 오류가 난다.😅
이유를 찾기위해 render함수안에서 console.log(this)
를 찍어보면 상위 컴포넌트 전체를 가르키지만, 지금 만들고 있는 이벤트 함수 안에서 console.log(this)
를 찍으면 undefined
가 뜬다는 것을 확인할 수 있다. 이럴때, .bind(this)
를 함수 마지막에 적어주면 다시 this가 상위 컴포넌트 모두를 가르키게 된다. 그 이유는 차차 다시 알아가는것으로...🤔
<header>
<h1><a href="/" onClick={function (e) {
e.preventDefault();
this.state.mode = 'welcome';
}.bind(this)}>
{this.state.subject.title}</a></h1>
{this.state.subject.sub}
</header>
4. setState()
그런데도 오류가 뜬다? 그 이유는, 이벤트 함수안에서 this.state.mode = 'welcome';
를 적어주었지만 react는 이걸 인식 못한다..컴포넌트 생성 이후 동적으로 state값을 변경해주려면, this.setState({mode:'welcome'})
을 사용하여 state가 변경되었음을 알려주어야 한다!!👊🏻
<header>
<h1><a href="/" onClick={function (e) {
e.preventDefault();
this.state.mode = 'welcome';
this.setState({
mode: 'welcome'
});
}.bind(this)}>
{this.state.subject.title}</a></h1>
{this.state.subject.sub}
</header>
그럼, react로 만든 첫 이벤트 완성 👻
5. 사실 이렇게 만들고 싶었던것이다.
위에서 만든 이벤트는 Subject컴포넌안에 담겼던 아이들을 App.js로 다 꺼내와서 만들었다. 이벤트 생성이 처음이기때문에 값을 다 펼쳐놓고 만듯것. 그런데 결국 state를 사용한 컴포넌트 안에서 이벤트를 만들어야 하므로, App.js에서 onChancgePage이벤트를 만들고 그안에 state가 변경되도록 함수를 만들어 주었다. 그리고 Subject.js에서 그 이벤트를 props로 불러오도록 만듬 ! 끄읕 !!!👻💕
//App.js
<div className="App">
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}
onChangePage={function () { //이벤트 설정
this.setState({ mode: 'welcome' }); //state변경
}.bind(this)}
>
</Subject>
//Subject.js
<header>
<h1><a href="/" onClick={function (e) {
e.preventDefault(); //이벤트 생성 막기
this.props.onChangePage(); // 함수호출
}.bind(this)}>{this.props.title}</a></h1>
{this.props.sub}
</header>
Author And Source
이 문제에 관하여([React] onClick 이벤트 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dev_cecy/React-onClick-이벤트-생성저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)