[노마드/ReactJS 영화 웹 만들기] - Ch02 | 3. Events in React

서근

2023. 1. 15. 14:23

QUOTE THE DAY

ReactJS로 영화 웹 만들기

자바스크립트에서는 마우스와 같이 어떠한 이벤트를 주기 위해선 많은 단계를 거쳐야 한다. addEventListener를 사용하여 간단하게 보자면 아래와 같다.

<body>
    <h2>안녕하세요</h2>
    <button id="btn">클릭</button>

    <script>
        const main_title = document.querySelector('h2');
        const btn = document.getElementById('btn');
        function handleClick() {
            console.log('클릭 되었습니다.');
        }
        btn.addEventListener('click', handleClick);
        main_title.addEventListener('mouseover', (event) => {
            console.log('타이틀에 마우스가 감지 되었습니다.');
        });
    </script>
</body>

클릭 이벤트

위 바닐라 JS를 React로 바꿔주면 더욱 간편하게 이벤트를 적용시킬 수 있다.

const를 render 하고 싶은 경우 div를 만들어준다.

그리고 React.createElement("div", null, \[title, btn\]); 와 같은 배열을 만들어서 const를 넣어준다.

const container = React.createElement('div', null, [title, btn]);

이제 버튼이나 태그 안 property에 eventListener 넣는 것도 가능하다.

-ReactJS

컴포넌트는 반드시 uppercase로 작성

const Title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요');
const Btn = React.createElement(
        'button',
        {
            //JS의 addEventListener() 대신 React에서는 onClick과 같은 이벤트를 사용한다.
            //다양한 React EventListener: https://ko.reactjs.org/docs/events.html
            onClick: () => console.log('클릭 되었습니다.'),
            style: { border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' },
        },
        '클릭'
    );

이 코드를 상단 바닐라JS 코드와 비교해 보면 말도 안 되게 간단하게 코드가 작성되는 것을 알 수 있다.

TIP

콘솔에 안 뜨는 경우 event listener가 소문자, 대문자로 잘 적혀있는지 확인해 보아야 한다.

Uncaught ReferenceError: ReactDom is not defined 나올경우 ReactDOM(DOM 대문자)으로 했는지 확인!

전체 코드

<body>
    <div id="root"></div>
</body>

<script>
    const root = document.getElementById('root');

    const Title = React.createElement('h2', { id: 'main-title', onMouseOver: () => console.log('타이틀에 마우스가 감지 되었습니다.') }, '안녕하세요');
    const Btn = React.createElement(
        'button',
        {
            //JS의 addEventListener() 대신 React에서는 onClick과 같은 이벤트를 사용한다.
            //다양한 React EventListener: https://ko.reactjs.org/docs/events.html
            onClick: () => console.log('클릭 되었습니다.'),
            style: { border: 'none', backgroundColor: 'blue', padding: '0.5rem 1rem', borderRadius: '1rem', color: 'white' },
        },
        '클릭'
    );
    //container를 만들어 span과 btn과 같은 태그를 배열로 묶어 render해준다.
    const container = React.createElement('div', null, [Title, Btn]);
    ReactDOM.render(container, root);
</script>

React 합성 이벤트 종류

다양한 이벤트 리스터 종류에 대해 알아보고 싶으면 아래 링크를 클릭해 확인해 볼 수 있다.

합성 이벤트(SyntheticEvent) – React

A JavaScript library for building user interfaces

ko.reactjs.org

깃허브 자료

GitHub - Seogun95/Movie-web-servic-ReactJS: ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩

ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩. Contribute to Seogun95/Movie-web-servic-ReactJS development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지

'FRONT-END > ReactJS Clone project' 카테고리의 다른 글

[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 1~2. setState (0)	2023.01.26
[노마드/ReactJS 영화 웹 만들기] - Ch03 \| 0. State? (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 6. 컴포넌트 사용 (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 5. JSX 사용법 (0)	2023.01.15
[노마드/ReactJS 영화 웹 만들기] - Ch02 \| 2. 리액트 설정 및 기초 (0)	2023.01.15