[React 리액트] bind() 함수 이해하기 (개념 및 사용법)

React 리액트에서 bind() 함수 이해하기 (개념 및 사용법)

 

기본적으로 리액트에서는 render라는 함수 안에서 this는 컴포넌트 자체를 가리키는데 함수에서는 this가 아무값도 없습니다. 

 

이때 bind() 함수를 사용하여 this를 주입하여 주는 겁니다.

 

 

# bind 함수 이해하기

 

먼저 var obj = {name : 'Moony'}; 로 obj의 값에 담아놓고 bindTest() 함수로 인해 this.name 값을 출력 시 undefined 이라고 뜨게 됩니다.

 

이때 bindTest() 메서드가 this가 obj로 바인드 시켜주어 this.name이 'Moony'값을 가져올 수 있게 만들어 주는 것입니다.

 

 

 

자 이제 그럼 obj가 function의 this가 되게 bind() 함수를 사용하여 바인딩 해줘 봅시다!

 

var bindTest2 = bindTest.bind(obj);

기존에 만들어놓은 bindTest 함수를 .bind(obj)를 통해 함수의 this가 obj를 가리키도록 해줍니다.

 

바인딩 이후 bindTest2(); 호출 시 해당 함수의 this는 obj를 가리키도록 설정하였기 때문에 this.name의 값을 가져와서 'Moony'의 값이 console.log에 찍힌 것을 볼 수 있습니다.

 

 

 

# 리액트 바인드 활용한 이벤트 함수 처리

 

2021.03.29 - [Web/React 리액트] - [React 리액트] React에서 이벤트 처리 - 정리 및 예제 (onClick, priventDefault, bind, setState 등)

 

 

리액트 글 모두 보러 가기

devmoony.tistory.com/category/Web/React%20%EB%A6%AC%EC%95%A1%ED%8A%B8

'Web/React 리액트' 카테고리의 글 목록