노마드코더의 강의에서는 리액트를 unpkg에서 스크립트로불러와 사용했다.
리액트가 어떤식으로 코드가 작성되고,, 자바스크립트만 이용하는 것 보다 얼마나 더 편리한지 클릭횟수를 세는 프로그램을 통해 알아보았다.
다음과 같이 버튼을 클릭하면 클릭한 횟수만큼 숫자가 바뀐다.
우선 자바스크립트로 표현한 코드이다.
바디태그에서 html의 요소들을 직접 입력해주고 스크립트태그에서 그요소들을 불러와 저장해준다.
클릭했을 때 counter에 숫자를 더해주는 함수를 만들어주고 그 함수에 클릭된 횟수를 counter변수만큼 입력해주는 텍스트를 덮어쓰는 기능을 추가한다.
addEventlistener를 통해 "click"이란 이벤트가 발생했을 때 함수가 발동되게 코드를 작성하였다.
같은 프로그램을 리액트로 작성한 코드이다..
사실 얼핏보면 코드도 더 길고 익숙하지 않은 코드들이라,, 이 정도로 간단한 프로그램을 만들때는 리액트를 사용하지 않아도 될 것 같다는 생각이 든다..
하지만 리액트의 편리함은 굳이 html의 요소에 태그를 만들고 입력할 필요없이 리액트에서 요소들을 생성하고 그걸 html에 랜더링할 수 있다는 점이다..
새로 배운 개념들 복습
jsx라는 툴을 통해 react에서 html의 방식처럼 입력할 수도 있다
react를 사용해서 html요소들을 추가하려면
React.createElement("태그", 속성, "태그에 넣을 문장");
이런식으로 작성해줘야 하지만
jsx라는 툴을 불러오기만 한다면 그냥 리액트 안에서도 html처럼
<태그>"태그에 넣을문장"</태그>
이런식으로 작성해도 된다.
하지만 이렇게 작성해 준 것들도 html에 불러와야 정상적으로 화면에 표시가 된다.
React.useState();
리액트 개발환경에서는 그냥 State를 import해와서 그냥 useState로 쓰는 듯 한데,,
노마드코더의 강의에서는 React.useState로 계속 쓴다..
useState는 값이 바뀔 때 마다 화면에 다시 표시해줄때 쓴다.
useState는 배열인데, [처음 저장할 값, 변경해서 다시 저장하는 함수]로 구성되어있다.
위에 작성한 코드에서
const [counter, setCoutnter] = React.useState(0);
여기서 ()안의 값은 첫 배열에 저장을 해준다.
밑의 줄에
const onClick=() => { setCounter((current)=>current +1); };
setCounter은 현재값에 +1을 해서 현재값(counter)에 저장을 해준다.
이것을 onClick이란 함수로 정의를 했고,
버튼에 이벤트를 추가 해줘 버튼을 클릭할 때마다 횟수를 증가시켜서 화면에 표시해준다.
