티스토리 뷰

차곡차곡/Frontend

[React] 이벤트 처리하기 / 토글 버튼 클릭에 따라 전구 켜기

p퐝유p 2022. 4. 17. 22:54

버튼의 초기값을 "ON" 세팅, useState를 이용해 버튼을 누를 때마다 버튼 내 value값 변경되게 해 보자.

-  Toggle 컴포넌트를 생성한다. 

-  isToggleOn 기본 값을 false로 설정한다.

-  click 이벤트 발생 시, setIsToggleOn 값은 그 반대의 값으로 입력하기 위해 앞에! 를 입력해 준다.

-  isToggleon에는 true나 false 값으로 인식된다. 

- 버튼 내에서는 true->OFF / false->ON으로 변경되게 해준다.

- ReactDOM으로 렌더링을 해준다. 

 

그럼 이렇게 완성이 된다 짜자자잔!!

 

그럼 이곳에 ON/OFF에 따라 전구 이미지가 켜졌다/꺼졌다 바뀔 수 있게 해 보자.

 

위의 버튼 이벤트 생성 설정처럼 전구 이미지도  버튼 이벤트에 따라 변하게 된다. 

 

그리고 div 태그로 감쌌더니 빨간 줄이 나왔다.

 

그 이유는 리액트에서 정의한 render() 함수 반환 값의 루트 요소는 하나만 정의되어야 하기 때문이다.

 

이렇게 React.Fragment로 감싸주면 된다.

축약형으로 <>, </> 입력해도 동일하다.

 

이렇게 완성된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
        <div id="root"></div>    

        <script type="text/babel">
           
           const {useState} = React;
           
           const Toggle = (props) => {
               const [isToggleon,setIsToggleon] = useState(false);

                const clickHandler = () => {
                    setIsToggleon(!isToggleon);
                };

            return (
                <>
                   <img src={isToggleon? "pic_bulbon.gif" : "pic_bulboff.gif"} alt="off"/>
                   <button onClick={clickHandler}>{isToggleon ? 'OFF' : 'ON'}</button>
                </>
            );
           };

           ReactDOM.render(<Toggle/>,document.getElementById('root'));  
    </script>
</body>
</html>

'차곡차곡 > Frontend' 카테고리의 다른 글

[React] 리스트와 Key  (0) 2022.04.18
[React] 조건부 렌더링하기  (0) 2022.04.18
[React] Props와 State / 리액트로 클릭 카운터 만들기  (0) 2022.04.17
[React] Components와 Props / 컴포넌트 다이어트 성공기  (0) 2022.04.17
[React] 엘리먼트 렌더링 - tick 만들기  (0) 2022.04.17