[week_08] React 기초 Ⅱ (1) 이벤트

1. 이벤트(event)

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 유저의 행동에 의해 발생할 수도 있고, 개발자가 의도한 로직에 의해 발생할 수도 있다. 이렇게 발생된 이벤트를 자바스크립트를 이용해서 대응할 수 있다. 이벤트 핸들러 함수를 사용해서 다양한 로직을 처리하고, 그 결과를 사용자에게 추력해서 알릴 수 있다.

1-1. 이벤트 처리(핸들링) 방법

const App = () => {
	const handleChange = (event) => {
    	console.log("입력값 : " + event.target.value);
    }
    return (
    	<div>
        	<input onChange={handleChange} />
        </div>
    );
};

DOM Element의 경우, 핸들링 함수에 이벤트 object를 매개변수로 전달한다. 이벤트 object를 활용해서 이벤트 발생 원인이나, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있다.

onClick, onChange, onKeyDown, onKeyUp, onKeyPress, onDoubleClick, onFocus, onBlur, onSubmit 등의 DOM 이벤트가 있다.

 

2. 컴포넌트 내 이벤트 처리

2-1. DOM Input 값을 State에 저장하기

const App = () => {
	const [inputValue, setInputValue] = useState("defaultValue");
    
    const handleChange = (event) => {
    	setInputValue(event.target.value);
    }
    
    return (
    	<div>
        	<input onChange={handleChange} defalutValue={inputValue} />
            <br />
            입력한 값은: {inputValue}
        </div>
    );
}

event object의 target은 이벤트의 원인이 되는 Element를 가리킨다. 위 코드에서 event의 target은 input element이므로, 입력된 value를 가져와서 setState를 하고 있다.

2-2. 여러 Input 동시에 처리하기

const App = () => {
	const [user, setUser] = useState({ name: "민수", school: "엘리스대학교" });
    
    const handleChange = (event) => {
    	const { name, value } = event.target;
        const newUser = { ...user };
        newUser[name] = value;
        setUser(newUser);
    };
    
    return (
    	<div>
        	<input name="name" onChange={handleChange} value={user.name} />
            <br />
            <input name="school" onChange={handleChange} value={user.school} />
            <p>
            	{user.name}님은 {user.school}에 재학중입니다.
            </p>
        </div>
    );
};

target으로부터 name을 받아와서, 해당 name의 key에 해당하는 value를 변경하여 state에 반영한다.

 

3. 다른 컴포넌트로 이벤트 전달

3-1. 컴포넌트간 이벤트 전달하기

const MyForm = ({ onChange }) => {
	return (
    	<div>
        	<span>이름: </span>
            <input onChange={onChange} />
        </div>
    );
}

// ----------------------------------------------------

const App = () => {
	const [username, setUsername] = useState('');
    return (
    	<div>
        	<h1>{username}님 환영합니다.</h1>
            <MyForm onChange={(event) => {
            	setUsername(event.target.value);
            }}/>
        </div>
    );
}

사용자가 입력한 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 하는 경우, 위와 같이 이벤트를 Props로 전달해서 처리할 수 있다.

3-2. 커스텀 이벤트

const SOS = ({ onSOS }) => {
	const [count, setCount] = useState(0);
    
    const handleClick = () => {
    	if(count >= 2) {
        	onSOS();
        }
        setCount(count + 1);
    }
    return (
    	<button onCLick={handleClick}>세 번 누르면 긴급호출({count})</button>
    );
}

// ---------------------------------------------

const App = () => {
	return (
    	<div>
        	<SOS onSOS={() => { alert('긴급사태!') }}/>
        </div>
    );
}

단순히 DOM 이벤트를 활용하는 것을 넘어서 나만의 이벤트를 만들 수도 있다.

3-3. 이벤트 명명법

직접 이벤트를 만들 때에는 이름을 자유롭게 설정할 수 있다. 보통은 코드를 읽을 때 쉽고 빠르게 이해할 수 있도록 "on" + 동사 또는 "on" + 명사 + 동사 형태로 작성한다.

예) onClick, onButtonClick, onInputChange
핸들링 함수의 경우 ➡ "handle" + 동사 또는 "handle" + 명사 + 동사