"state가 바뀌면 리렌더링이 일어난다"
modifier함수로 count 데이터를 업데이트 후
↓
컴포넌트 전체를 재생성(리렌더링)해 화면에 노출
const [counter, modifier] = React.useState( );
const [ 현재값 , 함수 ] = React.useState(0 //초기값 0);
└>현재 value를 수정(modify)하고 컴포넌트를 새로고침한다1. 어디에 데이터를 담으면 되는가? → 배열에!
useState의 결과값 = 배열
하지만 배열 상태 그대로 사용하는 건 보기 불편하잖아
그러니까 순서를 뒤집어라!
2. useState의 modifier 함수
데이터를 업데이트 후 자동으로 리렌더링하는 modifier 함수
① 변수를 컴포넌트에 연결하고,
② 변수에 데이터를 답음
③ modifier 함수 → 데이터 값을 바꿈(업데이트)
④ 컴포넌트 리렌더링
⑤ 리렌더링된 새로운 data를 변수에 집어넣음
+) state를 바꾸는 방법 → 함수 전달!
현재 state를 가지고 다음 state를 계산하는 함수 삽입
3. input 태그를 삽입해 사용자로부터 입력을 얻어내는 법
input의 value에 state를 연결
→ 사용자가 input 값을 입력할 때마다, 이 value를 업데이트 시킴!
input에 변화(=사용자입력)가 생기면, state를 업데이트 해야함
→ 인풋에 변화가 생기면 onChange(≒이벤트리스너) 함수를 실행
→ 인풋이 스스로 업데이트를 하는 셈!
즉,
① onChange가 event(변화)를 들음
② event(변화)가 발생했을 때, onChange 함수가 event.target.value 값을 업데이트 하고
③ 그 값을 화면에 보여줌
4. useState를 사용한 단위변환기 (분↔시간)
4-1) if문을 사용한 '전환(filp) 버튼' 만들기
4-2) filp 버튼 클릭 시, reset 기능도 함께 실행되도록
5. 단위변환기 2개를 삽입하고, 사용자가 선택하도록
컴포넌트 1개 : App (컴포넌트 2,3을 리렌더링하고 화면에 UI를 출력)
컴포넌트 2개 : 단위변환기 (분 ↔ 시간)
컴포넌트 3개 : 단위변환기 (Km ↔ Miles)
사용자가 (분↔시간)과 (Km ↔ Miles) 중, 어떤 컴포넌트를 골랐는지 아는 방법이 없을까?
→ select 태그 + if else문으로 가능!
