이벤트 처리

JSX는 이벤트를 처리할 때 DOM 방식과 다르게 함수로 이벤트 처리함수(이벤트 핸들러; Event handler)를 전달한다.

<button onClick={handleEvent}></button>

onChange

<input> <textarea> <select> 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용한다. 이렇게 변경되는 값은 컴포넌트의 state로 관리한다.

function NameForm() {
	const [username, setUsername] = useState("")
    
    const handleChange = (event) => {
   		setUsername(event.target.value)
	}
    return (
		<div>
        	<input value={username} onChange={handleChange} />
		</div>
	)
}

1. <input>의 onChange 속성을 이용해 <input>에 있는 텍스트가 변할 때마다 onChange 이벤트가 발생하며 설정한handleChange 이벤트 함수를 실행한다.
2. useState로 설정한 setUsername 함수를 이용해 username 상태를 바꿔준다.
3. <input>의 value를 username으로 속성값을 주면 바뀌는 username의 state를 볼 수 있다.

onClick

클릭이라는 행동을 하였을 때 발생하는 이벤트.

function NameForm() {
  	const [name, setName] = useState("");
  	
  	const handleChange = (event) => {
		setName(event.target.value)
    }
	return (
    	<div>
        	<input value={name} onChange={handleChange}></input>
        	<button onClick={() => alert(name)}>Button</button>
    	</div>
	)
}

여기서 주의해야할 점은 onClick에 그냥 alert(name)을 넣게 되면 컴포넌트가 렌더링될 때, 실행되어 버린다. onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야 한다.

React 데이터 흐름

React는 컴포넌트 기반이기 때문에 앱을 만들 때, 상향식(bottom-up)으로 앱으로 만든다.
컴포넌트들도 HTML이나 DOM 같이 트리구조를 가지고 있다.
컴포넌트들은 외부에서 props를 이용해 데이터를 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.
데이터를 전달하는 주체는 부모 컴포넌트. 받는 주체는 자식 컴포넌트. 데이터 흐름은 부모에서 자식으로 내려가는 하향식이다. 단방향 데이터 흐름(one-way data flow)이다. 상향식으로는 전달할 수는 없다.