이벤트 함수에서 state 변경(Study)

아래의 a태그를 보겠습니다.

            <a
              href="/"
              onClick={function (e) {
                e.preventDefault();
                this.setState({ mode: "read" });
              }.bind(this)}
            >
              {this.state.subject.title}
            </a>

a태그에는 onClick 속성에
this.setState()가 추가되었고,
mode state에 값을 "read"로 바꿉니다.

a태그 클릭 시

이렇게...하단의 콘텐츠 부분이 바뀌었습니다.

onClick 속성 함수 내부의 정의된 익명함수에는 bind()함수가 딸려 있습니다.
여기에 매개값으로 this를 주지 않으면

this.setState({mode: "read"})
여기 this는 state의 this로 읽지 못한다더군요.
자세히는 모르겠는데...

onClick 속성 내부에 정의한 익명함수, 본 render() 내에 컴포넌트 자기자신을 this로 지정할 수 가 없다.

밖에서는 컴포넌트 자기자신을 가리킬 수 있다.

근데 익명 함수.bind(), 이 매개변수에 this를 넣으면
이 익명 함수 내의 this는 외부의 this로 가져다 쓸 수 있다.

bind란 말이 엮어준다는 의미로서,
외부의 this를 엮어준 것이다.

this가 아니라, 가령 전역 변수가 a가 선언되어 있을 때,
a를 익명함수.bind(a) 이렇게 해주면
익명함수 내에서 this는 전역 변수 a를 가리킨다.