[React] 함수에 파라미터 넘기는 법

 

다들 알 것이다. 리엑트에서는 함수를 괄호 안쓰고 이름만 쓴다는 거슬..

// jsx
<input onChange={ageHandler}>

근데 만약에 아래와 같이 파라미터를 넘겨아한다면 어떻게 해야할까?

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

const ageHandler = (event) => {
  setAge(event.target.value);
};

const usernameHandler = (event) => {
  setUsername(event.target.value);
};

이렇게 기본적인 useState와 handler함수가 있다고 침. 그리고 각각의 input태그에 onChange={ageHandler} 이렇게 걸것임. 근데 이거를 한꺼번에 한 함수에서 받아서 여기서 처리하고 싶다면?

const changeHandler = (identifier, value) => {
  if (identifier == 'age') {
    setAge(value);
  } else (identifier == 'username') {
    setUsername(value);
  }
};

이렇게 해서 input에 다 얘로 걸어버리면 되는 것임.

 

근데 저렇게 파라미터를 원하는대로 받고 싶다면 방법은 잇따 바로 콜백함수

 

1. 콜백함수 사용

// jsx
<input onChange={(event) => changeHandler('age', event.target.value)}>

콜백함수로 기본적으로 event를 받고, 그 안에 원하는 파라미터를 순서대로 써주면 된다. 그냥 함수이름만 써주면 바로 실행되지만, 콜백함수는 아니라는 점을 이용하면 된다.