[React] 리스트 동적 처리(ft. map 메소드) / on- prop / 조건 처리

🔨 컴포넌트의 재사용

 

React는 component로 이루어져 있고, 데이터만 달라지면서 동일한 컴포넌트를 재사용할 수 있습니다.

 

아래의 커스텀 컴포넌트 <Hobby /> 에 MY_HOBBY의 데이터를 각각 다르게  props로 전달하는 코드를 보겠습니다.

const MY_HOBBY = [
  {
    title : "Movie",
    description : "Watch movie at theater",
  },
  {
    title : "Running",
    description : "Run 3km",
  },
  {
    title : "Football",
    description : "Kick a ball with our team",
  },
];

 

1. spread operator를 사용하여 배열의 인덱스로 props를 전달합니다.

import Hobby from "./components/Hobby.jsx";
import { MY_HOBBY } from "./data.js";

function App() {
  return (
    <>
      {/*...codes...*/}
      
      <section>
        <ul>
          <Hobby {...MY_HOBBY[0]} />
          <Hobby {...MY_HOBBY[1]} />
          <Hobby {...MY_HOBBY[2]} />
       </ul>
      </section>
      
      {/*...codes...*/}
    </>
  );
}

export default App;

 

2. 커스텀 컴포넌트 안에서는 인자로서 속성을 받을 수 있는데, 여기서 자바스크립트 문법인 구조 분해 할당을 이용합니다.

export default function Hobby({ title, description }) {
  return (
    <li>
      <h2>{title}</h2>
      <p>{desription}</p>
    </li>
  )
}

 

 

이 방식도 좋지만 리스트의 개수가 달라지면 렌더링 과정에서 깨지거나 나타나지 않을 수 있습니다.

그래서 데이터의 개수에 따라 동적으로 컴포넌트를 렌더하는 방법을 사용하는 것이 좋습니다.

 

import Hobbies from "./components/Hobby.jsx";
import { MY_HOBBY } from "./data.js";

function App() {
  return (
    <>
      {/* codes */}
      
      <section>
        <Hobbies {...MY_HOBBY} />
      </section>
      
      {/* codes */}
    </>
  );
}

export default App;

export default function Hobbies() {
  return (
    <ul>
      {MY_HOBBY.map((hobby) => (
        <Hobby key={hobby.title} {...hobby} />
        )
      )}
    </ul>
  );
}

 

중괄호 안에 map 메소드를 사용하면 배열이나 객체로 된 리스트를 동적으로 렌더할 수 있습니다.

⛔ WARNING
map 메소드 사용 시 각 리스트에는 고유한 key 속성이 있어야 합니다. React는 나중에 데이터를 insert, delete, reorder 할 때 참조할 key값을 필요로 하기 때문입니다.

 

---

🔨 상위 컴포넌트 함수를 prop으로 받기

on으로 시작하는 이벤트 리스너(ex. onClick, onChange, ...)를 통해 데이터를 동적으로 처리할 수 있습니다.

 

import ListButton from "./ListButton.jsx";

export default function ShowTemplate() {
  function handleSelect(selectedButton) {
    setSelectedContent(selectedButton);
  }
  
  return (
    <section>
      <ListButton
        isSelected={selectedContent === "movie"}
        onClick={() => handleSelect("movie")}
      >
      Movie
      </ListButton>
      <ListButton
        isSelected={selectedContent === "running"}
        onClick={() => handleSelect("running")}
      >
      Running
      </ListButton>
      <ListButton
        isSelected={selectedContent === "football"}
        onClick={() => handleSelect("football")}
      >
      Football
      </ListButton>
    </section>
  );
}

export default function listButton({ children, onSelect }) {
  return (
    <li>
      <button onClick={onSelect}>
        {children}
      </button>
    </li>
  );
}

1. 이벤트를 청취하는 해당 하위 컴포넌트의 html tag(위에서는 button이 이에 해당) 에 on- prop을 추가합니다.

2. onClick을 컴포넌트의 인자와 연결합니다. (관습적으로 onSelect)

3. onSelect는 상위 컴포넌트의 속성으로서 연결되고 해당 함수를 trigger 합니다.

 

💡 TIP
상위 컴포넌트의 함수에서 인자를 필요로 할 때 쓸 수 있는 트릭(?)이 있습니다. 바로
prop={ ( ) => handleProp(argument) }와 같이 익명 함수를 쓰면 됩니다.
익명 함수의 사용 없이 그냥 prop= { handleProp(argument) } 의 형태로 사용하면, 최초 렌더 즉시 함수가 실행되는 것이므로, 원래 의도와 달라집니다.

➕

export default function ListButton({ children, ...props }) {
  return (
    <li>
      <button {...props}>
        {children}
      </button>
    </li>
  );
}

 

wrapper 컴포넌트 작성 시 좀 더 유연하게 인자를 받을 수 있는 스킬로 {...props} 가 있습니다.
{...props}로 나머지 인자를 모두 객체로 합병해 전달받고, spread operator로서의 {...props}를 빌트인 객체에 달아주면
onSelect를 따로 설정하는 등의 귀찮은 props 덕지덕지를 굳이 안 적어도 되어 편합니다😀

---

🔨 조건적 컨텐츠 렌더링의 3가지 방법

가독성 및 효율성 측면을 고려하며 적절한 조건 처리를 할 수 있습니다.

 

1. 중괄호 안에 삼항연산자를 이용 => 코드가 간결하고 조건이 두 개 이상일 때

{isActive ? "active" : ""}

2. 중괄호 안에 && 연산자 이용 => 코드가 간결하고 조건이 하나만 있을 때

{isActive && "active"}

3. 변수를 만들고 if 조건문으로 처리 => 조건식이 많아져 가독성이 떨어진다고 생각이 될 때

export default function HobbyQuestion() {
  let content = "<p>What's your Hobby?</p>";
  if (selectedContent) {
    content = (
      <div className="contents">
        <h3>Basketball</h3>
        <p>it's funny!</p>
      </div>
    );
  }
  
  {/* codes */}
  {content}
}