개쩌는 덧셈 계산기 만들기
안녕하세요 인스타에서 개쩌는 덧셈 계산기를 봤어요 도저히 참을 수 없었습니다.
여러 개의 State를 선언하는 것이 아니라, 하나의 State를 선언하고 객체를 이용했습니다. 배운 내용을 바로 적용해 보니 재밌군요
처음에는 이벤트 핸들러도 State처럼 하나로 통합하고 싶어서 위처럼 만들었습니다. 하지만 'send' 버튼을 눌렀을때, Answer 값이 변경되면서 Output 부분에 렌더링 되게 하려면, 아무래도 분리하는 게 맞다는 생각이 들어서 분리했습니다
onChangeHandler는 두 개의 input 값을 각각 관리하는 핸들러이고, onClickHandler는 Answer을 계산하는 핸들러입니다.
return 부분입니다. 주의점은 label 요소에서 for가 아니라, htmlFor 속성을 사용해야합니다.
간단해서 더 설명할 건 없구요. state를 객체로 다룬 만큼, value값 등등에 전부 점 표기법으로 해당 값을 넣어줬습니다. 이렇게 완성되나 싶었는데...
결과는 잘 출력되나, console창에 이런 오류가 나왔습니다. 아니 이게 뭐시여
제가 참 멍청했던 게
onClickHandler 핸들러에서, setState에 값을 전달할 때, 단순히 state.Number1과 state.Number2만 전달했던 것입니다. 즉 업데이트된 state값을 전달하지 않은 것입니다! 두둥
초기에 state.Number1과 state.Number2는 빈 문자열로 초기화되어있고! 그렇기에 Answer 또한 초기에는 빈 문자열일 겁니다. 리액트는 이러한 상태를 '제어되지 않는 입력 요소'로 간주해서 경고를 보낸다고 합니다
스프레드 연산자로 먼저 기존의 state값을 뿌려주면, Answer을 제외한 상태 값들은 이전 상태와 동일하게 유지되면서 Number1과 Number2의 합이 Answer에 할당하게 됩니다!
즉! 이전 상태를 유지하면서 Number1과 Number2의 값도 유지되기 때문에 경고가 발생하지 않는 것입니다.
★☆완성☆★
이렇게 해서 개쩌는 덧셈 계산기를 완성했습니다. 감사합니다.