[리액트] State

ReactJS로 영화 웹 서비스 만들기
https://nomadcoders.co/react-for-beginners/lobby
인강을 수강하며 정리한 글 입니다.

useState

리액트는 자바스크립트를 먼저 만들고 그것을 html에 연결시킴

리액트에서 자동으로 리렌더링을 시켜주는 함수가 있음
그것이 바로 useState(“디폴트값”);

Const [counter,setCounter] =useState(0);

counter라는 변수가 선언되었고 초기값이 0임 그리고 setCounter를 이용해 counter의 값을 변경시킬 수 있고 자동으로 리랜더링을 해주어 UI에 적용시켜줌.

SetCounter(counter+1); 

이런식으로 작성하게 되면

counter=counter+1;

이 되는것

만약 우리가 현재 값을 가지고 계산을 해야한다면

setCounter(current => current +1);

위와 같이 modifier에 함수를 넣을 수 있음 이런식으로 하는 것이 더 안전하다고 함.

useState는 array를 제공 첫번째 인자는 변수, 두번째 인자는 변수 값을 변경시킬수 있는 modifier

사용자가 다른 값을 입력할 때마다 state를 업데이트 하고 싶어함

onChange = () => {
	console.log(event);
}

onChange={onChange} 
//앞의 onChange는 html 태그, 뒤에 onChange는 내가 선언한 함수

콘솔에 이벤트를 찍어서 input 값을 변경시켜 보면 Synthetic Event가 뜸

리액트가 가짜 이벤트를 발생시키는 것
Native event를 보면 target이 있고 target안에는 무수히 많은 값이 있는데 우리가 사용하고 싶은것은 value 이것이 우리가 원하는 변하는 값

onChange = () => {
	console.log(event.target.log);
}

사용자가 입력함에 따라 달라지는 value 값을 콘솔로 확인할 수 있다.