react에서 count를 구현하면서
간단하면서도 이해가 되지 않았던 부분도 있어
블로그에 작성하기로 하였다.
VScode에서 Count.js 새 파일을 만들어
단축키 "rfce"로 일반함수형 구조로 만든다.
"div"와 "/div" 사이에 count 문자와 카운트 되는 버튼을 입력한다.
h1에 count에 클릭한 수 만큼 숫자가 올라가는 변수로 {count},
button에는 onClick 이벤트를 사용한다.
초기값(useState)을 설정하여 const 변수를 선언했다.
참고로 const는 변치 않는 값을 가진 수를 생성한다.
버튼을 누를때마다 count의 값이 1씩 증가하도록 함수를 구현한다.
VSCode>terminal에서 "npm start"를 실행시키면
아래와 같이 창이 뜬다.
Num Count의 초기값은 100, 버튼 Count Up을 누르면 1씩 증가한다.
아래 사진은 setCount 밑에 console.log(count);를 이용하여
개발자 도구에서 1씩 수가 증가하는 것을 볼 수 있다.
🐨느낀점
개발자가 되기 위해 3주 정도 공부를 하였는데
밑바닥에 벽돌을 쌓듯이 차곡차곡 개발 공부를 해봐야겠다는 생각이 든다.
너무 무리하지도 너무 늘어지지도 않게 공부하자!
내일도 블로그 작성을 할 수 있도록 노력합시다.
Hello