웹개발 성장기

단계적으로 validation logic을 구축해본다. useState() 뿐만 아니라 useReducer()도 사용해본다. Form validation (폼 유효성 검사) user가 올바른 입력값을 전송하도록 여러 조건을 체크하고 잘못된 점이 있으면 알려주는 것 회원가입이나 기업의 입사지원서 작성시 흔히 볼 수 있음 Form은 언제 validate해야 할까? form이 submit 됐을 때 (onSubmit event) user가 input에서 focus를 잃었을 때 (onBlur event) 모든 keystroke (onChange event) Empty input 처리 방법 was touched state: 입력칸을 클릭했는지 여부 lost focus: input field에 입력하다가 다 지우고 ..

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..