Gom3rye

Who Am I] 이벤트 핸들링 본문

웹 개발

Who Am I] 이벤트 핸들링

Gom3rye 2022. 9. 1. 18:56

버튼 클릭 후 마우스를 버튼 밖으로 내보내면 시간이 사라지는 이벤트 작성

<!DOCTYPE html>
<html>
<body>

<button id="button" onClick="document.getElementById('desc').innerHTML=Date()">What's the time?</button>

<p id='desc'></p>
<script>
 const button = document.getElementById("button");
 button.addEventListener("mouseout", () => document.getElementById('desc').innerHTML="");
</script>

</body>
</html>

- 주로 onClick과 EventListener을 통해 이벤트 구현

리액트로 이벤트 핸들링하기

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      // react
      const rootElement = document.getElementById("root");

      function Buttons() {
        // h1 태그의 글자를 바꿔 주는 변수값
        const [textColor, setTextColor] = React.useState("black");
        
        // 버튼을 클릭했을 때 실행되는 함수
        const handleClickButton = (color) => {  //string으로 넘겨줬기 때문에 바로 color라는 변수로 받을 수 있다.
           console.log("color", color);  // color라는 변수를 콘솔 로그로 찍어보면 color pink로 값이 정상적으로 들어오는 것을 확인할 수 있다.
           setTextColor(color);  // 글자 색 변경!
        };
        return (
        <>
          <button onClick={()=>handleClickButton("pink")} style={{backgroundColor: "pink"}}>pinkbutton</buttons>
          <button onClick={()=>handleClickButton("blue")} style={{backgroundColor: "blue"}}>bluebutton</buttons>
          <button onClick={()=>handleClickButton("green")} style={{backgroundColor: "green"}}>greenbutton</buttons>
          
          <h1 style={{color: textColor}}>color</h1>
        </>
        );
        }

      const element = <Buttons />;

      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

- 버튼을 클릭할 때마다 글자색이 변하게 하려면 글자색을 관리하는 state 값이 있어야 한다.

- 버튼을 클릭했을 때 색깔을 통해 그 변수값을 변경해주면 글자의 색깔이 바뀌겠다. -> 색깔을 props로 넘겨주자.

- 위의 코드를 보면 굉장히 겹치는 게 많다 -> button 이라는 컴포넌트를 따로 빼줘서 작성해보자!

button 컴포넌트 빼서 만든 핸들링

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      // react
      const rootElement = document.getElementById("root");
      
      // 공통되는 버튼의 재사용을 위한 버튼 컴포넌트
      const Button = ({color}) => {
        // 버튼을 클릭했을 때 실행되는 함수
        const handleClickButton = (color) => {  //string으로 넘겨줬기 때문에 바로 color라는 변수로 받을 수 있다.
        setTextColor(color);  // 글자 색 변경!
        };
      
        return (
          <button onClick={()=>handleClickButton("pink")} style={{backgroundColor: color}}>
          {color}button
          </buttons>
        );
      };

      function Buttons() {
        // h1 태그의 글자를 바꿔 주는 변수값
        const [textColor, setTextColor] = React.useState("black");
        
        return (
        <>
          <Button color="pink"/>
          <Button color="blue"/>
          <Button color="green"/>
          <h1 style={{color: textColor}}>color</h1>
        </>
        );
        }

      const element = <Buttons />;

      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

-> 하지만 이 코드는 실행되지 않음. Cuz setTextColor함수가 선언된 위치보다 더 위에서 사용되기 때문!
Solution

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      // react
      const rootElement = document.getElementById("root");
      
      // 공통되는 버튼의 재사용을 위한 버튼 컴포넌트
      const Button = ({color, onClickButton}) => {
        // 버튼을 클릭했을 때 실행되는 함수
        const handleClickButton = (color) => {  //string으로 넘겨줬기 때문에 바로 color라는 변수로 받을 수 있다.
        // 상위 컴포넌트의 setTextColor
        onClickButton(color);  // 글자 색 변경!
        };
      
        return (
          <button onClick={()=>handleClickButton(color)} style={{backgroundColor: color}}>
          {color}button
          </buttons>
        );
      };

      function Buttons() {
        // h1 태그의 글자를 바꿔 주는 변수값
        const [textColor, setTextColor] = React.useState("black");
        console.log("textColor", textColor); // textColor pink 로 찍혀나오는 것을 볼 수 있다.
        
        return (
        <>
          <Button color="pink" onClickButton={setTextColor} />
          <Button color="blue" onClickButton={setTextColor} />
          <Button color="green" onClickButton={setTextColor} />
          <h1 style={{color: textColor}}>color</h1>
        </>
        );
        }

      const element = <Buttons />;

      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

- onClickButton이라는 함수가 결국에는 상위 컴포넌트에 있는 setTextColor라는 함수이므로 props로 onClickButton을 넘겨준 후 setTextColor 부분을 onClickButton으로 바꿔주면 된다!!

- <button onClick=() => handleClickButton(color)} ~ 클릭을 했을 때 해당하는 string이 handleClickButton의 (color)로 넘어가서 각각의 textColor라는 변수를 바꿔준다.

728x90
반응형

'웹 개발' 카테고리의 다른 글

Who Am I] MBTI 테스트 만들기  (0) 2022.10.07
스프링 부트와 AWS로 혼자 구현하는 웹 서비스 5장 (로그인 기능 구현) -2  (0) 2022.09.04
Who Am I] Components와 Props / State 다루기  (0) 2022.09.01
Who Am I] Virtual DOM  (0) 2022.08.31
Who Am I] JSX 소개  (0) 2022.08.31
'웹 개발' Related Articles more