[React] 컴포넌트에 함수를 전달하는 법

공식문서를 기반으로 작성되었습니다.

ko.reactjs.org/docs/faq-functions.html

컴포넌트에 함수 전달하기 – React

 

react를 통해 컴포넌트를 구성하다보면, 하위 컴포넌트에게 onClick같은 메소드를 넘겨줘야할 일이 있다.

 

그리고 높은 확률로 그 함수는 상위 컴포넌트의 this를 사용하고 있는 경우가 많기 때문에, .bind(this)로 this를 바꾸어주어야한다.

 

그에 대한 방법은 3가지가 존재한다.

 

1. 클래스 프로퍼티 

class Foo extends Component {
  // 주의: 이 문법은 실험단계이며 아직 표준이 아닙니다.
  handleClick = () => {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

우리가 원하는 동작을 수행한다. 하지만, class에 메소드로 arrow function을 사용하는 것은 권장되지 않는 방법이다.

https://simsimjae.tistory.com/452

 

 

2. render 메소드 안에서 바인딩하기

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
  }
}

이 코드도 동작은 한다. 그리고 우리가 가장 많이 사용할 것 같은 코드이기도 하다.

공식 문서에 따르면, Function.prototype.bind를 render 메소드에서 사용하면 컴포넌트가 렌더링할 때마다 새로운 함수를 생성하기 때문에 성능에 영향을 줄 수 있다고 한다.

 

3. render 메소드 안에서 화살표 함수 사용

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

2와 이유가 같다.

 

4. 생성자에서 바인딩하기

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

사실 결론은 나왔다. 결론은 생성자에 bind를 해주고, 그 메서드 자체를 전달하는 것이 효율적이다! 

하지만 react에서는 1번을 사용하는 것을 더 선호하기도 한다.