React - Event - 06

Handling User Input With Forms and Events

Adding Some Project Structure

src\components 폴더를 생성 후 앞으로 만들어질 component 파일들을 위치한다. React의 기본적인 파일 구조는 이렇다.

// src/index.js
import  React  from  'react';
import  ReactDOM  from  'react-dom';
import  App  from  './components/App';

ReactDOM.render(
 <App />,
 document.querySelector('#root')
)

// src/components/App.js
import  React  from  'react';

const  App = () => {
 return <div>App</div>
};

export  default  App;

Creating Event Handlers

Event Handlers

• onClick: User clicks on something
• onChange: User changes text in an input
• onSubmit: User submits a form

// SearchBar.js
import  React  from  'react';

class  SearchBar  extends  React.Component {
 onInputChange (event) {
  console.log(event.target.value);
 }

 render() {
  return (
   <div  className="ui segment">
    <form  className="ui form">
     <div  className="field">
      <label>Image  Search</label>
      <input  type="text"  onChange={this.onInputChange} /> // this
// smae
      <input  type="text"  onChange{(event) => console.log(event.target.value)} // arraow function
     </div>
    </form>
   </div>
  )
 };
}

export  default  SearchBar;

setState

개발을 하다가 setState를 사용하여 상태를 변경하고 부모 컴포넌트로 값을 보내줄 일이 생겼다.

_changeToggle () {
 this.setState({ isActive: !this.state.isActive });

 if(isActive) {
  this.props.setType('global');
 } else {
  this.props.setType('non-global');
 }
}

위와 같이 작성하면 될 줄 알았지만, isActive값을 콘솔에 출력해보니 상태값이 늦게 바뀌는 것이다.
setState는 callback함수를 인자로 받는다. 이 콜백함수에는 상태가 바뀌고 난 후 해야할 작업을 적으면 된다.
아래와 같이 작성하면 원하는 방향으로 동작한다.

this.setState({ isActive: !this.state.isActive }, () => {
 if (isActive) {
  this.props.setType('global');
 } else {
  this.props.setType('non-global');
 }
});

GitHub and Others

• 강의를 들으며 따라한 내용을 pics에 올려두었습니다.
• setState