Section 4. useState

⭐️ state가 이전 상태에 의존하고 있는 경우

state를 업데이트 하려고 할 때 이전 상태에 의존하고 있으면 그 내용이 대체될 수 있으므로 이전 상태를 유지하면서 바뀐 부분만 수정되게 해야 한다.

두 가지 방식이 있는데 두 번째 방식이 더 좋다.
항상 최신 상태의 스냅샷에서 작업할 수 있도록 하는 좀 더 안전한 방법이다.

const titleChangeHandler = (e) => {
  // 방식 1
  setUserInpit({
  	...userInput, // 이전 상태
    enteredTitle: event.target.value // 수정할 부분
  });
  // 방식 2 : 함수 형태로 쓰기
  setUserInput((prevState) => {
   	return {...prevState, enteredTitle: event.target.value}; 
  })
}

참고

입력창마다 state를 만들지 않고 객체로 묶어 하나의 state로 관리해도 된다.(선택은 자유)

const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const [input3, setInput3] = useState('');

const [input, setInput] = useState({
	input1 : '',
    input2 : '',
    input3 : '',
});

퀴즈

onClick과 같은 이벤트 리스너 프로퍼티에는 어떤 값을 전달해야 하나요?

실행될 함수의 “포인터”를 onClick 등의 값으로 전달해야 합니다. 그러면 이벤트가 발생했을 때 “사용자를 대신하여” React가 함수를 실행합니다.

어떻게 하면 컴포넌트 중 하나에서 부모 컴포넌트, 즉 상위 수준으로 통신할 수 있나요?

프로퍼티를 통해 함수를 받아들이고 이를 하위 수준(자식) 컴포넌트 내부로부터 호출하고 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거할 수 있다.

JavaScript에서 함수는 단순한 객체(일반 값)이므로 프로퍼티를 통해 값을 컴포넌트에 전달할 수 있습니다. 그리고 컴포넌트가 해당 함수를 호출하면 함수가 실행됩니다. 이런 식으로 부모 컴포넌트에 정의된 함수를 자식 컴포넌트 내부에서 트리거할 수 있습니다.

변경 및 사용에 일반 JS 변수 대신 추가적인 “상태” 개념이 필요한 이유는 무엇인가요?

표준 JS 변수는 React 컴포넌트를 재평가하지 않기 때문이다.
React는 일부 변숫값의 변경 여부에 별 관심이 없습니다. 컴포넌트 함수를 재평가하지도 않죠. 등록된 상태 값(useState를 통해 생성)이 변경되었을 때만 재평가가 이루어집니다.

useState에 관한 설명으로 옳지 않은 것은 무엇인가요?

useState를 다시 호출하면 상태 값이 업데이트된다.
-> useState를 다시 호출하면 새로운 상태가 생성될 뿐입니다.