[React] Ⅲ. State

1. State

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
화면에 보여줄 컴포넌트의 정보를 지니고 있는 객체
state에서 상태값을 설정하는 이유는 컴포넌트 안의 요소에서 상태값을 반영해서 데이터가 바뀔 때마다 효율적으로 UI에 나타내기 위함

2. State 객체

1) 버튼 클릭해서 글자색 바꾸기

import React from "react";

class App extends React.Component {
  constructor(){
    super();
    this.state = {
   		titleColor: 'red',
      	subTitle: 'wecode'
    };
  }
  
  /*
  handleTitleColor = () => {
    if(this.state.titleColor === 'blue') {
	    this.setState({
    	  titleColor: 'pink'
	    });
	  } else {
        this.setState({
          titleColor: 'blue'
        });
      }
  };
  */
 
 handleTitleColor = () => {
    this.setState({
    	titleColor: this.state.titleColor === 'blue' ? 'pink' : 'blue'
	    });
	  } else {
        this.setState({
          titleColor: 'blue'
        });
      }
  };
 
  render() {
    return (
      <div className="App">
      	<h1 style={{ color: this.state.titleColor }}>state</h1>
		<h2>{this.state.subTitle}</h2>
		<button onClick={this.handleTitleColor}>Click</button>
      </div>
      )
  }
  
  export default App;

2) input 입력받은 value를 화면에 나타내기

import React from "react";

class App extends React.Component {
constructor(){
  super();
  this.state = {
 		titleColor: true,
    	subTitle: 'wecode'.
    	idValue: '',
    
  };
}

/*
handleTitleColor = () => {
  if(this.state.titleColor === 'blue') {
	    this.setState({
  	  titleColor: 'pink'
	    });
	  } else {
      this.setState({
        titleColor: 'blue'
      });
    }
};
*/

handleTitleColor = () => {
  this.setState({
  	//titleColor: this.state.titleColor === true ? false : true
    	  titleColor: !this.state.titleColor
	    });
	  } else {
      this.setState({
        titleColor: 'blue'
      });
    }
};

/*
render() {
  return (
    <div className="App">
    	<h1 style={{ color: this.state.titleColor ? 'blue' : 'pink' }}>state</h1>
		<h2>{this.state.subTitle}</h2>
		<button onClick={this.handleTitleColor}>Click</button>
    </div>
    )
}*/
handleIdValue (event) => {
this.setState({
	idValue: event.target.value
});
};

render() {
  return (
    <div className="App">
    	<h1 style={{ color: this.state.titleColor ? 'blue' : 'pink' }}>state</h1>
		<h2>{this.state.idValue}</h2>
		<input onChange={this.handleIdValue} type="text" placeholder="id를 입력해주세요" />
    </div>

export default App;

3) 기억해야할 점

• 이벤트가 발생하는 요소와 state data를 반영하는 요소는 다르다!
• 이벤트가 발생하는 요소에서 먼저 시작하자
• 함수 만들고 제일 먼저 console.log() 확인해보자
• setState가 실행되면 자동으로 render()함수가 실행된다
  
  
  event.target 이벤트가 일어난 요소
  event.target.value그 요소의 값