[React] 화살표 함수에 대한 고찰

리액트를 사용하다보면 props나 state에 항상 this 컨텍스트가 붙게된다. 예를 들어 this.props.propertyA, this.state.stateA 이런 식으로 사용된다.

 

만약 버튼의 click 이벤트 핸들러 함수를 지정하고 이벤트 핸들러 함수 안에서 props를 사용하기 위해서는 이벤트 핸들러 함수의 this를 부모 컴포넌트의 this로 지정해 주어야 한다.

class Control extends Component {
	<button onclick={function(event){
		event.preventDefault();
		this.props.onChangeMode('next mode');		
	}.bind(this)}>change mode</button>
}

 

예제 코드를 보면 이벤트 핸들러 함수의 this를 부모 컴포넌트의 this로 지정해 주기 위해 bind(this) 메서드를 호출하고 있다.

 

EcmaScript(=JavaScript) 6.0 버전 부터는 화살표 함수를 새로 정의하고 있다. 화살표 함수에는 여러가지 특징들이 있지만 자신만의 고유한 this 컨텍스트가 없고 부모의 this 컨텍스트를 받아서 사용한다. 리액트에서 익명 함수를 사용할 때 이 화살표 함수를 사용하면 매번 bind() 메서드를 호출해서 this 컨텍스트를 지정해 주어야 하는 번거로움을 피할 수 있다.

class Control extends Component {
	<button onclick={(event) => {
		event.preventDefault();
		this.props.onChangeMode('next mode');		
	}}>change mode</button>
}

 

bind() 메서드를 이용해서 명시적으로 this 컨텍스트를 지정해도 좋고, 화살표 함수를 사용해서 부모의 this 컨텍스트를 자동으로 상속받아도 좋다. 하지만 화살표 함수를 사용하면 bind() 메서드 호출을 잊어서 생기는 문제를 방지할 수 있을 것 같다.

 

■