useState?
**useState** = 자주 바뀌는 값 사용 + state값은 최상위 컴포넌트에 선언되어야 한다.
컴포넌트 만드는 법
1. function 만들고
return () 안에 html 담기
<함수명></함수명> 쓰기
** 주의점 아무데나 함수를 선언해선 안되고 다른 함수 밖에서 만들어야 한다.
useState
State 왜 생겼는가? 변수의 업데이트를 바로바로 ui에 적용 시켜주고 싶어서
+ 기존 자바스크립트에 innerHtml 등 너무 복잡한 걸 단순화 하고 싶어서
// 미션 버튼 누를 때 마다 1씩 증가 시키기
기본 문법
let [a숫자, b숫자수정] = useState(0); //a는 변수 개념, b는 이를 업데이트하는 함수 개념
사용법 :
<div>{a숫자}<div> // 화면 출력 : 0
<button onClick={더하기1}><button>
let 더하기1 = () => {
b숫자수정(a숫자+1)
}
State는 비동기적이다. 변화가 일어나면 다시 위에서 부터 읽어서 html을 그려주게 되는데
let count = 0 , count = count + 1 ==> 계속 0으로 초기화 되서 실행 시마다 값이 1임
useState(0) => 값을 저장해서 계속해서 늘어남
Array, Object 값 대입하기
<button onClick={()=>{
let copy = **[...글제목];**
copy[0] = '여자코트 추천';
제목변경(copy);
}}>글 수정</button>
/* 빡대가리식 정리 */
state가 array/object이면 독립적 카피본을 만들어 수정해야함
+
우선 1번으로 헷갈리는 점. 그런데 왜 화살표를
이용해가지고 기존 state를 변경 하지 않는거지?
공식 문서 : state로 저장 시 변경할 수 없도록 만들
어야 한다. 그래서 기존 배열을 복사 후 새 배열을
state로 두어 업데이트 해야 한다.