[React] state 및 this문제

state란

유저 이벤트를 저장하고 반응하는데 이용된다.

모든 클래스 컴포넌트는

스테이트 객체를 가지고 있고

이 스테이트가 변화할 때마다 

재렌더링하고

자식컴포넌트도 재렌더링한다.

constructor(props){

super(props)

this.state ={ term : ""};

}

이를 시험하기 위해 다음과 같은 코드를 작성했다.

constructor는 생성자 함수라고 하고

객체를 생성하는 함수를 생성자 함수라고 부른다.

보통 변수나 state를 초기화할때 사용된ㄷ고 한다.

super는 부모 오브젝트의 함수를 호출할 때 사용된다.

import React, { Component } from "react";

class SearchBar extends Component {

constructor(props){

super(props)

this.state ={ term : ""};

}

render() {

return (

<div>

<input onChange=

{event => this.setState({ term : event.target.value})} />

Value of the input : {this.state.term}

</div>

);

}

}

export default SearchBar;

자 이제 설명하자면

최초에 state를 모두 초기화 시켰다.

그리고 

onChange시

state의 term의 값을 value로 계속 바꾸는 식이다.

이 때, 

constructor에서만 this.state = {} 와 같이 바꿀 수 있고

그 외에서는 모두

setState메소드를 이용해서 바꾸어야 한다.({this.state.term={}}은 불가능)

다만

참조시에는

this.state.term과 가능

import React, { Component } from "react";

import PropTypes from "prop-types";

import LoginForm from "./presenter";

class Container extends Component{

state = {

username : "",

password : ""

};

static propTypes = {

facebookLogin : PropTypes.func.isRequired,

usernameLogin : PropTypes.func.isRequired

}

render() {

const {username, password} = this.state;

return <LoginForm

handleInputChange={this._handleInputChange}

handleSubmit={this._handleSubmit}

usernameValue={username}

passwordValue={password}

handleFacebookLogin = {this._handleFacebookLogin}

/>;

}

_handleInputChange = event => {

//console.log(event.target.value)

const {target : {value,name} } = event;

this.setState({

[name] : value //[]는 변수 선언이 아니라 변수 자체를 불러오는 것(username,password)

});

};

인스타 때의 비슷한 예제

handleInputChange는 입력값을 받는 함수이고 이는

1. state값 추가

2. event.target.value

event.target.name을 상수 간략화

3.setsTate를 통해

state의 username과 password 의 state 변경

****************************************************************************************************************************************************

This is react&redux lecture. And i have a question.

import React, { Component } from "react";

class SearchBar extends Component {

constructor(props){

super(props)

this.state ={ term : ""};

}

render() {

return (

<div>

<input onChange={this.onInputChange} />

Value of the input : {this.state.term}

</div>

);

}

onInputChange(event){

???.setState({term : event.target.value});

}

}

export default SearchBar;

this is my code and when i change state i meet a problem!

onInputChange can't find SearchBar Object So I don't know how to do setState

import React, { Component } from "react";

class SearchBar extends Component {

constructor(props){

super(props)

this.state ={ term : ""};

}

render() {

return (

<div>

<input onChange=

{event => this.setState({ term : event.target.value})} />

Value of the input : {this.state.term}

</div>

);

}

}

export default SearchBar;

this is lecture code. I think It works beacuse there is in SearchBar.

but I want to work outside.

그리고 문제점이 있다

위의 코드에서 this를 어떻게 먹이는지 모르겠다 ㅠ