51일차[동적 배열 컨텐츠 렌더링]

진하의 메모장·2025년 3월 20일

공부일기

목록 보기

56/66

2025 / 03 / 20

오늘 수업 시간에는 저번 시간 내용 복습과 동적 배열 컨텐츠 렌더링을 배웠습니다.
배열을 받아오고 사용하는 과정에서 오류가 계속 생겨서 살짝 불안했지만.. 결국은 성공했습니다. 오늘 내용은 헷갈리는 부분이 많아서 차근차근 정리해보도록 하겠습니다.

💌 동적 배열 컨텐츠 렌더링

동적 배열 컨텐츠 렌더링을 구현하는 방법은 map( ) 메서드를 사용하는 것입니다.

map( ) 메서드는 배열 내의 모든 항목을 순차적으로 처리하여, 각 항목을 기반으로 새로운 컴포넌트나 UI 요소를 생성하는 데 사용됩니다.

1. 기본 개념

map( ) 메서드는 배열을 순회하면서, 배열의 각 요소를 컴포넌트로 변환합니다.

이를 통해 여러 개의 컴포넌트를 동적으로 렌더링할 수 있습니다.

2. 기본 예시

map( ) 메서드를 사용하는 기본 예시

배열을 동적으로 렌더링할 때, map( )을 사용하여 각 항목을 컴포넌트로 변환합니다.

const DUMMY_TODOS = ["Learn React", "Practice React", "Profit!"];

export default function App() {
   return (
      <ul>
         {DUMMY_TODOS.map((todo) => {
            return <Todo key={todo} content={todo} />;
         })}
      </ul>
   );
}

DUMMY_TODOS 배열을 map( )으로 각 항목을 컴포넌트로 렌더링하고 있습니다.
배열의 크기나 내용이 변해도 동적으로 렌더링할 수 있는 장점이 있습니다.

3. key 속성의 중요성

React에서 배열을 렌더링할 때는 key 속성을 설정하는 것이 매우 중요합니다.

key는 리액트가 어떤 항목이 변경되었는지, 추가되었는지, 또는 제거되었는지를 추적할 수 있도록 돕는 중요한 역할을 합니다.
{DUMMY_TODOS.map((todo) => {
   return <Todo key={todo} content={todo} />;
})}

key는 각 항목이 고유해야 하며, 일반적으로 ID나 고유 값을 사용합니다.
배열의 순서가 변경되거나 항목이 추가될 때 React는 key를 기준으로 어떤 항목이 변경되었는지 정확히 파악하고, 효율적으로 리렌더링을 합니다.

* key를 index로 사용할 때의 주의사항

배열 항목의 인덱스(index)를 key로 사용하는 것은 추천하지 않습니다.

배열이 변경될 때 항목의 순서가 바뀌거나 항목이 추가될 경우, 효율성이 떨어질 수 있습니다.
{DUMMY_TODOS.map((todo, index) => {
   return <Todo key={index} content={todo} />;
})}

index를 key로 사용하고 있지만, 배열에 항목이 추가되거나 삭제될 때 리액트가 항목의 위치를 정확히 추적할 수 없기 때문에 리렌더링이 비효율적이 될 수 있습니다.

4. 스프레드 연산자 사용

배열이나 객체의 값을 간편하게 복사하거나 분배할 수 있습니다.

map( )을 사용하여 각 항목을 렌더링할 때, 더 깔끔하게 코드를 작성할 수 있습니다.
<div className="card-container">
   {cardData.map((data) => (
      <Card key={data.title} {...data} />
   ))}
</div>

각 항목을 Card 컴포넌트의 props로 전달할 때 스프레드 연산자(...data)를 사용합니다.
Card 컴포넌트는 title, content, img 등을 각각의 props로 받을 수 있습니다.

스프레드 연산자(...data)는 각 항목을 props로 쉽게 전달할 수 있게 해주며, 이렇게 하면 코드가 더 깔끔하고 관리하기 쉬워집니다.
const cardData = [
   { title: "React", content: "Learn React", img: "react.png" },
   { title: "Cat", content: "Cute Cat", img: "cat.png" },
   { title: "Dog", content: "Cute Dog", img: "dog.png" },
];

5. 배열 렌더링 방법

배열 렌더링 방법에는 map( )과 props 전달이 있습니다.

1. props로 전달

방법 1 : 배열을 컴포넌트에 props로 전달하기

배열을 전체로 한 번에 전달하는 방식입니다.
DUMMY_TODOS 배열을 props로 전달하여 Todo 컴포넌트에서 처리하는 방법을 보여줍니다.

// 방법 1
export default function App() {
   return (
      <ul>
         <Todo todos={DUMMY_TODOS} />
      </ul>
   );
}

// Todo 컴포넌트
export default function Todo({ todos }) {
   return (
      <div>
         {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
         ))}
      </div>
   );
}

Todo 컴포넌트가 배열(todos)을 받고 map( )을 사용하여 각 항목을 렌더링합니다.
todos를 props로 전달받아 하위 컴포넌트에서 배열을 처리하는 방식입니다.

2. map( ) 함수

방법 2 : map( ) 함수로 직접 렌더링하기

map( )을 사용하여 배열을 바로 렌더링하는 방식입니다.

DUMMY_TODOS 배열을 map( )으로 순회하면서 각 항목을 Todo 컴포넌트로 직접 렌더링합니다.
// 방법 2
export default function App() {
   return (
      <ul>
         {DUMMY_TODOS.map((todo) => {
            return <Todo key={todo} content={todo} />;
         })}
      </ul>
   );
}

// Todo 컴포넌트
export default function Todo({ content }) {
   return <li>{content}</li>;
}

배열을 직접 렌더링하는데, 각 항목에 대해 Todo 컴포넌트를 호출하여 렌더링합니다.
props로 content를 전달하여 컴포넌트 안에서 해당 항목을 표시합니다.

6. UI 업데이트

배열 데이터가 변경될 때 UI 업데이트

배열 데이터가 변경되면, React는 자동으로 UI를 리렌더링합니다.

새로운 항목을 배열에 추가하려면 setState로 새로운 배열을 생성해야만 React가 이를 감지하고 화면을 업데이트할 수 있습니다.
const [todos, setTodos] = useState(DUMMY_TODOS);

function addTodo() {
   setTodos((prevTodos) => [...prevTodos, "New Task"]);
}

setTodos를 호출할 때 새로운 배열을 생성하여 상태를 업데이트합니다.
그에 따라 컴포넌트가 다시 렌더링되도록 합니다.

51일차 후기

자바스크립트를 사용할때 forEach보다 map을 더 많이 사용했어서 익숙했습니다.

캡스톤 당시에 리액트의 동적 컨텐츠 렌더링 부분까지 독학했어서.. 어렵진 않았습니다.

교수님이 하신 코드를 보고 제가 작성한 코드를 보면 아직 간결하게 작성하는 방법을 모르는건지.. 많이 미숙함이 느껴지는 것 같습니다. 더 열심히해야겠어요.. ᕙ(⇀‸↼‵‵)ᕗ