State
컴포넌트 내부에서 바뀔 수 있는 값. 자바스크립트에서 let, const로 변수를 선언했었는데, 리액트에서는 UI를 변경(렌더링을 다시)하기 위해서 State라는 독특한 형태로 상태를 관리하게 된다.
const [name, setName] = useState(initial value);
- Onclick 사용해서 변경해보기
useState를 사용할 때에는 문서 상단에 { useState }가 import 되어 있는지 꼭 확인한다. 그러고 나서 const로 시작하는 State를 만든다. useState('여기에') 초깃값을 넣어준다.
State의 초깃값으로 넣어둔 '알랭 드 보통'이 출력되고 있다. 버튼에 온클릭 함수를 통해 setName을 실행시켜준다.
버튼을 클릭했을 때 '알랭 드 보통'이 '카를로 로벨리'로 바뀐 것을 확인할 수 있다. 자바스크립트에서 해봤던 내용이랑 비슷한데, 방법이 비슷한 듯하면서 다르다는 걸 알 수 있다.
- input 사용해서 변경해보기
이렇게 화살표를 그려보면 맞는걸까나? 🤔🤔🤔 input 입력값을 setFruit 하여 바뀐 fruit 값이 아래에 출력되는 형태인 것 같다. 사실 뭔가 낯설어서 이해하려고 코드를 한참을 쳐다봤다.
여튼 그렇게 실행하면, input에 입력하는 값이 제대로 아래에 출력된다.
- id, 비밀번호 입력하여 alert로 보여주기
여기까지 작성하는 데에도 우여곡절이 많았다ㅎ value="id" 이렇게 했더니 input칸에 id라는 문자열이 그대로 출력되었고, setID("event.target.value") 이렇게 했더니 event.target.value라는 문자열이 그대로 전달되는 현상이 발생하였다🤣🤣🤣 JSX문법에 얼마나 익숙하지 않은 상태인지를 잘 알게 되었다...!
아무튼 처음에 이렇게 했었는데, 온클릭 함수의 인자로 id, pw를 받아서 출력하는 것으로 생각하여 캡쳐와 같이 작성했더니 제대로 작동하지 않았다. 그럼 나보고 어떻게 하라는 건지 막막하여 chatGPT 선생님께 도움을 요청했다.
onClick 이벤트 핸들러에서 인자로 이벤트 객체만 받는다면, 왜 (event)로 쓰지 않고 () 빈칸으로 둬야 하는 건지 추가로 질문해보았다.
결론은 명시적으로 (event) 이렇게 써도 되고 () 이렇게 빈칸으로 남겨둬도 된다고 한다!
그렇게 해당 부분을 수정했더니, 입력한 값을 alert에 전달하는 것까지 성공!
다음으로는 alert창을 띄우고 나서는 input값을 모두 지워줘야 하는데, 구글링한 정보로 나름 이렇게 짜봤는데도 제대로 실행이 되지 않는다.
그냥 setId와 setPw를 온클릭 함수 안에 넣어줬더니 문제는 해결됐다!!!
