망할고양이의 도피처

지금까지 공부한 기능을 이용하여 복습의 시간을 위해 간단한 코드를 작성해 보겠습니다. 

onChange 이벤트를 이용하여 State에 값을 전달 한뒤 그 값이 화면에 잘 변경되어 출력되도록 하겠습니다. 

component 폴더 하위에 EventAndState.js 파일을 생성하고 아래와 같이 작성합니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
        </div>
    );
}

1. useState를 이용하여 name과 setName이 담겨진 배열을 생성하였습니다.

2. input 에 onChange 이벤트를 작성하였습니다. 

3. State에 값이 잘 전달되었는지 확인을 위해 name값을 화면에 출력하였습니다. 

(ev.target.value는 ev라는 이벤트가 발생한 target의 value값을 가리킵니다.)

동일한 기능을 하지만 여러 형태로 작성하는 방법이 있습니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    function onChangeTest(ev){
        setName(ev.target.value)
    }
    const onChangeTest2 = ev => setName(ev.target.value);

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
            <h1>다른 형태의 코드 # 1</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest}
            />
            <h1>다른 형태의 코드 # 2</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest2}
            />
        </div>
    );
}

버튼을 클릭하거나 내용이 수정되었을때 어떠한 동작을 하도록 해보겠습니다. 

component 폴더 하위에 Event.js파일을 생성합니다. 

export default function Event(){

    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button>button A</button>
                <button>button B</button>

            </div>
            <input type="text"/>
        </div>
    );
}

생성한 component를 App.js에 추가합니다. 

import './App.css';
import Event from './component/Event';  //추가된 항목
function App() {
  return (
    <div className="App">
      <Event/>
    </div>
  );
}

export default App;

button A를 클릭할 때 alert 창을 호출하도록 작성하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

button B에 onClick 이벤트를 직접 작성해보도록 하겠습니다. 

Event.js 파일을 수정합니다. 

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
            </div>
            <input type="text"/>
        </div>
    );
}

함수로 값을 전달하도록 하겠습니다. 

Event.js 파일을 수정합니다.  (함수 추가, 버튼 추가)

export default function Event(){

    function callAlert(){
       alert("Button A를 클릭했어요");
    }
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text"/>
        </div>
    );
}

input에 내용이 변경될 때 마다 console에 변경된 text를 출력하도록 하겠습니다. ( onChange 사용 )

Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
        </div>
    );
}

    - input에 onChange를 추가하고 동작할 함수의 이름을 작성합니다.

    - 동작할 함수는 event argument를 받아서 사용할 수 있기 때문에 e.target.value를 사용하여 이벤트를 전달한 객체의

      value값을 사용할 수 있습니다. 

input을 한개 더 추가한 뒤 기존에 생성한 consoleTextPrint 함수를 이용해서 onChange 이벤트 안에 직접 작성해보겠습니다. 

Event.js 파일을 수정합니다.

export default function Event(){

    /* alert을 호출합니다. */
    function callAlert(){
       alert("Button A를 클릭했어요");
    }

    /* 전달받은 값을 console에 출력합니다. */
    function consoleTextPrint(arg){
        console.log("전달받은 값 : " + arg);
    }
    
    /* input Text 내용을 console에 출력합니다. */
    function printText(e){
        console.log(e.target.value);
    }
    return(
        <div>
            <div>
                <h1>Event Test</h1>
                <button onClick={callAlert}>button A</button>
                <button onClick={() =>{
                    console.log("####### Button Click B");
                    }
                    
                }>button B</button>
                <button onClick={() =>{
                    consoleTextPrint("button Arg 전달!!!");
                    }
                    
                }>button Arg 전달</button>
            </div>
            <input type="text" onChange={printText}/>
            <input type="text" onChange={
                e => {
                    const targetValue = e.target.value;
                    consoleTextPrint(targetValue);
                }
            }/>
        </div>
    );
}