공식문서를 기반으로 작성되었습니다.
ko.reactjs.org/docs/faq-functions.html
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번을 사용하는 것을 더 선호하기도 한다.
'개발 > FrontEnd Interview' 카테고리의 다른 글
[React] Hook이란 무엇이고 왜 나오게 되었나요? (1) | 2021.04.19 |
---|---|
[React] 함수 컴포넌트를 사용하는 이유 (0) | 2021.04.19 |
Chrome console.log 텍스트에 color 를 적용하는 법 (0) | 2021.04.13 |
굳이 requestAnimationFrames를 사용하는 이유는? (0) | 2021.04.11 |
Promise.all, Promise.race 차이는? (0) | 2021.04.09 |