filter 메소드

사용자 선택 관리하기

사용자 리스트애서 전체 선택을 누르면
사용자 전체가 선택되고 체크 박스 활성화가 된다.

개별 사용자를 선택하면 해당하는 사용자의 체크 박스가 활성화가 된다.

1. 먼저 이런 식으로 member들에 관한 mockdata를 만들었다.

const membersData = [
        { userId: 1, name: '학생 A' },
        { userId: 2, name: '학생 B' },
        { userId: 3, name: '학생 C' },
        { userId: 4, name: '학생 D' },
        { userId: 5, name: '학생 E' }
    ];

상태 관리

useState를 사용해서
checkedList와 members 두 가지 상태를 관리한다.

checkedList는 선택된 사용자의 ID를 배열로 저장하고,
members는 사용자 데이터를 초기 상태로 저장한다.

const [checkedList, setCheckedList] = useState([]);
const [members, setMembers] = useState(membersData);

개별 선택 처리

handleChangeChecked 함수는 사용자가 체크박스를 선택하거나
해제할 때 호출된다.
선택 상태(isChecked)와 사용자 ID(userId)를 인자로 받아,
선택 상태에 따라 checkedList를 업데이트

const handleChangeChecked = (isChecked, userId) => {
        if (isChecked) {
            setCheckedList((prevCheckedList) => [...prevCheckedList, userId]);
        } else {
            setCheckedList((prevCheckedList) => prevCheckedList.filter((id) => id !== userId));
        }
    };

매개변수:

isChecked: 체크박스의 최신 상태
체크박스가 선택되면 true, 해제되면 false 값을 가진다.

userId: 변경된 체크박스와 연결된 학생의 고유 식별자

조건문:

if (isChecked): 이 조건은 체크박스가 선택된 경우를 처리한다.

즉, 사용자가 학생의 체크박스를 선택했을 때 실행된다.

setCheckedList((prevCheckedList) => [...prevCheckedList, userId]):

이전에 선택된 학생들의 목록(prevCheckedList)을 가져와
현재 선택된 userId를 추가한다.

스프레드 연산자(...)를 사용하여 이전 배열을 새 배열로 복사하고,
새로운 userId를 배열의 끝에 추가합니다.

else: 체크박스 선택이 해제된 경우를 처리한다.

setCheckedList((prevCheckedList) => prevCheckedList.filter((id) => id !== userId)):

선택 해제된 학생의 userId를 checkedList 배열에서 제거

filter 함수는 기존 배열을 변경하지 않고,
조건에 맞는 요소만을 포함하는 새 배열을 반환한다.
여기서는 id !== userId 조건을 만족하는 id만이 새 배열에 포함된다.

전체 선택 처리

handleChangeCheckAll 함수는 전체 선택 체크박스의 변경을 관리한다.
모든 사용자를 선택하거나 선택 해제할 때 checkedList 상태를 업데이트

   const handleChangeCheckAll = (isChecked) => {
        setCheckedList(isChecked ? members.map((member) => member.userId) : []);
    };

isChecked가 true일 경우,
members 배열의 모든 member 객체에서 userId를 추출하여 checkedList를 업데이트 이는 모든 사용자를 선택한 것과 같다.

전체 선택 해제: isChecked가 false일 경우,
checkedList를 빈 배열로 설정한다.
이는 모든 사용자 선택을 해제한 것을 의미하게 된다.

filter 메소드

filter 함수는 배열에서 특정 조건을 만족하는 요소만을 선택해
새로운 배열을 만들 때 사용

원본 배열을 변경하지 않고, 새로운 배열을 생성하여 반환

setCheckedList((prevList) => prevList.filter((id) => id !== userId));

filter((id) => id !== userId): prevList의 각 요소 id에 대해 함수를 실행한다.
이 함수는 id !== userId 조건을 평가하여 true 또는 false를 반환한다.

id !== userId

이 조건은 현재 요소의 id가 함수에 전달된 userId와 다른 경우 true
즉, userId와 동일하지 않은 모든 id가 새 배열에 포함된다.