리액트(ReactJS) 컴포넌트 이벤트 생성하기

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻

 

여러가지 컴포넌트 이벤트 중, 목차의 요소를 클릭하면 해당 요소의 내용을 출력하는 이벤트를 만들어볼 것이다. e.target 속성과 bind 두 가지 방식을 사용해서 구현해 볼 것이다.

 

e.target 속성 이용

// App.js 파일 내 목차 구현 부분만 명시
return (
   <div className="App">
     ...
     <NAV onChangePage={function(id){   // 매개변수 id의 값은 e.target.dataset.id의 값이 담김
        this.setState({
           mode:"read",
           selected_content_id:Number(id)  // id의 값을 숫자로 변환
        });
     }.bind(this)}>
     ...
     </NAV>
     ...
   </div>
);


// NAV.js 
// 실제 목차 로직 컴포넌트
<li key={data[i].id}>
  <a href={"/content"+data[i].id} 
  data-id={data[i].id}   // 이벤트 값 (e.target.dataset.id) 세팅을 위해 데이터 속성 설정
  onClick={function(e){
    this.props.onChangePage(e.target.dataset.id);   // 위에서 세팅한 data-id 값 가져옴
  }.bind(this)}
  >
  </a>
</li>

 

 

바인드(bind) 이용

// App.js 파일 내 목차 구현 부분만 명시
return (
   <div className="App">
     ...
     <NAV onChangePage={function(id){   // 매개변수 id의 값은 e.target.dataset.id의 값이 담김
        this.setState({
           mode:"read",
           selected_content_id:Number(id)  // id의 값을 숫자로 변환
        });
     }.bind(this)}>
     ...
     </NAV>
     ...
   </div>
);


// NAV.js 
// 실제 목차 로직 컴포넌트
<li key={data[i].id}>
  <a href={"/content"+data[i].id} 
  // bind의 두번째 인자로 들어온 data[i].id 값을 함수의 첫 번째 매개변수의 값으로 넣어준다.
  onClick={function(id, e){
    this.props.onChangePage(e.target.dataset.id);
    }.bind(this, data[i].id)}> 
  </a>
</li>