React Rendering

안녕하세요. 오늘은 리액트 렌더링에 대해 알아볼게요.

 

 

 

렌더링(Rendering)

 

렌더링은 우리가 작성한 코드(JSX/TSX)를 실제로 브라우저 화면(UI)에 출력하는 과정이에요.

 

React는 코드의 상태(state)나 속성(props)이 변경되면

 

전체 화면을 다시 그리는 대신, 변경된 부분만 효율적으로 다시 렌더링 해요.

 

이러한 방식 덕분에 React는 빠르고 효율적인 UI 업데이트가 가능해요.

 

 

 

조건부 렌더링(Conditional Rendering)

 

조건부 렌더링은 특정 조건에 따라 UI를 다르게 보여주는 것을 의미해요.

 

React에서는 여러 가지 방법으로 조건부 렌더링을 구현할 수 있어요.

 

 

1. if문 사용

 

JSX 바깥(return 위)에서 조건문을 사용하여 조건에 맞는 컴포넌트를 선택적으로 반환해요.

function Item({ name, isPacked }: { name: string; isPacked: boolean }) {
  if (isPacked) {
    return <li>{name} ✔️</li>;
  } else {
    return <li>{name}</li>;
  }
}

 

 

2. 삼항 연산자 사용

 

JSX 내부에서 한 줄로 간결하게 표현할 수 있어요.

<li>{isPacked ? name + ' ✔️' : name}</li>

 

3. 논리 연산자(&&) 사용

 

조건이 참일 때만 특정 UI를 표시해요.

<li>
  {name} {isPacked && '✔️'}
</li>

 

 

 

배열 렌더링(Array Rendering)

 

리액트에서는 여러 데이터를 한꺼번에 화면에 표시하기 위해 배열을 렌더링 해요.

이때 map() 메서드를 사용해 배열을 순회하면서 JSX 요소를 반환해요.

const people = ['홍길동', '임꺽정', '성춘향', '이몽룡', '김철수'];

 

 

1. map()을 사용한 전체 리스트 렌더링

 

모든 요소를 화면에 출력해요.

const listItems = people.map((person, index) => (
  <li key={index}>{person}</li>
));

 

 

2. filter()를 사용한 조건부 렌더링

 

특정 조건에 맞는 데이터만 필터링해서 표시할 수도 있어요.

const peopleDescription = [
  { id: 0, name: '홍길동', job: '학생' },
  { id: 1, name: '임꺽정', job: '교사' },
  { id: 2, name: '성춘향', job: '학생' },
  { id: 3, name: '이몽룡', job: '원장' },
  { id: 4, name: '김철수', job: '강사' },
];

const students = peopleDescription.filter(person => person.job === '학생');
const studentList = students.map(person => (
  <li key={person.id}>{person.name}</li>
));

 

 

 

key 속성의 중요성

 

React에서 배열을 렌더링 할 때, 각 요소에는 반드시 key 속성이 있어야 해요
key는 React가 어떤 항목이 변경, 추가, 삭제되었는지를 효율적으로 파악하는 기준이 돼요.

 

 

마지막으로 전체 코드의 예시와 요약정리 표예요.

import React from 'react';

interface ItemType {
  name: string;
  isPacked: boolean;
}

function Item({ name, isPacked }: ItemType) {
  return (
    <li>
      {name} {isPacked && '✔️'}
    </li>
  );
}

function RenderingExample() {
  const people = ['홍길동', '임꺽정', '성춘향', '이몽룡', '김철수'];

  const peopleDescription = [
    { id: 0, name: '홍길동', job: '학생' },
    { id: 1, name: '임꺽정', job: '교사' },
    { id: 2, name: '성춘향', job: '학생' },
    { id: 3, name: '이몽룡', job: '원장' },
    { id: 4, name: '김철수', job: '강사' },
  ];

  const listItems = people.map((person, index) => (
    <li key={index}>{person}</li>
  ));

  const students = peopleDescription.filter(person => person.job === '학생');
  const studentList = students.map(person => (
    <li key={person.id}>{person.name}</li>
  ));

  return (
    <div>
      <p>여행용 짐 목록</p>
      <Item name="과자" isPacked={true} />
      <Item name="음료수" isPacked={false} />

      <hr />
      <p>Map을 사용한 전체 리스트 렌더링</p>
      <ul>{listItems}</ul>

      <hr />
      <p>Filter를 사용한 조건부 렌더링</p>
      <ul>{studentList}</ul>
    </div>
  );
}

export default RenderingExample;

 

구분	설명	예시
렌더링(Rendering)	JSX → 브라우저 UI로 변환	return (<div>내용</div>)
조건부 렌더링	조건에 따라 다른 UI 출력	isPacked && '✔️'
배열 렌더링	여러 데이터 한 번에 표시	map() 사용
key 속성	React가 항목 식별에 사용	<li key={id}>

 

 

 

여기까지 리액트 렌더링에 대해 알아봤는데요.

 

렌더링을 배우면서 리액트가 변경된 부분만 효율적으로

 

다시 그려서 화면을 빠르게 업데이트한다는 점이 인상 깊었어요.