Facts
- 로또 미션 css를 모두 완료했다.(3시간 30분)
- 당첨 번호 실시간 검사 기능을 구현했다.(2시간)
Findings & Feelings
로또 미션 css를 모두 완료했다.
목표는 css를 2시간 정도로 끝내고 기능 구현을 마무리해서 pr을 하는 것이었다. 택도 없었다. 정말 간단하게 6개의 당첨 번호와 1개의 보너스 번호만 flex로 정렬시키면 되는 것이었는데도 오래 걸렸다. 이것저것해서 2시간 30분 정도 걸린 것 같다.
오래 걸린 부분 중 생각나는 것은 당첨 번호가 화면 밖으로 나가는 것이었다. 분명 App은 width가 고정되어 있는데, width를 뚫고 나가는 것이다. ul, li에 width를 설정해도 소용 없었다. input의 크기가 저절로 작아지지는 않았다. flex-grow로 공부해보고, justify-content도 설정해보고 했지만 동작하지 않았고, 결국 input의 width를 고정 값으로 할당했다. 맘에 드는 방법은 아니라서 주말에 공부를 해볼 예정이다.
또, input이 margin 0 auto를 해도 중앙 정렬이 안 되는 문제가 있었다. 이건 한 크루의 도움으로 box-sizing: border-box를 사용해서 해결했다. 자주 사용하던 속성임에도 생각이 멈췄었다. 이렇게 사소한 것 때문에 시간을 많이 잡아먹었고, 실수를 줄여야겠다는 생각을 했다.
당첨 번호 실시간 검사 기능을 구현했다
실시간 검사 기능이 은근히 시간이 오래 걸린다. 유효성 검사도 구현해야 하고, 상수화 할 것도 많고, 네이밍도 신경써야 한다. 사실 처음에는 뇌정지가 와서 어떻게 시작해야 하는지 감이 잡히질 않았었다. 페어의 도움을 받아 정신을 차렸고, onChange 이벤트가 발생할 때마다 모든 input의 값을 받아와서 검사하는 방식으로 구현했다.
모르던 사실을 알게 되었는데, 리액트의 event는 바닐라 js의 event와 다르다. 그래서 바닐라 js의 onchange 이벤트는 포커스가 사라질 때 한 번 호출하지만, 리액트의 onChange 이벤트는 input에 값이 입력될 때마다 실행된다. 즉, 바닐라 js의 input event와 비슷하게 작동한다.
이런 차이점이 있는지 몰랐었다. 그리고 방금 검색을 하다가 발견한 것이 리액트에서는 form 요소에서 input의 value를 받아서 사용할 때, 기존의 js처럼 input.value를 사용하는 것이 아닌
handleChange(event) {
this.setState({value: event.target.value});
}
<input type="text" value={this.state.value} onChange={this.handleChange} />이런식으로 사용해야 한다고 한다. input에 값이 입력되면 setState로 상태를 변경해주고, 변경된 상태를 input의 value에 할당해준다. 왜 이렇게 사용해야 하는지 아직 이유를 모르겠다. 공식 문서에 나와있다. React에서 사용자의 입력 값을 직접 제어하는 방식으로 제어 컴포넌트라고 한다.
코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.이런 이점이 있다고 한다.
이 문서를 보고 지금까지 작성한 코드를 다시 작성해야 한다는 생각이 들었다. 큰일이다. 근데 이 방식이 필수적인 것인지 아니면 선택 사항인지는 잘 모르겠다. 내일 조금 더 공부를 해봐야겠다.
Plans
- 로또 미션 pr하기
- 학습 로그 작성하기
