React | button에서 onClick 이벤트 핸들링

 

프로젝트에서 button을 클릭했을때 해당 url 주소로 넘어가기 위해 onClick 이벤트 핸들링을 했어야 했다. 처음에 사용했던 방식으로는 그냥 버튼을 클릭했을때 this.handleClick으로 해결하려 했으나 여러개의 버튼이 별개의 url로 이동하기 위해 state로 변경하였다. 

state, 즉 상태값을 따로 지정 해야 했는데 react에 익숙하지 않아 고생했다..

먼저 constructor에 state 정보를 저장한다.

constructor(props) {
    super(props);
    this.state = {
      Data: [
        {
          id: 1,
          company: "Apple Store",
          url:
            "url주소",
          src: "./img/apple__logo.png",
        },
        {
          id: 2,
          company: "Google Play",
          url: "url주소",
          src: "./img/google__logo.png",
        },
      ],
    };
  }

 

첫번째 데이터에는 Apple Store에 관한 정보 두번째 데이터 id에는 Google Play에 관한 정보를 저장해 두었다.

이제 버튼에 map을 이용해서 onClick에 파라미터로 item을 넘긴다.

{this.state.Data.map((item, index) => (
              <div className="down__button">
                <button
                  className="down__box__apple"
                  onClick={this.clickMe.bind(this, item)}
                >
                  <img src={item.src} className="down__logo" />
                  <div className="down__logo__title">{item.company}</div>
                </button>
              </div>
            ))}

 

this.state.Data.map을 통해 item 정보를 onClick에 넘기는데 clickMe를 새로 정의하였다. 그 외에도 {item.src}와 같이 state에 저장했던 정보들을 이용하여 Id 수만큼의 버튼을 생성할 수 있다. 

생성한 버튼 예시

 

 //다운로드 클릭시 url 접속
  clickMe(item) {
    window.open(item.url);
  }

 clickMe에는 window.open을 넣어 item.url을 넣어주어 해당 url로 연결 시키면 된다.