[TIL 36] React | 콜백 함수 실행 시 파라미터 전달하기 (pass parameters)

리액트 내에서 함수에 파라미터를 전달하는 방법에 대해 포스팅하고자 한다.

화살표 함수

onClick={() => likeComment(id)}

익명의 화살표 함수를 사용하는 방법. 함수가 호출될 때 마다 새로운 익명 함수가 생성되고 호출되므로 단점이 될 수 있지만 성능의 차이는 크지 않다.

bind

onClick={likeComment.bind(this, id)}

첫 인자에 this, null 등을 추가하고 두 번째 인자에 원하는 값을 전달하는 방법.

prop의 data 사용

<i className={'xi-heart' + (isLiked ? ' likeComment' : '-o') + ' likeHeart pointer'}
  data-id={id}
  onClick={likeComment}></i>

태그 요소에 data-id라는 이름으로 props를 지정해주고,

  likeComment = (e) => {
    const { commentArr } = this.state;
    const id = e.target.getAttribute('data-id');
    this.setState(() =>
      commentArr[id - 1].isLiked = (!commentArr[id - 1].isLiked)
    );
  }

onClick함수에서 e를 받아 e.target.getAttribute로 data-id에 접근하는 방법.