손 더럽히기 - 리액트 ] 카운터 앱 구현

- 리액트로 카운터 앱 만들기

- useState를 활용하여 동적 상태 관리 사용

- onClick, onKeyUp 이벤트 사용

---

- 카운터 앱 동작 화면

---

-코드

---

- 회고

리액트를 이용해서 처음으로 혼자 리액스 설치부터 카운터 앱 작동까지 작성해보았다.

예제로만 연습을 하다보니, useState를 어디에 써야 하는지, 증감 함수는 어떻게 작성해야 하는지 감이 안왔다.

작성하면서 발생한 에러는 우선 return 문에 요소의 이름을 내 마음대로 지어봤다.

ex) <div className ="buttonContainer "> 를 <btncontainer> 로 하자 브라우저 콘솔에 아래와 같은 경고가 떴다.

<btncontainer> 태그는 이 브라우저에서 인정하지 않는다.

 이를 해결하기 위해 <btncontainer>를 <div className ="buttonContainer"> 수정하였다.

---

다음으로는 input 요소에 숫자를 입력하고 'Enter'를 입력하면 count에 렌더링 될 수 있게 해보려고 하였다.

이 과정에서 onKeyUp 이벤트를 사용하였는데, event.key === 'enter'를 작성하자 event.target.value를 가져오지 못하였다.

이에 'enter'를 'Enter'로 바꾸자 event.target.value에 값을 가져오기 시작했다.

 

onKeyUp 이벤트는 눌린 키를 땠을때 이벤트가 발생한다.

---

마지막으로 경험한 에러는 useState 사용시 초기값 설정을 해주지 않아 에러가 발생하였다.

const [count, setCount] = useState; // 에러 발생

const [count, setCount] = useState(0); // 해결

 

useState 관련 공식문서 - React Hook

https://ko.legacy.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

 

이후에는 styled component를 이용해 카운터 앱을 리팩터링 해보고자 한다.