#3.0 Understanding State
일반 변수선언해준것에 함수를 통해 값을 변화시킬 시
값은 변화하지만 UI를 새로고침하는 부분이 없기에
화면엔 기존 그대로의 값이 노출된다.
이를 보완하기위해 함수의 끝에 ReactDOM을 재렌더링 해주는 코드를넣어
돔을 다시 그린다. 이때 실제 dom과 가상dom을 비교헤 실제 값이 바뀐 부분만
재렌더링 해준다 -> react의 장점#3.1 setState part One
#3.0 에서 데이터의 변화가있을시 재렌더링하는 코드를 삽입하여 재렌더링을
했으나 굉장히 불편한 부분이있다 -> 데이터의 변화 시 항상 재렌더링 코드를 삽입하여야함
이런 번거로움을
useState로 해결 할 수 있다
useState는 React.js 어플 내에서 데이터를 보관하고 자동으로 렌더링을 할 수있게 끔
도와준다
useState는 생성시 [값,f] 을 리턴한다
// f -> 해당 값을 변경할수있는 함수#3.2 setState part Two
let [counter, setCounter] = React.useState(1)
counter // 변수명
setCounter // 해당 변수 값을 변경시키는 함수
React.useState( ! ) // ! 초기값
useState를 생성하면 배열의 형태로 값,변경함수가 리턴되고
해당 변경함수로 데이터를 변경 시 재렌더링이 된다#3.3 Recap
state는 컴포넌트를 재렌더링시켜줌과 동시에 UI를 새로고침해준다
이때 return 문에 모든 값을 다 새로그리는것이 아닌 변경된 값만 그려준다#3.4 State Functions
setState(counter + 1) 사용 시 해당 counter 값이
다른곳에서 변경될 위험성을고려해
setCounter((current) => current + 1) set함수에 함수를 전달하여
데이터를 변경하는것을 지양한다#3.5 Inputs and State
jsx 내에 tag 자체 이벤트는 react에서 제공하는 event와 native event가 있다
input의 변경된 값을 원할시 event.target(변경된 input).value 를통해
값을 가져올 수 있다.#3.6 State Practice part One
#3.7 State Practice part Two
#3.8 Recap
#3.9 Final Practice and Recap
