본문 바로가기

개발/react 생태계

this.function()와 this.function의 차이

반응형

cra(create-react-app)에서 개발시 api life cycle이외에 개별 함수를 만들때가 있습니다.

class function extends Component {

	function() {
    	console.log()
    }
    
    
	render () {
    	return(
        	<div>hi<div/>
        );
    }
}

 

그리고  사용시 this.function을 이용하는데요 . (이때 this는 이 객체를 의미하고, 위 예제에서는 function을 의미합니다)

this.function으로도 함수 실행과 전달?의 개념을 응용할수 있습니다.

 

 

 

//a
console.log("aa")

//b
() => {
	console.log("bb")
}

위에서 a와 b경우의 차이는 무엇일까요?

 

a는 console.log("aa")를 바로 실행하지만 b는 console.log("bb")가 담긴 함수를 정의합니다. b는 주로 callback함수나 함수 정의시 사용됩니다.

 

 

이와 마찬가지로  this.function에도  this.function과  this.function()이있습니다.

class function extends Component {

	function() {
    	console.log("a")
    }
    
    
	render () {
    
    	this.function()  ==> console.log("a") 실행
        this.function  ==> () => {console.log("a") }와 유사
        
        
    	return(
        	<div>hi<div/>
        );
    }
}

 

요약:

this.function은 함수 전달?, this.function()은 실행을 의미합니다.

 

이상입니다!