오늘은 state와 event를 실습해볼 수 있는
문제를 풀어보았다.
이번 문제들을 풀어봄으로써
useState의 사용법,
부모 컴포넌트에서 자식 컴포넌트로 props를 넘겨주기,
onClick, onChange 등과 같은 이벤트주는방법 등을
더 확실히 알 수 있던 계기가 되었다.
1번
1번 문제는 비교적 간단하였다.
state와 이벤트를 이용하여 아래와 같이 출력이 되게 하면되었다.
1번 코드 풀이
먼저, 클릭횟수를 저장하기 위해 counter 상태값을 만들어준다.
클릭이라는 버튼을 클릭하면 counter가 1이 증가하도록 하는
increase라는 함수를 만들어준다.
increase함수에는 상태변경함수인 setCounter를 통해
상태 counter에 변화(counter+1)를 주었다.
버튼 밖으로 커서가 나가면 mouseout이벤트가 발생하므로
onMouseOut이벤트를 통하여 counter를 다시 0으로 돌려주었다.
2번
2번 코드 풀이
message상태 초기값으로 객체형태로
title을 "제목"으로 주었다.
input태그에서 onChange 이벤트가 발생하면
message값이 바뀌는 inputHandler 함수가 실행된다.
버튼을 클릭했을 때는 onClick이벤트를 통해
alert창에 객체로 저장된 state인 message의 title을 띄운다.
글자의 색은 title이 초기값인 '제목'이 아니라면
초기값으로 정해진 color인 red로 바뀐다.
3번
3번 코드 풀이
Sol3 컴포넌트에서 info라는 상태를 만들어서, 이 상태에 저장된
id, pw가 미리 정해놓은 id, pw가 되는 것이다.
inputInfo라는 상태를 만들어서, 사용자가 입력하는 id, pw값을
각각 자식컴포넌트인 Id 컴포넌트, Pw컴포넌트에 입력하게 만든다.
infoHandler라는 함수를 통해 입력받은 id, pw로 inputInfo를 바꿔준다.
infoHandler함수를 자식 컴포넌트인 Id컴포넌트, Pw컴포넌트의 props로 내려준다.
버튼을 클릭하면 Id컴포넌트, Pw컴포넌트 각각에 입력된 inputInfo와
미리 저장해놓은 info와 비교하여 값이 같으면 '로그인 성공', 다르면 '로그인 실패'
4번
4번 코드 풀이
regions라는 상태에 배열값을 초기값으로 넣어준다.
select태그에 change이벤트가 발생했을 때 value 값을
저장할 수 있는 select 라는 상태를 만든다.
changeHandler라는 함수를 onChange이벤트에 넣어주어
보기선택이 바뀔때 그 value를 setSelect를 통해 상태를 바꿔준다.
따라서 버튼을 클릭했을 때 select라는 상태에 저장된 값이 브라우저에 보인다.
문제5
5번 코드 풀이
Sol컴포넌트에서 CheckBox컴포넌트에게 cap, shoes, bag이라는 props를 내려준다.
total 이라는 상태의 초기값으로 0을 준다.
map을 돌리기 위해 items라는 상태를 만들고 초기값으로 배열을 준다.
type이 'checkbox'인 input에 onChange 이벤트가 발생했을 때 changeHandler함수를 실행시킨다.
changeHandler함수는 checkbox의 체크 여부에 따라 total 값이 바뀌는 기능이다.
이렇게 5문제를 풀어보았다.
뭔가 state, event 로직을 많이 짜봤다고 생각했는데
막상 또 처음부터 짜려니까 많이 헷갈렸다.
다 안다고 자신하지말고 유데미 3,4,5강 꼭 듣자...
요즘 리덕스한다고 그새 리액트를 까먹은거같다
한가지 너무 깊게들어가지말고 다방면으로 계속 반복하자!!
