React.js - List Item Toggle 리스트 아이템 토글

 

 

개발에 빠질 수 없는 Toggle 기능은 기본적으로 state을 true/false로 변경하면서 show, hide를 하는 것이 일반적이지만

 

보고 싶은 글만 보거나 대댓글 쓰기 기능을 구현할 때는 부분 Toggle을 사용할 때가 많다.

 

일반적인 show, hide는 구현방법이 쉽지만 부분적인 Toggle 같은 경우에는 어떻게 하면 좋을 지 공유하려고 한다.

 

stackoverflow에 아주 좋은 예시가 있어 이 예시로 설명!

const { useState, Fragment } = React;

const SearchResults = props => {
  const [shownComments, setShownComments] = useState({});

  const toggleComment = id => {
    setShownComments(prevShownComments => ({
      ...prevShownComments,
      [id]: !prevShownComments[id]
    }));
  };

  return (
    <Fragment>
      {props.search_results.map(obj => (
        <div key={obj.id}>
          {obj.comment ? (
            <button onClick={() => toggleComment(obj.id)}>Toggle</button>
          ) : null}
          <div>{obj.text}</div>
          {shownComments[obj.id] ? <p>{obj.comment}</p> : null}
        </div>
      ))}
    </Fragment>
  );
};

ReactDOM.render(
  <SearchResults
    search_results={[
      { id: 0, text: "Foo bar", comment: "This is rad" },
      { id: 1, text: "Baz qux", comment: "This is nice" }
    ]}
  />,
  document.getElementById("root")
);

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

코드 설명

1. const [shownComments, setShownComments] = useState({}); // Toggle을 하기 위한 state 생성
2. toggleComment 함수를 생성 setShownComments로 state(shownComments)를 변경해 줄 함수를 구현
3. Array.prototype.Map 함수를 이용해 search_reasults의 객체의 값들을 리스트로 나열
4. Toggle 버튼을 생성. onClick에 toggleComment 함수를 binding
5. toggleComment 함수로 버튼을 누를 때 마다 show, hide를 실행

결과적으로 보면 참 단순하고 누구나 구현할 수 있는? 기능이지만 막상 짜려고 하면 어떻게 하면 좋을지 당황할 때가 있다.

 

Toggle은 true/false를 변경하면서 show, hide를 할 수 있다는 국룰 고정관념에서 빨리 벗어나야된다고 생각한다.

 

마지막으로 요즘엔 보통 함수형 컴포넌트를 구현해서 개발을 하는 추세지만 아직 클래스 컴포넌트를 사용하는 사용자들을 위해 클래스 컴포넌트에서 활용 할 수 있는 방법도 공유해보려고 한다.

 

 

 

클래스 컴포넌트 Toggle 토글 방식 : How to hide and show list contents: ReactJS - Stack Overflow

How to hide and show list contents: ReactJS

함수형 컴포넌트 Toggle(토글) 방식 : reactjs - How to show/hide an item of array.map() - Stack Overflow