React 스터디 기록 #5 - 조건부 렌더링 & 반복 렌더링

저번 4장 : 컴포넌트 상태 개념 정리에 이어
7장 : 조건부 렌더링과 반복 렌더링 개념정리 시작하겠습니다.

---

1. 조건부 렌더링 (Conditional Rendering)

조건부 렌더링은 특정 조건에 따라 서로 다른 UI를 보여주는 방식이다.
React에서는 JSX 내부에서 조건을 활용해 화면을 제어한다.

❶ if문을 사용한 조건부 렌더링

: 가장 기본적인 방식은 if문을 사용해 return 값을 분기하는 것이다.

if (isLogin){
  return <Logout />
}
return <Login />

• 조건에 따라 완전히 다른 컴포넌트를 렌더링 할 때 적합
• JSX 내부가 아니라 함수 상단에서 분기
  
  

❷ 삼항 연산자 (? :)

: JSX 내부에서 가장 많이 사용하는 방식

{isLogin ? <Logout /> : <Login />}

특징 :

• JSX 안에서 바로 사용 가능
• 간결하지만 복잡해지면 가독성 저하
  
  

❸ AND 연산자 (&&)

: 조건이 true일 때만 렌더링

{isLogin && <Logout />}

특징 :

• false일 경우 아무것도 렌더링되지 않음
• "조건이 참일 때만 보여주기"에 적합
  
  

❹ 변수에 조건 결과 저장

: 조건 결과를 변수에 저장 후 JSX에서 사용

let message
if (isLogin) {
  message = "환영합니다"
} else {
  message = "로그인해주세요"
}

return <p>{message}</p>

→ 복잡한 조건일 때 가독성 향상

❺ 조건에 따른 클래스명 적용

<div className={isActive ? "active" : "inactive"} />

또는

<div className={isActive && "active"} />

→ 스타일 제어에 매우 자주 사용됨

⭐️ 조건부 렌더링 핵심 정리

• 조건은 state 또는 props 기반으로 결정된다.
• JSX 내부에서는 삼항, && 연산자 사용.
• 복잡하면 변수 분리.
• UI 제어는 결국 "상태 기반 분기" 이다.
  
  

---

2. 반복 렌더링 (List Rendering)

배열 데이터를 기반으로 여러 요소를 반복해서 출력하는 방식이다.

❶ map() 메서드 사용

: React에서 가장 표준적인 반복 렌더링 방식

{items.map((item, index) => (
 <li key={index}>{item}</li>
))}

특징:

• 배열을 JSX 배열로 변환
• 가장 권장되는 방법
  
  

❷ key의 중요성

: 반복 렌더링 시 반드시 key 속성 필요

<li key={item.id}>{item.name}</li>

이유 :

• React가 요소를 구분하기 위해 필요
• 효율적인 리렌더링을 위해 사용
• index는 최후의 수단
  
  

❸ for문 사용

for (let i=0; i<items.length; i++) {
  elements.push(<li key={i}>{items[i]}</li>)
}

• 가능은 하지만 JSX 문법상 map보다 불편
• 실무에서는 거의 map 사용
  
  

❹ forEach는 사용하지 않음

forEach는 값을 반환하지 않기 때문에 직접 JSX로 사용 불가
→ 별도 배열에 push 후 렌더링해야 함

❺ reduce 사용

items.reduce((acc, item) => {
  acc.push(<li key={item}>{item}</li>)
  return acc
}, [])

• 가능하지만 가독성 측면에서 map이 더 적합

---

3. 조건부 + 반복 렌더링 조합

{itens.length > 0 ? (
  items.map(item => <li key={item.id}>{item.name}</li>)
) : (
  <p>데이터가 없습니다</p>
)}

또는

{items.length === 0 && <p>데이터가 없습니다</p>}

→ 실제 프로젝트에서 매우 자주 사용

---

7장 전체 핵심 요약

1. 조건부 렌더링은 상태 기반 UI 제어 방식이다.
2. 삼항 연산자와 && 연산자가 가장 많이 사용된다.
3. 반복 렌더링은 map이 표준 방식이다.
4. key는 필수이며, 고유값을 사용하는 것이 가장 좋다.
5. 조건과 반복은 항상 함께 사용된다.

---

4장에서 상태(state)의 개념을 이해했다면,
7장에서는 그 상태를 기반으로 화면을 어떻게 제어할 것인지를 배우는 단계였습니다.

이제 개념 정리는 마쳤으니,
다음 글에서는 이를 실제로 적용한 3주차 과제
카운터 앱과 리스트 앱 구현 과정을 정리해보겠습니다.