1. App.js 세팅
1-1. 타이머를 만들어보자
타이머 다 만들고 끝!이 아니라, "이걸 어떻게 쓰지?" 를 고민할 것
1-2. 값을 더해주는 addCount 함수 삽입
onClick = { addCount 함수 }
+) 매개인자 e를 사용하는 법
console.log( e.target )
1-3. querySelector로 < h1 > 잡아내기
addCount 함수의 매개인자( num )
querySelector로 < h1 > 잡아내서 = num 집어넣기;
1-4. 화살표 함수
매개인자를 받지 않는 화살표 함수로 계속해보자
초기값을 10으로 지정한다면?
1-5. 화살표 함수, 컴포넌트 안으로 이동
2. useState
└> 막 변화 감지하고, 하나하나 렌더링하려고 난리남
이 때, useEffect가 "기다려~ 참아~" 한 다음, 한꺼번에 렌더링!
2-1. React 임포트
2-2. useState 함수 A
2-2-1) 초기값 10
2-2-2) [ count변수, updateCount 함수 ]
왜 const ?
- 전용 메서드인 updateCount 함수로 count 변수를 바꾼 다음, 화면을 재렌더링
- 즉, 처음부터 다시! 이기 때문에 let이 아닌 const !
ex.구글맵 / = 비동기. 데이터가 오는 족족! 그 부분만 변화시킴
2-3. useState 함수 B
2-3-1) 버튼 누르면 updateCount 함수가 (count + 1);
2-3-2) h1에 +1된 count 집어넣기
2-4. 하나씩 빼기 버튼 & 추가하기 버튼
2-4-1) 함수 2개 x 각각 버튼 연결
- addCount 함수 : updateCount( count + 1 );
- removeCount 함수 : updateCount( count - 1 );
각각 버튼에 연결
2-4-2) 함수 1개 x if-else문
