ReactJS_스터디 3일차 (23/02/08)

📝 ReactJS로 영화 웹 서비스 만들기 : From #3.4 to #3.9

state function 에 대해 이해합니다.

🎯 state를 갱신하는 2가지 방법

const [state, setState] = React.useState(0);
const onClickPlus = () => {
	setState(state + 1);
}

state가 다른 곳에서 업데이트될 위험이 있습니다. 다른곳에서 업데이트되어 예상하던 값이 아닐 수 도 있습니다. => 버그
이전 단계의 state를 이용해서 현재 state를 바꾸려했지만 -> 예상과 다른 결과

state를 변경하는 2가지 방법
1) setState를 이용하여 state를 새값으로 변경
2) 이전값을 이용해 현재값을 도출하기 -> counter + 1 (함수로 새값을 전달하기)

• 이전값을 전제로 현재값을 설정하기위해서...
• setState안에 함수를 넣어서 이 문제를 해결하기

setState(arg1 => arg2);

arg1: 현재값
arg2: return하는 새로운값

const [state, setState] = React.useState(0);
setState(courrent => current +1);
//setState(counter + 1);
//이전값을 이용해서 현재값을 도출하는 안전한 방법

-> reactJS가 current가 확실히 현재값이라는것을 보장한다.
예상치못한 업데이트가 어디선가 일어나도, 그것이 혼동을 주지않는다.
언제나 현재 state를 얻을수있도록 해준다.

JSX안에서 Input의 state 이용하기

ReactJS안에서 form 요소를 다루기

<label id="minutes">Minutes</label>
<input htmlFor="minutes" placeholder="put minutes" type="number" />

label의 for는 JS용어이며 ex)class -> className, jsx의 htmlFor는 같은 기능입니다.

JSX와 Html의 차이점

input value의 값을 state로 사용하는 방법 -> target

uncontrolled

• input의 value는 통제할수없다. -> state를 이용해야한다.

controlled input

• 통제되는 input value

이것을 컨트롤하기위한 방법
syntheticBaseEvent(합성 이벤트)

• event에 접근할 수 있다. target -> 방금 바뀐 input -> value
• 방금 바뀐 input의 value를 가져와라
• 그저 해야할일은 어떤 변화가 있었나 쫓는것

input의 값을 바탕으로 다른 컴포넌트를 업데이트해주기

state인 minutes를 값으로 리스닝하는 input

	const [minutes, setMinutes] = React.useState(0);

<label HTMLfor="minutes"></label>
<input id="minutes" type="number" placeholder="put minutes" value={minutes} />