[React 입문] 컴포넌트 안에 <input>태그 함수 호출 안 되는 오류

// rfce

import React, { useState } from 'react';

import './App.css';

function App() {

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

    const [age, setAge] = useState('');

    const nameChangeHandler = (event) => {

        setName(event.target.value);

    };

    return (

        <div>

            <div>

                <input value={name} onChange={(event) => nameChangeHandler(event)} />

            </div>

        </div>

    );

}

export default App;

 

★ 중요 포인트 ★

<input>태그에서 onChange를 {<---여기에-->} event를 매개변수로 받는 함수를 넣는 경우,

* onChange = {nameChangeHandler(event)} => 이렇게 작성하면 함수가 실행하고 시작함

* onChange = {() => nameChangeHandler(event)} => 이렇게 작성해줘야 원하는 형태로 구현됨/

 

* setName(event.target.value) 를 사용하여 input에 입력되는 값이 랜더링 되는 것을 확인 가능