[React] 리액트 이벤트 핸들러

 

🎯 이벤트 핸들러

• 바닐라 JS -> on{event} / addEventListener
• React -> on{Event}
  • 카멜 표기법으로 작성

 

const rootElement = document.getElementById('root');
const element = (
    <button 
        onClick={ () => alert("pressed")}
        onMouseOut={ () => alert("Bye")}
    >
        Press
    </button>
);

ReactDOM.render(element, rootElement);

 

함수를 안에 넣어줄 수 있고 밖으로 뺄 수도 있다.

const rootElement = document.getElementById('root');

const handleClick = () => alert("pressed")
const handleMouseOut = () => alert("Bye")

const element = (
    <button onClick={handleClick} onMouseOut={handleMouseOut}>
        Press
    </button>
);

ReactDOM.render(element, rootElement);

 

📝 간단한 검색창 만들어보기

• 조건
  • input, button
  • onChange / onClick
  • 전역 변수

const rootElement = document.getElementById('root');

const state = { keyword: "", typing: false, result: ""};

const App = () => {
    function handleChange() {
        setState({ keyword: event.target.value, typing: true })
    }

    function handleClick() {
        setState({
            typing: false,
            result: `we find results of ${state.keyword}`
        });
    }

    return (
        <>
            <input onChange={handleChange}/>
            <button onClick={handleClick}>search</button>
            <p>{state.typing ? `Looking for ${state.keyword}...` :  state.result}</p>
        </>    
    )
};

// 전역 상태의 state.keyword를 어떻게 update 해줄 수 있을까?
function setState(newState) {
    Object.assign(state, newState); //이전 객체를 새로운 객체로 덮어쓰기
    render(); // 리액트는 불변객체이기 한 번 그려주고 계속 그려주는 게 아니다. 그래서 계속 그려줄 수 있게 함수로 빼놓고 수정될 때마다 렌더링을 실행시킨다.
}

function render() {
    ReactDOM.render(<App />, rootElement);
}

render(); // 최초 실행

• 리액트는 불변 객체이기 계속 렌더링 해줄 수 있게 함수로 만들고 수정될 때마다 실행시켜 렌더링.
• Object.assign는 새로운 내용이면 덮어쓰기
• typing: true면 Looking for ${state.keyword}..., false(클릭한 경우) 면 state.result

🏷 요약

• React에서 이벤트 핸들러는 카멜 케이스로 작성
  • React -> on{Event}
• Object.assign -> 객체 내용 복사
  • 다른 부분이 있으면 덮어쓰기
• 전역 변수 변경 -> ReactDOM.render
  • 계속 변경하기 위해서 함수로 만들고 setState가 실행될 때마다 render()실행하여 렌더링