[React Hooks] useState를 사용하여 input, checkbox value 상태관리(전체선택/해제)

이번 포스팅에서는 리액트 Hooks의 useState를 사용하여 input과 checkbox의 value 상태를 관리하는 내용을 알아보겠다.

 

단일 input이나 checkbox상태 관리의 경우 이전에 포스팅한 내용과 크게 다른 점이 없기 때문에 이번 포스팅에서는 여러 개일 경우로 설명을 한다.

 

 

input 상태 관리

input이 여러 개인 경우 각 input에 대해서 변수를 지정하게 되면 input이 추가/삭제되었을 때 관리가 어렵고, 중복되는 코드를 여러 번 써야 하는 경우가 생길 수 있다.

그래서 일반적으로 JSON형태로 상태 관리를 한다.

 

초기값으로 각 input에 name을 key값으로 지정해도 상관없지만, 나는 그냥 빈 object를 선언하고 input에 name만 지정한다.

만약 게시판의 게시글 수정 같은 화면에서 title, content 등 이미 존재하는 key값이 있는 경우에는 초기값을 해당 키값으로 잡아주는 것이 좋다.

 

아래 코드를 보면 추가적인 설명을 하지 않아도 이해가 될 것이라 생각한다.

 

const [inputs, setInputs] = useState({});

const handleChange = (e: any) => {
    const { name, value } = e.target;

    const newInputs = {
      ...inputs,
      [name]: value,
    };

    setInputs(newInputs);
};

return (
    <>
      <input type="text" name="input1" onChange={handleChange} />
      <input type="text" name="input2" onChange={handleChange} />
      <input type="text" name="input3" onChange={handleChange} />
      <input type="text" name="input4" onChange={handleChange} />
      <input type="text" name="input5" onChange={handleChange} />
      <input type="text" name="input6" onChange={handleChange} />
      <input type="text" name="input7" onChange={handleChange} />
      <input type="text" name="input8" onChange={handleChange} />
    </>
);

 

 

 

checkbox 상태 관리

체크박스의 경우에는 약간의 로직이 필요한 경우가 있다.

(예를 들면 체크된 항목의 개수를 가져와야 한다던지, 체크된 항목의 값을 가져와야 한다던지 등)

 

그래서 뭘 구현할 건지에 따라 로직에 약간 차이가 발생할 수 있다.

아래 코드는 체크된 항목의 값을 관리하는 소스코드이다.

마찬가지로 이미 있는 값을 렌더링 하는 경우에는 그 상황에 맞춰서 소스코드를 변경하면 된다.

 

const [inputs, setInputs] = useState<Array<any>>([]);

const handleChange = (e: any) => {
    const { value, checked } = e.target;

    if (checked) {
      setInputs([...inputs, value]);
    } else {
      setInputs(
        inputs.filter((v) => {
          return v !== value;
        })
      );
    }
};

return (
    <>
      <input type="checkbox" value="1" onChange={handleChange} />
      <input type="checkbox" value="2" onChange={handleChange} />
      <input type="checkbox" value="3" onChange={handleChange} />
      <input type="checkbox" value="4" onChange={handleChange} />
      <input type="checkbox" value="5" onChange={handleChange} />
      <input type="checkbox" value="6" onChange={handleChange} />
      <input type="checkbox" value="7" onChange={handleChange} />
      <input type="checkbox" value="8" onChange={handleChange} />
    </>
);

 

 

그럼 '전체 선택/해제'는 어떻게 할까?

구현하는 방법은 여러가지가 있지만, 가장 단순한 방법은 전체 ID 목록을 가지고 있는 array가 있으면 된다.

아래 코드를 예로 보자.

 

const [inputs, setInputs] = useState<Array<any>>([]);
const allCheckList = ["1", "2", "3", "4", "5", "6", "7", "8"];
const [allCheck, setAllCheck] = useState(false);

const handleChange = (e: any) => {
    const { value, checked } = e.target;

    if (checked) {
      setInputs([...inputs, value]);
    } else {
      setInputs(
        inputs.filter((v) => {
          return v !== value;
        })
      );
    }
};

const handleClick = (e: any) => {
    if (allCheck) {
      setAllCheck(false);
      setInputs([]);
    } else {
      setInputs(allCheckList);
      setAllCheck(true);
    }
};

return (
    <>
      <button onClick={handleClick}>전체선택</button>
      <div id="checkList">
        <input
          type="checkbox"
          value="1"
          onChange={handleChange}
          checked={inputs.includes("1")}
        />
        <input
          type="checkbox"
          value="2"
          onChange={handleChange}
          checked={inputs.includes("2")}
        />
        <input
          type="checkbox"
          value="3"
          onChange={handleChange}
          checked={inputs.includes("3")}
        />
        <input
          type="checkbox"
          value="4"
          onChange={handleChange}
          checked={inputs.includes("4")}
        />
        <input
          type="checkbox"
          value="5"
          onChange={handleChange}
          checked={inputs.includes("5")}
        />
        <input
          type="checkbox"
          value="6"
          onChange={handleChange}
          checked={inputs.includes("6")}
        />
        <input
          type="checkbox"
          value="7"
          onChange={handleChange}
          checked={inputs.includes("7")}
        />
        <input
          type="checkbox"
          value="8"
          onChange={handleChange}
          checked={inputs.includes("8")}
        />
      </div>
    </>
);

 

 

궁금하신 내용은 댓글로 알려주세요~

그럼 도움이 되셨길 바랍니다.