웹개발 성장기

Asynchronous setState()는 비동기 (asynchronous)로 작동한다. 그 말은 즉슨 setState로 변경한 state값은 즉시 적용되지 않는다는 뜻이다. vscode에서 마우스 커서를 올려보면 다음과 같이 callback이 있음을 알 수 있다. 예시를 위해 버튼을 누르면 카운트를 1씩 증가시키는 코드를 작성해보면 다음과 같다. // index.js ReactDOM.render( , document.getElementById('root') ); // App.js class App extends Component { constructor(props) { super(props); this.state = { count: 30 + this.props.increment, }; } handle..

render() 함수에서 JSX element 리턴 시 handleChange 속성 부분에 바로 함수를 구현하면 this.setState()를 사용함에 있어 문제가 되지 않는다. 하지만 class 함수로 빼게 되면 this keyword를 인식하지 못한다. 이때 constructor()에서 context를 binding 시켜주는 방법도 있지만 arrow function을 사용하면 별도의 binding 없이 사용 가능하다. 그냥 썼을 경우 this.setState({ searchField: e.target.value })} /> 일반 method로 구현 constructor() { super(); ... this.handleChange = this.handleChange.bind(this); } handl..