React 핵심 개념 정리: useState, 스프레드 연산자, map 함수

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

초보~중급 React 개발자, 상태 관리 및 리스트 렌더링 기초를 학습하고자 하는 개발자

핵심 요약

• useState는 함수형 컴포넌트에서 상태 관리를 위해 사용되는 React Hook으로, const [state, setState] = useState(initialValue); 형식으로 사용
• 스프레드 연산자(...)는 배열/객체 복사 및 확장을 위해 사용되며, const newNumbers = [...numbers, 4];와 같이 활용
• map() 함수는 배열을 순회하며
요소를 생성하는 데 사용되며, key 속성은 리스트 항목의 고유 식별을 위해 필수적

섹션별 세부 요약

1. useState: 상태 관리 기초

• useState는 import React, { useState } from 'react';로 불러와 사용
• const [count, setCount] = useState(0); 예시에서 setCount를 호출해 상태를 업데이트
• 상태는 불변성 유지 원칙에 따라 직접 수정하지 않고 setState 함수를 통해 변경

2. 스프레드 연산자: 데이터 불변성 유지

• 배열 복사: const newNumbers = [...numbers, 4];
• 객체 복사: const updatedUser = { ...user, age: 26 };
• React 상태 업데이트 시 원본 데이터를 직접 수정하지 않고 복사한 데이터를 사용

3. map() 함수: 리스트 렌더링

• fruits.map((fruit, index) => (
• {fruit}
)) 형식으로 배열을
요소에 매핑
• key 속성은 React가 리스트 항목을 효율적으로 관리하기 위해 필요
• 리스트 항목이 동적으로 변경될 경우 key를 고유하게 설정해야 성능 향상

결론

• useState를 사용할 때는 상태 업데이트 함수를 통해 불변성 유지
• 스프레드 연산자는 객체/배열 복사 시 불변성 보장
• map() 사용 시 key 속성을 반드시 설정하고, 리스트 항목의 고유 식별자로 사용 가능