bind 함수와 setState 함수 이해하기

오늘 강의는 bind 함수와 setState 함수 이해하기에 대해 다뤘다.

 

1. bind()

bind, 묶어준다 라는 뜻.

render()라는 함수가 호출될 때, this는 그 컴포넌트 자신을 가리킨다.

 

 위는 콘솔에서 테스트를 한 것이다.

우선, obj라는 변수를 만들어서 특정 값을 준다. 

그리고 나서 bindTest()라는 함수를 만들게 되는데, 이 함수에서 this.name을 출력하게 하고 싶다.

그러나 여기서 this라는 객체가 무엇인지는 정의가 전혀 되어있지 않다. 이렇게 했을 때 undefined가 뜨는 것은 당연하다. 이 this가 특정 개체를 가리키게 하고, 이 obj값의 name을 출력하게 하고 싶다면, this가 무엇인지를 설정하게 해줘야 한다.

 

그래서 위와 같이 bindTest의 함수에 bind 함수를 사용해서 이 bindTest안에 있는 this가 obj를 가리키게 해주게끔 설정을 해준다. 이것이 bing 함수의 역할이다. 

 

위와 같이 설정을 해준다음에 bindTest2() 함수를 호출하면 원하는 값이 나오는 것을 볼 수 있다.

 

2. setState()

 

일반적으로 state를 가져다가 사용할 때에는 위와 같은 코드를 사용해서 state를 설정해줘도 무관하다. 

하지만 동적인 페이지를 만들 경우에는 일반 state를 설정해주는 것으로 바꾸면 안된다.

 

this.state.mode로 설정을 해주면, 페이지 내에서 분석을 해 보면 state 값이 원하는 값으로 바뀌어 있는 것을 확인할 수 있지만, 정작 홈페이지 내의 내용은 변함이 없다. 이것은 이 방법을 사용해버리면 리액트가 모르도록 바꿔버리는 격이 되어버리는 것이다. 그래서, state 값을 바꿀 때에는 setState 함수를 써야 하는 것이다.

 

값을 명시적으로 바꾼다고 리액트에게 알려주면, 페이지에 바뀐 값이 보이게 되면서 동적인 페이지를 만들 수 있게 되는 것이다.