[처음 만난 리액트] React 책읽기 : Chapter 9-12 정리

[ 참고 서적 : 소플의 처음 만난 리액트(2판) - 한빛미디어 ]

 

✅ 조건부 렌더링 (Conditional Rendering)

조건에 따라 렌더링 결과가 달라지도록 하는 것

---

🔹 1. 엘리먼트 변수

• 리액트 엘리먼트를 변수처럼 저장해서 조건에 따라 선택적으로 렌더링

let button;
if (isLoggedIn) {
  button = <LogoutButton />;
} else {
  button = <LoginButton />;
}
return <div>{button}</div>;

---

🔹 2. 인라인 조건

▶ 인라인 If

• 조건문을 코드 안에 직접 집어넣는 방식
• 논리 연산자 && (AND) 사용
• 앞의 조건이 true일 때만 뒤의 엘리먼트가 렌더링됨
• {isLoggedIn && <LogoutButton />}

▶ 인라인 If-Else

• 삼항 연산자 ? : 사용
• 조건이 true면 첫 번째, false면 두 번째 항목을 렌더링
• 서로 다른 두 가지 엘리먼트를 조건에 따라 보여줄 때 사용
• {isLoggedIn ? <LogoutButton /> : <LoginButton />}

---

🔹 3. 컴포넌트 렌더링 막기

• 리액트에서는 null을 반환하면 화면에 아무것도 렌더링되지 않음
• 렌더링을 막고 싶을 때 유용

function Warning({ show }) {
  if (!show) return null;
  return <div>경고 메시지입니다!</div>;
}

 

---

📋 리스트 & 키 (List & Key)

같은 종류의 아이템을 순서대로 나열한 것
리액트에서는 리스트를 효율적으로 렌더링하기 위해 키(Key) 사용이 중요함

---

🔹 1. 리스트란?

• 같은 아이템을 순서대로 모아 놓은 구조
• 리액트에서 리스트는 주로 map() 함수를 통해 여러 컴포넌트를 렌더링할 때 사용됨

---

🔹 2. 여러 개의 컴포넌트 렌더링

const names = ['Tom', 'Jerry', 'Spike'];
const nameList = names.map((name) => <li>{name}</li>);

• map() 함수를 사용해 배열을 순회하며 컴포넌트를 생성
• 생성된 엘리먼트에는 반드시 key를 부여해야 함 ❗

---

🔹 3. 키(Key)란? 🎯

• 각 객체나 아이템을 구분할 수 있는 고유한 값
• 리액트가 리스트 내의 아이템을 변경/추가/삭제할 때 구분하기 위해 사용

---

🔹 4. 키값 사용법

 

사용 예시	특징	주의점
숫자 값 사용	가능은 하나, 중복될 수 있으므로 주의	배열에 중복된 숫자 X
id 사용 (추천) ✅	고유한 값이므로 가장 적합	보통 API나 DB에서 받아온 데이터의 id 사용
인덱스 사용	순서가 바뀌지 않는 경우에만 사용 가능	아이템 순서가 바뀌면 문제 발생 가능 ⚠

 

const list = items.map((item) => <li key={item.id}>{item.name}</li>);

🔸 주의: 키는 같은 리스트 내에서만 고유하면 됨
🔸 명시적 키 없으면, 리액트가 자동으로 배열 인덱스를 사용함 (비추천)

---

📄 폼(Form)이란?

사용자로부터 입력을 받기 위한 양식

---

🔹 제어 컴포넌트 (Controlled Component)

• 사용자의 입력값을 리액트 state로 제어
• 입력값을 항상 리액트가 관리 & 업데이트함

---

🔹 주요 입력 요소와 특징

 

요소	용도	리액트에서 처리 방식
input type="text"	한 줄 텍스트 입력	value로 값 관리
textarea	여러 줄 텍스트 입력	value로 값 관리
select	드롭다운 목록 선택	value로 선택값 관리
input type="file"	파일 업로드	읽기 전용 → 비제어 컴포넌트로 사용

---

🔹 여러 개의 입력 다루기

• 입력 필드마다 state를 따로 선언하여 관리
• 또는 객체 형태로 묶어 한 state에서 관리할 수도 있음

---

🔹 Input Null Value

• 입력 필드에 자유로운 입력을 허용하려면
  value={undefined} 또는 value={null} 로 설정 가능

---

 

🔄 Shared State (공유 상태)

여러 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 함께 사용하는 것.

---

🔼 State 끌어올리기 (Lifting State Up)

하위 컴포넌트에서 관리하던 state를 부모 컴포넌트로 올려서 공유

• 부모가 상태를 관리하고
• 하위 컴포넌트들은 props로 그 상태를 읽거나 업데이트

두 개 이상의 컴포넌트가 동일한 데이터를 공유해야 할 때 사용하는 기법으로,

리액트에서는 컴포넌트를 작게 나누고 재사용 가능하게 만드는 것이 중요하므로 자주 사용됨.

(공통 state를 부모 컴포넌트에서 관리하게 만들고,
필요한 자식 컴포넌트들엔 props로 내려줌)