React에서 확장/축소 기능의 단계별 구현

Irakli Tchigladze 2023년6월21일

React React Expand

React에서 확장/축소 기능 구현
React에서 전체 컨테이너 확장/축소
React에서 특정 게시물 펼치기/접기
React의 모든 게시물 펼치기 또는 접기
결론

웹 애플리케이션을 구축할 때 DOM에서 특정 요소의 모양을 동적으로 변경해야 하는 경우가 많습니다.

다른 경우에는 사용자가 보고 싶을 때만 콘텐츠를 표시해야 합니다. 이를 통해 사용자에게 부담을 주지 않고 대량의 콘텐츠를 관리하고 좋은 사용자 경험을 제공할 수 있습니다.

이 기사에서는 사용자가 버튼을 클릭하면 컨테이너를 표시하거나 숨기는 확장/축소 기능을 구현하는 방법을 보여주고자 합니다.

React에서 확장/축소 기능 구현

React를 사용하면 구성 요소를 조건부로 숨기거나 표시할 수 있습니다. 구성 요소가 렌더링되는지 여부는 상태 변수의 값에 따라 달라지며 사용자의 작업에 대한 응답으로 변경될 수 있습니다.

boolean 유형의 상태 변수를 저장할 수 있습니다. JSX에서는 삼항 연산자(또는 함수 내에서 if 조건 사용)를 사용하여 특정 DOM 요소(또는 구성 요소)를 렌더링해야 하는지 여부를 조건부로 결정할 수 있습니다.

예제를 살펴보는 것으로 시작해 보겠습니다. <Post> 구성 요소에 의해 렌더링된 게시물 목록을 표시하는 상위 구성 요소가 하나 있습니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  let postsArr = ["post1", "post2", "post3", "post4", "post5"];
  const [postDisplay, setPostDisplay] = useState({
    post1: true,
    post2: true,
    post3: true,
    post4: true,
    post5: true
  });
  const [divDisplay, setDivDisplay] = useState(true);
  const handleClick = (post) => {
    const objectCopy = {
      ...postDisplay
    };
    objectCopy[post] = !objectCopy[post];
    setPostDisplay(objectCopy);
  };
  return (
    <div className="App">
      <button
        onClick={() =>
          setPostDisplay({
            post1: false,
            post2: false,
            post3: false,
            post4: false,
            post5: false
          })
        }
      >
        Hide All Posts
      </button>
      <br />
      <button
        onClick={() =>
          setPostDisplay({
            post1: true,
            post2: true,
            post3: true,
            post4: true,
            post5: true
          })
        }
      >
        Show All Posts
      </button>
      <br />
      <button onClick={() => setDivDisplay(!divDisplay)}>
        Expand/Collapse the post section
      </button>
      {postsArr.map((post) =>
        divDisplay ? (
          <div>
            <button onClick={() => handleClick(post)}>Expand {post}</button>
            {postDisplay[post] ? <Post key={post}></Post> : null}
          </div>
        ) : null
      )}
    </div>
  );
}

function Post() {
  return (
    <div className="post">
      <p>
        Some content
      </p>
    </div>
  );
}

이 경우 하나의 부울 상태 변수 대신 각 게시물에 대해 하나씩 부울 값의 개체가 있습니다. 이를 통해 일부 게시물만 펼치고 다른 게시물은 접힌 상태(숨김)로 유지할 수 있습니다.

이 코드를 간단히 분석하기 전에 CodeSandbox에서 동적 확장/축소 기능을 확인할 수 있습니다.

App 구성 요소에는 일련의 게시물이 있습니다. JSX에서는 postsArr 배열에 .map() 메서드를 적용하고 게시물의 전체 컨테이너 또는 개별 게시물을 표시해야 하는지 여부를 조건부로 확인합니다.

let postsArr = ["post1", "post2", "post3", "post4", "post5"];
...
{postsArr.map((post) =>
        divDisplay ? (
          <div>
            <button onClick={() => handleClick(post)}>Expand {post}</button>
            {postDisplay[post] ? <Post key={post}></Post> : null}
          </div>
        ) : null
)}

React에서 전체 컨테이너 확장/축소

먼저 divDisplay 값을 확인하여 <Post /> 구성 요소를 포함하는 <div> 요소를 렌더링해야 하는지 여부를 결정합니다. CodeSandbox 라이브 데모를 방문하시면 버튼이 있는 것을 보실 수 있습니다.

이 버튼을 클릭하면 divDisplay 상태 변수의 현재 값이 반전됩니다. <div> 컨테이너가 축소된 경우 이 버튼을 클릭하면 컨테이너가 확장됩니다.

확장된 경우 버튼을 클릭하면 컨테이너가 숨겨집니다. 이 버튼의 코드를 살펴보겠습니다.

<button onClick={() => setDivDisplay(!divDisplay)}>
        Expand/Collapse the post section
</button>

<button> 요소에 onClick 속성을 설정하고 해당 값을 divDisplay 상태 변수를 업데이트하는 setDivDisplay() 함수를 호출하는 간단한 화살표 함수로 설정합니다. useState 후크를 사용하여 업데이트 기능을 정의했습니다.

const [divDisplay, setDivDisplay] = useState(true);

기본적으로 divDisplay 변수의 값을 true로 설정합니다. 나중에 사용자는 버튼을 클릭하여 이 변수의 값을 뒤집을 수 있습니다.

React에서 특정 게시물 펼치기/접기

게시물을 포함하는 전체 <div> 요소를 확장한다고 가정하면 게시물의 콘텐츠를 숨기거나 표시하는 개별 게시물을 확장하거나 축소할 수도 있습니다.

<Post> 구성 요소를 생성하는 코드 섹션을 살펴보겠습니다.

{postsArr.map((post) =>
        divDisplay ? (
          <div>
            <button onClick={() => handleClick(post)}>Expand {post}</button>
            {postDisplay[post] ? <Post key={post}></Post> : null}
          </div>
        ) : null
)}

map() 메서드를 postsArr 배열에 적용하고 버튼을 표시/숨기기 위한 버튼과 속성에 대한 postDisplay 객체의 값을 확인하는 삼항 연산자를 저장하는 <div> 요소를 반환합니다. 배열의 각 항목에 대해.

혼란스러울 수 있지만 배열 및 상태 변수를 다시 살펴보겠습니다.

let postsArr = ["post1", "post2", "post3", "post4", "post5"];

const [postDisplay, setPostDisplay] = useState({
    post1: true,
    post2: true,
    post3: true,
    post4: true,
    post5: true
  });

아시다시피 map() 메서드는 배열의 각 문자열을 가져옵니다. 그런 다음 postDisplay 개체에서 이 속성의 값을 확인합니다.

예를 들어 첫 번째 map() 메서드는 'post1' 문자열을 사용하고 postDisplay['post1'] 표현식의 값을 확인하여 <Post> 구성 요소를 렌더링합니다.

{postDisplay[post] ? <Post key={post}></Post> : null}

map() 메서드는 콜백 함수를 인수로 사용하고 각 배열 항목을 변수로 취급합니다. 따라서 속성 값을 조회하려면 대괄호 표기법을 사용해야 합니다.

삼항 연산자는 속성 값이 false이면 null을 반환하여 아무것도 렌더링하지 않습니다.

CodeSandbox 데모로 이동하여 버튼을 클릭하여 개별 게시물을 펼치고 접으십시오. 개체 형식을 사용하면 일부 게시물의 내용을 확장하면서 다른 게시물은 접힌 상태로 유지할 수 있습니다.

React의 모든 게시물 펼치기 또는 접기

페이지 상단에는 두 개의 버튼이 있습니다. 첫 번째 버튼은 현재 확장된 모든 게시물을 접고 두 번째 버튼은 모든 게시물을 펼칩니다. 기능을 더 잘 이해하려면 라이브 데모에서 이 버튼을 클릭해 보십시오.

이제 이것이 React 내에서 어떻게 수행되는지 살펴보겠습니다.

<button
	onClick={() =>
	  setPostDisplay({
		post1: false,
		post2: false,
		post3: false,
		post4: false,
		post5: false
	  })
	}
  >
	Hide All Posts
  </button>
  <br />
  <button
	onClick={() =>
	  setPostDisplay({
		post1: true,
		post2: true,
		post3: true,
		post4: true,
		post5: true
	  })
	}
  >
	Show All Posts
  </button>

onClick 속성을 설정하여 사용자가 첫 번째 버튼을 클릭할 때마다 모든 속성 값(개별 게시물의 상태에 해당)이 false로 설정된 객체로 setPostDisplay() 함수를 호출합니다. .

두 번째 버튼도 동일하게 작동하지만 이 경우 모든 개체 속성이 true로 설정됩니다. 따라서 이 버튼을 클릭하면 모든 게시물의 내용이 확장됩니다.

결론

이것은 매우 간단한 예입니다. 일반적으로 웹사이트에는 React에서 컨테이너를 확장하고 축소하는 더 세련된 버튼이 있습니다. 버튼 스타일은 다를 수 있지만 기능 구현은 여기에 표시된 것과 동일하거나 매우 유사합니다.

작가: Irakli Tchigladze

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.