[인프런] section3. 검색폼 1

🌹Input 요소 사용하기

const element =(
  <>
    <div className="container">
      <form>
        <input type="text" placeholder="검색어를 입력하세요" autofocus />
        <button type="reset" className="btn-reset"></button>
      </form>
    </div>
  </>
);

위 코드에 대한 결과는 사진과 같다.

리액트방식의 상태관리를 사용한다. -> component

🌹리액트 컴포넌트

React는 컴포넌트라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

엘리먼트 : 리액트 앱을 구성하는 최소단위
컴포넌트 > 엘리먼트 + 어플리케이션 로직
로직 : 컴포넌트의 상태를 변경하면서 UI 엘리먼트를 제어

class App extends React.Component{
  render() {
  	return(
    	  <>
            <div className="container">
              <form>
                <input type="text" placeholder="검색어를 입력하세요" autofocus />
                <button type="reset" className="btn-reset"></button>
              </form>
            </div>
          </>
    );
  }
}

// 가상돔을 그려 실제돔을 그린다.
ReactDOM.render(<App />, document.querySelector("#app"));

-> 앞선 input요소 사용하기에서 실습했던 코드를 react 문법으로 변경해보려고 한다.

🌹입력 값을 기억하기 - State

constructor() {
	super();
    
    this.state = {
    	searchKeyword: "",
    };
}
.
.
.
<input
	type="text"
    placeholder="검색어를 입력하세요"
    autofocus
    value={this.state.**searchKeyword**}
/>

-> 해당코드는 입력값을 기억할 수는 있지만 onChanged에 해당하는 내용은 사용자가 제시하지 않아 브라우저가 관리하고 있다. 때문에 입력값을 입력하고 이를 지우려고 해도 변경되지 않는다.

🌹상태를 갱신하기 - 이벤트 처리

constructor() {
	super();
    
    this.state = {
    	searchKeyword: "",
    };
}

handleChangeInput(event) {
	// searchKeyword의 값(입력받은 값)을 이벤트값(변동값)으로 변경해준다.
	this.searchKeyword = event.target.value
    // 변경된 값을 강제로 render안에 돌게 해준다.
    this.forceUpdate()
}
.
.
.
<input
	type="text"
    placeholder="검색어를 입력하세요"
    autofocus
    value={this.state.**searchKeyword**}
    onChange={event => this.handleChangeInput(event)}
/>

-> 좋은 리액트 코드를 짜려면 수동으로 render를 돌게 해줄것이 아니라 코드 스스로가 render를 돌 수 있게끔 코드를 짜주어야 한다.

this.searchKeyword = event.target.value
this.forceUpdate()대신

this.setState({
	searchKeyword: event.target.value,
});

위와 같이 setState 함수를 사용하는 것이 훨씬 유용하다.
-> 리액트 스스로 상태변화를 알아차린다.