[useState 상태 관리]숫자 증가 감소 그리기

jsx 문법 배워서 그림 그리기

---

왜 return 안에를 html 영역이라고 안 부르는가?

- 중괄호를 자바스크립트로 바인딩 할 수 있어서

---

js 안에서 map을 사용할 때는 중괄호로 한 번 묶지만 html 코드가 들어오면 다시 중괄호가 들어와야 한다

{users.map((user) => <div>{user.username}</div>)}

 

---

add란 이벤트 함수를 만들 때

(값만 바꾼다고 그림이 다시 그려지진 않는다)

1. 데이터를 변경해야 한다

2. app이 재실행 되어야 한다

3. num은 지역변수로 관리하면 답이 안 나온다.

 

일반적인 데이터 말고 화면이 변경되어야 하는 데이터 -> 이런 애들을 상태라고 함(state)

상태가 변경되면 App이란 함수가 재실행 되어야 함

 

 

userState라는 함수를 사용하면 상태를 관리할 수 있다. 

바꿀 때는 setNum을 호출해서 바꿔야 한다. 이러면 데이터가 바뀌면서 App함수가 재실행 된다.

이러면 표시된 부분이 모두 재실행 된다. 원하는 부분만 그림을 다시 그리고 싶으면 분리해서 그려야 한다 (jsx 사용해서)

 

const(상수)는 최초에 메모리에 로드되면 App이 재실행 되어도 무시하고 넘어간다.