[NomadCoders]ReactJS로 영화 웹 서비스 만들기 - State
STATE
3.0 Understanding State
-
state는 data가 저장되는 곳
-
만들고 싶은 기능: button 클릭 횟수를 세는 counter
-
(구린) 방법 1
- let counter로 변수 선언
- countUP 함수
- button에 event listener를 달아 countUp 함수와 함께 호출
=> counter 기능은 수행하지만, UI는 update 되지 않음
-
-
counter 값이 계속 update 되려면?
- (구린) 방법 1
- countUp 함수가 호출되면, rerender 시행
- 하지만 값이 바뀔 때마다 rendering 되는 것은 좋은 방법이 아님
- (구린) 방법 1
-
React의 장점!
- Vanilla Js와 달리, rendering 할 때 값이 달라지는 부분만 update 됨
- 이러한 기능은 UI를 interactive 할 수 있게 만드는데 큰 강점을 가짐 ***
- 추가적인 내용 - 일반 javascript를 쓴 browser는 노드 정보가 바뀔 때마다 노드 트리를 처음부터 다시 생성 - react는 가상 DOM을 써서 우리 시야에 보이는 부분만 수정해서 보여주고, 모든 update가 끝나면 일괄로 합쳐 실제 DOM으로 전달한다고 함 브라우저 렌더링 과정, Virtual DOM 참고 자료
3.1 setState part One ~ 3.2 setState part Two
-
useState()
- react에서 기본적으로 지원하는 Hooks 중 하나
- array 형태를 반환 [data, f]
- data: state 변수
-
f: data를 바꿀 때 사용하는 함수 (주로 set변수명 으로 작성함)
- data 를 update 하고 rerendering 수행
- 함수의 첫번째 인자는 현재 data (state) 변수
(state 와 UI update를 한번에)
3.4 State Functions
- 3.3 은 Recap 입니다.
const [counter, setCounter] = React.useState(0);
setCounter(counter + 1);
- 위와 같이 setCounter를 작성했을 때 문제점
- counter 변수는 다른 곳에서 update 될 수 있어 안정적이지 않음
const [counter, setCounter] = React.useState(0);
setCounter((current) => current + 1);
- 따라서 위 코드와 같이 작성하는 것이 안정적이다.
- setCounter 함수의 첫번째 인자는 counter 변수 (state 변수)
3.5 Inputs and State
-
만들어 볼 것: 분 -> 시 변환기
-
HTML에서는 input과 label을 이런식으로 사용함
function App() {
return (
<div>
<h1>Super Converter</h1>
<label for="minutes">Minutes</label>
<input id="minutes" placeholder="Minutes" type="number" />
<label for="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
}
- input에 id를 부여하고, label에서 for을 이용하여 그 id를 가져옴
- jsx에서는 이렇게 사용하지 않음.
- minutes에 입력이 들어오는 것을 감지
- input onChange에 대한 event listener 등록
- input value를 state 변수로 설정
- 코드 일부
const [minutes, setMinutes] = React.useState();
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>;
- minutes에 들어온 내용이 뭔지 알아내기
- event의 target 값을 통해 불러올 수 있음
const onChange = (event) => {
setMinutes(event.target.value);
};
3.6 State Practice part One ~ 3.7 State Practice part Two
-
input 에 입력한 값을 가져오는 방법
- input의 value에 state 변수 설정
-
input의 event를 감지하는 listener 할당
- event listener는 event의 target 값을 통해 입력한 내용을 가져온다
=> state update
-
분 <-> 시간 양방향 변환기를 만드려면?
-
flip을 위한 boolean 값을 담는 state 변수를 선언하면 됨
-
예시
value={flipped ? amount * 60 : amount}
3.9 Final Practice and Recap
-
3.8은 Recap입니다.
-
(시-분 변환기), (km - mile 변환기), … 등 여러가지 변환기를 버튼을 통해 관리하고 싶음
- 해당 버튼을 누르면 해당 계산기가 나타나는 형태
=> Component 안에 또 다른 Component rendering 하기
- 부모 component: App
-
자식 component: MinutesToHours, kmToMile, …
- 구현 방법
- select 의 index를 관리하는 state 변수 선언
- 해당 index에 해당하는 component만 rendering
- 코드 일부
const [index, setIndex] = React.useState("0"); const onSelect = (event) => { setIndex(event.target.value); }; <select value={index} name="converter" onChange={onSelect}> {index === "0" ? <MinutesToHours /> : null}
- {} 를 씌우면 js 로 코딩할 수 있다.
-