<React> map() 메소드 return값이 나오지 않는 이유 / + 출력한 요소들을 개별 다루기

map() 메소드 return이 되지 않는 건에 대하여

참고 블로그

🔥 map 함수를 사용하여 배열안의 요소들을 컴포넌트로 반환하고자 했음에 불구하고, 반환이 되지 않았음

문제 파악 : 본인은 return 뒤에 중괄호{}만 기입해서 생긴 문제였다.
아래와 같이 문장 실수를 하여 출력이 안된 문제였다.

map( () => return { } )
// return문에 중괄호{}만 넣어줌

문제 해결 방법 :

map( () => return { return () } )
//  중괄호{}에 retrun문을 포함하는 올바른 경우

map( () => return () )
// return문에 뒤에 중괄호를 생략하고, 
// 소괄호()로 감싸 바로 return하는 올바른 경우

느낀점 : 두 번 다시 같은 맥락의 실수를 하지 않겠다. 이러한 실수로 시간을 소비한 것에 있어서 부끄럽다.

---

map()으로 뿌려준 요소 개별 선택하기

위와 같은 Filter UI를 만들어야했는데, Toggle이 하나의 State만을 바라보고 따라 움직였던 문제가 있었습니다.

문제 파악 : depth1에 해당하는 요소들이 각각의 state에 따라 true - false Toggle기능이 개별적으로 작동해야한다.
하지만 클릭 시, state(false)가 되면 모든 depth1이 닫히고 열리는 문제가 발생하였다.

문제 해결 :

• 문제해결 방법 : [Map으로 출력한 Depth1을 개별적으로 Toggling하기 위해서 어떻게 코드를 만들어야 하는가?]
• depth1List는 false로 채워진 배열입니다.
• 기존 Toggle Logic은 일반적인 true => false => true. 올바르지 않음.
• 클릭하면 해당 인덱스를 따라서 기존 depth1List[index]를 기존값과 비교하여 반전시켜줌
  (true => false => true)
• depth1List는 배열이다. 그러나 Toggle은 하나의 상태만을 가졌기 때문에, 모든 depth1List 상태값이 Toggle값 하나만 바라보고 같이 움직이는 상황이 일어남.
• ✅ 해결방법 : Toggle의 상태 자료구조를 배열로 변경.
  depth1List과 동일하게 맞추면 자연스럽게 depth1List의 상태와 Toggle 배열 상태와 동기화시켜 각각 요소를 컨트롤할 수 있게됨.

  // ⭐️ Depth1를 개별 토글로 다루기 위한 Boolean 빈배열
  const [depth1List, setDepth1List] = useState(Array(tagList.length).fill(true));
  // ⭐️ Depth2 체크된 아이템을 담을 배열
  const [checkItems, setCheckItems] = useState([]);


  // ✅ Depth1 개별 선택 핸들러 함수
  const clickHandler = (index) => {
    const newVisible = [...depth1List]; // 함수 실행시 depth1List 전체를 복사하여 newVisible에 새롭게 생성
    newVisible[index] = !newVisible[index]; // 복사한 newVisible에 지금 선택한 index를 반대로 상태를 변환. (true => false)
    setDepth1List(newVisible); // 상태 변환된 newVisible값을 Depth1List에 업데이트

    alert(`${newVisible}`);
  };

  // ✅ Depth2 체크박스 단일 선택 핸들러 함수
  const handleSingleCheck = (checked, id) => {
    if (checked) {
      setCheckItems((prevCheck) => [...prevCheck, id]); // 단일 선택 시에 체크된 아이템을 배열에 추가
    } else {
      setCheckItems(checkItems.filter((el) => el !== id)); // 단일 선택 해제 시에 체크된 아이템을 제외한 배열(필터)
    }
  };

  // ✅ 필터 리셋 함수_ Depth1 Toggle / Depth2 CheckBox
  const resetFilter = () => {
    const newVisible = [...depth1List].fill(true);
    setDepth1List(newVisible); // Depth1 Toggle
    setCheckItems([]); // Depth2 CheckBox, checkItems를 빈 배열로 업데이트

    alert('리셋 실행');
  };

  return (
    <Container className="depth1_ul">
      {tagList.map((list, index) => {
     ✅ const isToggle = depth1List[index]; // map으로 나온 요소의 depth1의 몇 번째 index인지 기록.
        return (
          <FilterList
            key={index}
            list={list}
            clickHandler={() => clickHandler(index)}
            type="reports"
            title={list.mainTitle}
            id={list.mainId}
            subList={list.subOption}
         ✅ isToggle={isToggle} // 
            checkItems={checkItems}
            onHandleSingleCheck={handleSingleCheck}
          />
        );
      })}
      <FilterResetWrap>
        <ResetArrowOutlined size="small" />
        <FilterButton onClick={resetFilter}>필터 초기화</FilterButton>
      </FilterResetWrap>
    </Container>
  );