여러개 input의 onChange처리 어떻게 해야하나요?

정답이라고 할 순 없지만 저라면 useReducer를 사용할것 같습니다. 도움이 되셨음 좋겠네요

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const reducer = (state, action) => {
    switch(action.type) {
        case 'UPDATE':
        case 'ADD':
            return {
                ...state,
                [action.key]: action.value
            };
        case 'REMOVE':
            const {[action.key]: deleted, ...others} = state
            return others;
    }
}
const [status, dispatch] = useReducer(reducer , {})

//input 추가
const addInput = () => {
    dispatch({type: 'ADD', key: (UUID, hash 같은 임의의 key값), value: null})
}
//input 삭제
const addInput = () => {
    dispatch({type: 'REMOVE', key: (삭제하려는 input의 key값)})
}

{Object.keys(status).map((item) => (
          <Input onChange={e => dispatch({type: 'UPDATE', key: item, value: e.target.value})}/>
}

react-hook-form 의 useFieldArray를 쓰신다면 쉽게 구현하실 수 있습니다 https://react-hook-form.com/docs/usefieldarray