State

• state는 Component의 상태 값을 말한다.
• Component에서 바뀔 필요가 없는 값이면 state로 사용하지 않는다.
• state와 props는 둘 다 object이며, 화면에 보여줄 정보를 가지고 있다는 점에서 서로 비슷한 역할을 한다.
• props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(함수에서 parameter를 사용하는 것 처럼), state는 component 내에서 정의하고 사용한다.

setState()

• 함수. 호출할 때 this를 붙여 줘야 한다.
• 기본 바닐라 자바스크립트에서는 객체에 직접 접근하여 값을 바꿔줄 수 있었지만, 리액트에서는 객체에 직접 접근 해서는 안 된다.
• 직접 접근하여 값을 바꾸면 값이 바뀐 것을 감지 하지 못하기 때문이다. 값이 바뀐 것을 감지 해야 render가 다시 되고, render가 다시 되야 바뀐 값을 보여줄 수 있기 때문이다.
• 비동기로 동작 하기 때문에 함수를 호출하고 console.log를 하면 제대로 된 실행 결과를 확인할 수 없다.
• setState에 두번째 인자로 콜백함수로 console.log을 해주면 제대로 된 결과를 확인할 수 있다.

class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className="btn"
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button />,
  document.getElementById('root')
);

• 위의 코드는 버튼을 눌렀을 때 state를 변화 시켜 보여지는 텍스트를 바꾸는 코드이다.
• 위에서는 clicked라는 state 하나만 사용하지만 여러개의 state를 원하는 이름으로 사용할 수 있다.
• onClick은 event 중 하나이며, div 태그를 클릭하면 onClick에 ()=>{} (arrow function)으로 넘긴 함수를 실행한다.
  
  

onClick={()=>{this.setState({ clicked: !this.state.clicked })}}

• click하면 this.setState() 함수가 state를 업데이트 한다. clicked라는 state를 수정한다.
• 처음에 false였던 state를 !this.state.clicked를 이용하여 현재 clicked의 반대로 true로 바꾼다. (true -> false / false -> true)
• onClick event가 달려있는 div를 클릭할 때 마다 clicked의 상태가 true나, false로 업데이트 된다.

{this.state.clicked ? '좋아요' : '싫어요'}

• clicked의 state가 true면 '좋아요', false면 '싫어요'를 보여 준다.

constructor() {
  super();

  this.state = {
    clicked: false
  }
}

• constructor()는 class의 instance가 생성될 때 항상 호출되는 함수(생성자). 항상 필요한 것은 아니지만 초기화할 값을 이 constructor에서 세팅 해준다.
• Button component를 그리려면 this.state.clicked 값이 필요한데, 최초에는 값이 없기 때문에 constructor에서 값을 지정해준다.
• spuer()를 꼭 작성 해줘야 한다. 그래야 React.Componenet class에 있는 메서드들(ex.render)을 사용할 수 있다.

Props와 State

class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button type="like" />,
  document.getElementById('root')
);

• Button 태그에 type을 추가 하고, Button component에서 props로 받을 수 있다.
• this.props.type이 'like' 이면 like-btn 이라는 class 속성이 추가 된다.

사용

• class 안에 있는 함수를 Methods 라고 한다.
• lifecycle methods는 class component에만 존재한다.

constructor(){
  super(); // 를 꼭 써줘야 한다.
}
함수 위치 
handleChange=(e)=>{
	consolelog(e.target.value);
}
render() {
	return (
      JSX
    )
}

<input onChange = {함수} />

• javascript에서 사용했던 addEventListener 대신 onChange를 사용한다.
• 함수는 constructor와 return 사이에 정의 해준다
• handleChange() {} 사용
• JSX에서 중간에 자바스크립트를 사용하기 위해서는 {}를 사용해야 한다.

<input onChange={this.handleChange} /> 

• onChange가 발생하자 마자, 할 때 마다 사용하려고 하기 때문에 ()를 쓰지 않는다.

• 리턴문 안에서

<input onChange={this.handleChange()} /> ()

를 사용하면 Componenet가 실행 되면 바로 실행된다 그래서 () 사용하지 않는 것이다.

• 함수를 만들 때 항상 arrow 함수로 선언한다. arrow 함수를 사용하지 않으면 bind를 해줘야 하며, 직접 만든 함수가 아닌 react에서 제공하는 함수를 사용할 때는 arrow 함수 형태로 사용하지 않아도 된다.

• e-> event(객체형태 / 여러 가지 정보를 담고 있다. target에 변화를 일으키는 것의 정보.
  target의 value에 접급해야 input 태그에 무엇을 입력 했는지 알 수 있다.)

• State 컴포넌트 상태를 유지하는 데이터 공간
  (state는 객체 / constructor 안에서 불린다 / return 안에서 변하는 값을 보여주기 위해 사용 / state는 직접 변화를 주면 안된다.)

• this.setState() => state에 변화를 준다 / () 안에 바꾸고 싶은 것만 넣어 준다.
  비동기!!
  state의 변화가 감지되면 다시 render 한다

• onChange에서 변화가 일어날 때 마다 handleChange() => {} 이벤트 감지(정보를 가져 옴)

handle Change() => {
	this.setState({
    	username : e.target.value
    });
}