#3 [2021 UPDATE] STATE - nomad coder

#3 [2021 UPDATE] STATE

#3.0 Understanding State

바뀌는 데이터

페이지를 로드했을 경우만 렌더링 되고, counter 업데이트 되지 않음

counter 렌더링 추가 - 전체 영역을 렌더링 하는게 아니라 counter 부분만 업데이트 됨

 

https://nomadcoders.co/react-for-beginners/lectures/3265

All Courses – 노마드 코더 Nomad Coders

 

#3.1 setState part One

자동으로 리렌더링을 유발, 일으키는 방법

React.js가 우리가 원하는 부분 렌더링 처리

data를 담는 것과 업데이트 하는 방법

 

const data = React.useState(0);

 

 

console ===> [0, funcion]

0: data 초기값

1: data를 바꿀때 사용하는 함수

 

useState: 초기값 생성 가능

 

javascript 코드 사용

const food = ["tomato", "potato"]

 

const tomato = food[0];

const potato = food[1];

=> const [first, second] = food;

 

const [counter, modifier] = React.useState(0);

{counter}, {modifier} 변수 사용 가능

 

 

#3.2 setState part Two

const [counter, setCounter] = React.useState(0);

const onClick = () => {
	setCounter(counter + 1);
}

 

setCounter 함수는 그 값으로 업데이트 하고 리렌더링  자동으로 발생

 

useState 함수는 데이터 건내주고, 함수도 함께 바꿔주고, 데이터 값이 바뀌고 컴포넌트도 동시에 리렌더링 => 업데이트

 

React 는 업데이트 사이사이마다, 정확히 어떤 것이 업데이트 됐는지 파악해서 HTML에 그 부분만 고침

 

#3.3 Recap

const [counter, setCounter] = React.useState();

counter는 현재의 값 state 이며, setCounter는 이벤트 발생 시 변화를 주는 부분이어서 이후 counter로 다시 저장된다

실제로 바뀌는 값만 판단해서 자동으로 리렌더링

#3.4 State Functions

state를 세팅하는 데는 2가지 방법이 있다.

1. 직접 설정: setState(state +1)
-> 현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우

2. 함수 전달: setState(state => state +1)
(함수의 첫번째 인자는 현재 state 임
setState안에 function 들어가도 됨)
state가 확실히 현재 값이라는 것을 보장함
예상치 못한 업데이트가 어디선가 일어나도 혼동을 방지해줌
-> 현재 state를 바탕으로 다음 state를 계산 해주고 싶은 경우

 

#3.5 Inputs and State

JSX는 HTML과 유사하지만 다른 점이 몇가지 존재함
1. class(javascript) -> className (JSX)
2. for -> htmlFor
3. value=‘’ -> value

React 에서의 event는 가짜 event SyntheticBaseEvent 발생되는데 event 최적화 시킴
기존 javascript의 event는 nativeEvent

target은 방금 바뀐 input 의미
event.target.value

데이터를 업데이트 할 수 있는 방법은 setState 함수 사용

const onChange = (event) => {
setMinutes(event.target.value);
};

 

#3.6 State Practice part One

input 값을 외부에서도 수정하기 위해서

value={minutes} 사용

 

#3.7 State Practice part Two

const [flipped, setFlipped] = React.useState(false);

const onFlip = () => setFlipped(current => !current);
// const onFlip = () => setFlipped(!filped);

<input disabled={flipped}>

 

prop 전달

state 2개 사용

 

const [amount, setAmount] = React.useState(0);

const onFlip = () => {
reset();
setFlipped((current) => !current);
}

<input id="minutes" value={flipped ? amount * 60 : amount} />
<input id="hours" value={flipped ? amount : Math.round(amount / 60)} />

 

#3.8 Recap

 

<button onClick={onInvert}>{inverted ? "Turn Back": "Invert"}</button>

 

state 세팅하는 방법 알아보는 시간

 

#3.9 Final Practice and Recap

 

리렌더링 조건

 

1. props 바뀔 때

2. state가 바뀔 때

3. 부모 컴포넌트가 리렌더링 될 때

 

{ index === "0" ? <MinutesToHours /> : null }
{ index === "1" ? <KmToMiles /> : null }