input tag 데이터 여러개 입력 받을때 어떻게 받으시나요? (useState)

각각의 방법에 장단점이 있는 것 같아요 1번 방법 장점: 가독성이 좋고 상태별로 의미하는바를 바로 알 수 있다. 단점: 작성자님 말처럼 상태가 많아지면 관리하기가 너무 힘들고 코드도 길어질 것 같아요. 유지보수에 힘듦, onChange할 때의 함수를 따로만든다면 각각 상태마다 만들어줘야함 2번 방법 장점: 하나의 상태만 관리하면 된다. onChange 함수하나를 정의해서 사용할 수 있다. 그래서 1번보다 유지보수가 쉽다. 입력받아야할 데이터가 많아진다면 2번방법을 선호합니다.

두 가지 방법 모두 올바른 접근 방식입니다. 상황과 개발자의 선호에 따라 다르게 사용될 수 있습니다. 1번 방법은 각각의 state를 따로 관리하므로, 개별 state의 변경이 필요할 때 간단하게 처리할 수 있습니다. 하지만 많은 수의 입력 필드가 있을 경우 state가 많아지고, 관리가 어려워질 수 있습니다. 2번 방법은 객체를 사용하여 여러 입력 필드의 값을 한 번에 관리합니다. 객체를 사용하면 코드가 조금 더 간결해지고, 관련된 데이터를 하나의 state에서 관리할 수 있습니다. 그러나 객체를 다루는 것이 어려울 수 있고, 객체 내부의 값을 업데이트할 때 주의해야 합니다. 개인적으로 제가 선호하는 방식은 상황에 따라 다릅니다. 입력 필드가 적고 간단한 경우 1번 방법을 사용하고, 입력 필드가 많고 관련된 데이터를 함께 관리해야 할 때는 2번 방법을 사용합니다. 2번 방법을 사용할 때 객체 내부의 값을 업데이트하는 방법은 아래와 같습니다. 이렇게 구현하면 객체의 값을 업데이트할 때 기존 객체를 유지하면서 변경된 부분만 업데이트합니다. 이 방식을 사용하면 리액트의 불변성 원칙을 지키면서 객체를 업데이트할 수 있습니다. 어떤 방법을 사용하든 중요한 것은 해당 방식이 프로젝트의 요구 사항과 개발자의 취향에 맞는지 확인하는 것입니다. 두 가지 방법 모두 장단점이 있으므로, 상황에 따라 적절한 방법을 선택하세요.

1
2
3
4
5
6
7
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setLoginInfo(prevState => ({
        ...prevState,
        [name]: value,
    }));
};