웹개발 성장기

단계적으로 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..

프롤로그 며칠 전 프로젝트를 진행하다 리뷰를 남기는 컴포넌트에 평점을 구현해야 했다. 일상 속에서 리뷰를 남길땐 아무 생각없이 사용하던 것인데 막상 구현하려니 ?!하고 당황스러웠다. 열심히 구글링한 결과 JavaScript까지 동원한 엄청난 코드도 많았지만 최대한 간단하게 적용하고 싶었다. 지금 프론트엔드 기술스택은 Vue를 사용하고 있는데 npm package로 vue-star-rating이라는 것이 있었지만 왠만하면 패키지를 사용하고 싶지 않았다... (사실 깔아서 적용시켜보려 했지만 mouse hover event가 안되서 다시 지웠다) 열심히 검색한 결과 원하는 대로 깔끔하게 구현된 코드가 있어 정리겸 글을 써본다 🧡 별점은 정적 구현과 동적 구현 두 가지가 있다. 정적 구현 사용자 리뷰나 평균 ..