[React] Toggle List 구현하기

---

 

#1. React에서 Toggle List 구현하기

프로젝트 중 게시판을 만들 때 Toggle List를 구현하고 싶었다.

보통 하나의 toggle을 구현할 때 state에 true/false 값을 넣어서 사용하는데, map 함수를 사용해서 뿌린 리스트에서 보고싶은 글만 접었다 폈다해서 보려면 어떻게 해야할까?

많은 리스트 중에 해당 게시글에만 toggle 버튼을 적용하려면 어떻게 해야할지 감이 잡히질 않았다.

구글링을 통해 방법을 찾던 중 괜찮은 방법을 찾아서 정리해 본다.

 

1. 토글에 사용할 상태값 생성

// 패키지 참조
import React, { useState } from 'react';

// useState hook 생성
const [showItem, setShowItem] = useState({});

• useState를 활용해 객체 상태의 상태값을 관리한다.

 

2. map을 활용한 리스트에서 토글 기능을 구현할 함수

/** map을 활용한 리스트에서 토글기능 구현 */
const toggleItem = (id) => {
  // 상태값 갱신
  setShowItem(prevShowItem => ({
    // 스프레드 연산자를 활용해 나머지 값은 그대로 저장
    ...prevShowItem,
    // 파라미터로 받은 값을 key로 사용, 논리연산자를 활용해 해당 key값의 true/false 지정
    [id]: !prevShowItem[id]
  }))
};

• 스프레드 연산자(...)를 활용해 나머지 값은 그대로 저장한다.
• 파라미터로 받은 값(id)을 객체의 key값으로 사용하고 해당 값을 논리연산자(!)를 활용하여 true/false 값을 바꿔 넣어준다.

 

3. map 함수를 활용해 서버로 부터 받은 값을 리스트 형태로 표현

/** map을 활용해서 리스트 표현 */
currentList.map((list, index) => (
  <div 
    // 리액트에서 key는 고유해야 하며, 해당 요소를 추적하기 위함(권장사항이지만 거의 필수)
    key={list.reception_no} 
    // 클릭시 토글기능을 가진 함수 호출, 파라미터 값으로 해당 리스트의 기본키(pk)를 전달
    onClick={() => toggleItem(list.reception_no)}
  >

• 리스트 형태로 표현할 객체를 map 함수를 활용해서 나타낸다.
• onClick을 활용해 클릭 시 toggle 기능을 가진 함수를 호출하고, 파라미터 값으로 각 리스트의 기본키를 전달한다.(꼭 기본키를 사용할 필요는 없지만, 해당 리스트의 고유 번호를 사용하는 것이 좋다.)

 

4. 삼항연산자를 사용해서 리스트 on / off

// 토글 상태값 객체의 해당 키 값이 true면 html을 보여주고 그렇지 않으면 null을 반환
{showItem[list.reception_no] ? (
  <div>나타낼 요소</div>
) : null}

• 삼항연산자를 활용해서 토글 상태값(showItem) 객체의 키 값이 true면 html 요소를 나타내고 그렇지 않으면 null을 반환한다.

 

구현결과

클릭시 state의 변화(showItem 출력) / css 처리 됨

토글 함수의 파라미터 값(id)으로 넣어준 게시글 번호를 객체의 key값으로 하여 클릭하면 해당 게시글에 true 값을 주고, 다시 클릭하면 false 값을 준다.

이렇게 map 함수로 나타낸 리스트에서 Toggle List 기능을 구현할 수 있다.

 

 

사실 아직도 어떤 원리인지.. 절반 밖에 이해 못하고 있는 것 같다.. 구글링을 통해 알게 되었고, 내 프로젝트에 적용하는데 성공했지만, 아래로 펴진 게시물을 클릭하면 false가 되버린다. 이벤트 버블링과 관련 있지 않나 싶은데, 어렵다ㅠㅠ.. 아무튼 구현되는 원리부터 빨리 알아내고 싶다.