리액트를 다루는 기술 4장 - 이벤트 핸들링

HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷

 

이벤트 사용 시 주의사항

1. 이벤트 이름은 camelCase로 작성

2. 이벤트에는 함수 형태의 값을 전달.

3. DOM 요소에만 이벤트 설정 가능

 div, button, input, from, span 등 DOM 요소에는 이벤트 설정 가능,
 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음

 하지만 전달 받은 props를 컴포넌트 배우 DOM 이벤트에 설정 가능

 

import React, {useState} from 'react';

function EventPractice () {
    const [text, setText] = useState('');

    const onChange = (e) =>{
        setText(e.target.value)
    }

    const onButton = () =>{
        console.log(text)
    }
    return (
        <div>
            <h1>이벤트 연습</h1>            
            <input  placeholder="입력" onChange = {onChange} value ={text}></input>
            <button onClick = {onButton}>로그</button>
        </div>
    )
}

export default EventPractice

const onChange = (e) =>{
    setText(e.target.value)
}

이벤트에 등록하는 함수에서 이벤트 객체 e를 파라미터로 받아서 사용 가능. 

이 객체의 e.target은 이벤트가 발생한 DOM인 input DOM을 가르킨다.

DOM의 value값을 조회하면 현재 input에 입력한 값이 무엇인지 알 수 있다.

 

input의 상태를 관리할 때는 input 태그의 value도 변경을 해줘야 한다.

그래야 상태가 바뀌었을 때 input의 내용도 업데이트 된다

 

여러 개의 input 상태를 관리하기

 

import React, {useState} from 'react';

function EventPractice () {
    const [inputs, setInputs] = useState({
        name : '',
        nickname: ''
    }); 

    const {name, nickname} = inputs;

    const onChange = (e) =>{
        const {value, name} = e.target;
        setInputs({
            ...inputs,
            [name] : value
        });
    };

    const onReset = () =>{
        setInputs({
            name : '',
            nickname: '',
        })
    }
    return (
        <div>
            <h1>이벤트 연습</h1>            
            <input  name = "name" placeholder="이름" onChange = {onChange}value = {name}></input><br />
            <input  name = "nickname" placeholder="닉네임" onChange = {onChange}value = {nickname}></input><br />
            <button onClick = {onReset}>초기화</button>
            <div>
                <b>값 :</b>
                {name} ({nickname})
            </div>
        </div>
    )
}

export default EventPractice

input의 개수가 여러 개 있을 때는 input에 name을 설정하고 이벤트가 발생했을 때 값을 참조하는 것이다.

useState에서는 문자열이 아닌 객체 형태의 상태를 관리.

 

리액트에서 객체 형태의 상태를 수정할 때는 새로운 객체를 만들어서 새로운 객체에 변화를 주고

이것을 상태에 사용해야 한다.

setInputs({
  ...inputs,
  [name] : value
});

... 문법은 객체의 내용을 모두 펼쳐 기존 객체를 복사. 

이런 작업을 "불변성을 지킨다" 고 한다. 불변성을 지켜줘야 컴포넌트에서 상태가 업데이트 됐음을 감지하고

필요한 리렌더링이 진행이 된다. 그리고 컴포넌트 업데이트 성능 최적화를 제대로 할 수 있게 된다.

 

기억할 것

리액트에서 객체를 업데이트 할 때는 기존 객체를 수정하는 것이 아닌

새로운 객체를 만들어서 새 객체에 변화를 주어야 한다.