React는 객체내의 동적 변경을 지원하기 위해 상태, State라는 것을 지원합니다.

import React, {useState} from "react";

기존의 React를 import 하는 구문에 {useState} 문구를 추가하는 것으로, 해당 JS 파일에서는 State 객체를 사용 할 밑작업(?)은 모두 완료가 되는 셈이다.

(그런데 왜 useState 객체는 앞 뒤를 중괄호로 감싸서 불러오는거지?..)

실제 State객체를 만들기 위해서는

const [stateValue, setStateValue] = useState(initialStateValue);

위의 변수를 선언 / 사용하면 되는데, 기본적으로 React의 모든 State객체는 변수 객체 하나와 해당 변수의 Setter 함수가 페어로 생성이 되게 된다.

추가로, useState를 최초로 생성 할 때, 매개변수로 해당 변수 객체의 초기값을 설정 할 수 있다.

또한 Flutter와 유사하게 상위(부모) 객체에서 하위(자식) 객체로 상태를 변경 할 수 있는 함수를 넘겨가며, 하위(자식) 객체에서도 상위(부모) 객체에서의 State 접근이 가능하다.

import React, {useState} from "react";

import "./ChildComponent.js";

const ParentComponent = () => {
	const [parentValue, setParentValue] = useState('');

	return (
		<div>
			<ChildComponent onChangeState={setParentValue}/>
		</div>
	);
}

export default ParentComponent;

import React, {useState} from "react";

const ChildComponent = (props) => {
	const [childValue, setChildValue] = useState('initValue');

	const onChangeHandler = (event) => {
		setChildValue(event.target.value)
		props.onChangeState(event.target.value)
	}

	return (
		<div>
			<input type="text" value={childValue} onChanged={onChangeHandler}
		</div>
	);
}

export default ChildComponent;

초기값을 활용하여 input 등의 태그에 State로 관리되는 변수를 넣으면, 초기값을 화면에 표출하면서 관리 할 수 있는 기능들이 있고, 특히 기존 상태값을 유지하면서 State관리가 필요한 경우 '...' split 연산자 등을 활용하여 관리하면 값에 대한 손실 / 변조 등에 위험에서 약간은 벗어 날 수 있다.

또한 React에서 addEventListener 등으로 별도의 이벤트 리스너를 추가하여 사용하는 것은 지양하며, React내 props을 활용한 EventHandler를 적극 활용 하는 것이 바람직하다.

(단, EventHandler를 전달 할 때, 함수값을 넘기는 것이 아닌 해당 함수의 포인터 값을 옮기는 것임을 명심!, 생각보다 예시 치면서 많이 한 실수)