useState (React.js)

리액트 기초를 배우면 <input>, <select>, <option>, <button> 등의 form을 활용하는 방법을 배운다.

이 과정에서 useState 를 잘 이해할 수 있기 때문이다.

1. useState를 사용해 여러 이벤트들을 사용할 수 있게 된다

• onChange (사용자의 입력이 어떤 식으로든 변경될 떄 발생)
• onClick (클릭한 경우 발생)
• value 활용

2. onChange를 함수로 만들어 매개변수 e.target.value를 만든다.
   (SyntheticBaseEvent에서 우리가 원하는 value안의 target값을 찾아야 하기 때문에 )

3. 데이터를 업데이트 해주는 방법

   • useState를 이용해 [state, setState]에서 setState를 만들어준다. (input의 value를 state로 연결)
     const [데이터, 함수] = useState(초기값)
     함수 실행 시, 리렌더링된다.

setState의 결과는 array이다

onChange 함수는 데이터를 업데이트 해주는 역할
Change이벤트가 일어났을 때,(사용자가 input에 뭔가를 써넣을 때,) onChange함수가 실행된다. 그리고 event.target.value ( = input value) 를 얻게 된다.

state를 리스닝하거나, 연결한 모든 것들은 setState로 control된다.

다시 한 번 정리하자면,

const [good, setGood] = useState("");
setGood(argument)
여기서 argument는 good의 변화를 나타낸다.
string, number 어떤 값이든 가능하고 함수 또한 가능하다.
함수의 경우,
setGood((current)=> current, ...array)
current는 현재 state에 보내지게 되고 현재 state를 계산하거나
새로운 state를 만드는데 사용할 수 있게 된다. 위의 예제는
현재 good 을 받아와 새로운 state로 return 한다.

map(f, index)
: 하나의 array안에 있는 item을 내가 원하는 무엇으로 바꿔주는 역할. (예전 array를 변형)
첫 번 째 argument로 현재 item을 가져올 수 있음.
베열내의 element들을 바꾸고 싶거나, 새로운 array를 가지고 싶을 때 사용
f함수는 배열 내의 모든 element에 적용된다.map이 리턴되면 array에 새로운 값이 들어간다. 배열 내의 element 수만큼 f함수가 실행된다.
Array.map((item)=>item.toUpperCase());
(기존 배열이 대문자로 바뀜.)