바닐라자바스크립트로는...
1) HTML을 만들고
2) Javascript에서 가져옴.
3) event를 감지하고
4) 데이터를 업데이트한다.
5) HTML을 업데이트 한다.
Our first React Element(수정중)
React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다는 것이다.
React JS는 어플리케이션이 아주 interactive하도록 만들어주는 library
react-dom은 library 또는 package 이고 모든 react element들을 html body에 둘 수 있도록 해줌
render : react element를 가지고 html로 만들어 배치한다.(즉 사용자에게 보여준다.)
첫번째 argument: 태그(여기선 span)
두번째 argument: property(여기선 {id: "sexy-span"})
JSX
Bebel : 코드를 변환해줌. JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는것. 브라우저는 JSX를 모르기때문
USESTATE
렌더링이되기때문에 실제로 브라우저에서 봤을때는 숫자가 계속해서 올라가는것처럼 보인다.
React.js어플 내에서 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 최고의 방법을 배워보려고해
React.js가 여러분이 원하는 리렌더링을 어떻게 도와주는지 알아볼거야 그 이유는 우리가 만약 사용자에게 업데이트된걸 보여주고싶으면 새로운 정보를 가지고 컴포넌트를 리렌더링해줘야하기 때문. 그래서 이번 강의에서 우리가 하려는건, 전에 시작했던 부분으로 돌아가서 리렌더링을 유발시키기 위해서 React.js 가진 기능을 배워보자.(전에는 변수를 선언해서 counter를 실행했지. 이렇게 해도 괜찮긴 하지만 리액트에는 또 좋은 기능이있다구)
이제 react어플리케이션을 다룰때, 어디에 데이터를 담으면 되는이 알려주고싶어 
아무리 클릭해도 뭐 올라가는것도 없는, 토탈 클릭이 0인 노잼 컴포넌트가 된다.
보이듯이 React.useState()를 활용해준 변수 data는 콘솔로그를 찍어보면 undefined와 함수를 가지고 있는 배열로 반환한다.
여기서 기억해야하는것
> undefined가 data이고, f는 data를 바꿀때 사용하는 함수이다.
useState는 초기값도 줄 수 있어. 초기값을 한번 0으로 준다면..
const data = React.useState(0) console.log(data) // [0,f] 초기값인 0과 이 data의 값을 바꿀 수 있는 함수가 들어있는 배열을 얻었다.useState는 구조분해할당에서 가져온것임
button을 클릭하면 onClick이벤트가 발생해서 modifier함수가 실행하게 되고 react.js가 알아서 리렌더링 된것이다.
사실 setCounter함수는 함수이니까 배출되는 값이 매번 바뀔거야..그러니 상태가 계속 바뀔 수 있지..wow
수정함수를 가지고 state를 변경할떄 컴포넌트가 재생성됨. 새로운 값을 가지고 리렌더링이 되는것이다. 데이터를 바꿀때마다 컴포넌트를 리렌더링하고 UI를 refresh하는거지
가장 중요한건 state가 바뀌면 리렌더링이 일어난다는것이다.
다시한번 가장 중요한건 state가 바뀌면 리액트가 컴포넌트를 리렌더링(리프레시)해줘
👽State function
만약 이전 값을 바탕으로 현재 값을 설정하고 싶다면... setCounter(counter+1) 이부분을 다르게 해줄 수 있어
(사실 이 방법은 좋은 방법이 아니야 왜냐면 counter은 다른 곳에서 update될 수 있거든... 아래방법이 좀 더 안전하다. 왜냐면 리액트가 현재 current가 현재상태인걸 나타내기때문(현재 값을 바탕으로 나올 수 있다)
setCounter((current) => current + 1)
즉 현재 state를 바탕으로 다음 state를 계산해 내고 싶다면, 위와 같이 사용하자.
Inputs and State
- html
- jsx
--- 이제는
const onChange = (event) => {
console.log(event)
}하면 아래와 같은 event가 콘솔로그에 찍힌다. 이것은 ..뭐랄까.. 가짜 event발생시킨다. syntheticBaseEvent 은 event를 최적화 시킨다. 하지만 여러분이 원래의 event(native event)를 얻고 싶다면 
여기있다!
잘 이해가 안간다면 걱정하지말어. 그냥 syntheticBaseEvent에 target 이벤트들을 잘 보자.여기에 초점을 맞춰야하는겨..
따라서
const onChange = (event.target) => {
console.log(event.target)
}
const onChange = (event) => {
setMinutes(event.target.value)
}// 이걸하고 아래return에다가 보여주기위해 코드 좀 짬
State Practice part One
- onChange이벤트는 무언가를 업데이트하는 함수
<input>태그 안에 onChange이벤트를 지우면 input value값은 절대 변하지 않을것이다.
input 속성에 disabled를 사용한다면
이렇게 된다.
State Practice part two
flip-> 다시듣기
