map(), 전개연산자 ...

 

 

백엔드 속이는 프론트엔드 성능 최적화, ‘Optimistic UI’ | 요즘IT

 

위의 요즘레터 보다가 그냥 정리해봄.

글 내용과는 상관없음. 소스만 참조.

---

.map() 함수

.map()은 배열에서 각 요소를 순회하면서 변형한 새 배열을 만드는 함수.

 

예시

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6]

• numbers.map(...)는 배열의 각 요소에 * 2를 적용
• 원본 배열은 그대로 있고, 새 배열을 반환

 

구조

const newArray = oldArray.map((item, index) => {
  return 변경할값;
});

 

 

언제 사용?

• 목록 데이터 UI로 출력할 때
• 리스트 항목 수정할 때 (특정 요소만 바꿀 때)
• 배열을 변형하고 싶은 모든 경우

---

Spread Operator 전개 연산자 (...) 

...은 객체나 배열을 펼쳐서 복사하거나 합칠 때 사용.

 

in 배열

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

• arr1을 펼쳐서 [1, 2, 3, 4] 새 배열을 만듦

 

in 객체

const obj1 = { name: 'Yeon', age: 26 };
const obj2 = { ...obj1, age: 31 };

console.log(obj2); // { name: 'Yeon', age: 31 }

• obj1을 복사해서 새 객체를 만들고, age만 덮어씀

 

왜 필요할까?

불변성 유지를 위해. React에서는 상태를 직접 바꾸지 않고, 새 객체/배열을 만들어 교체해야 함.

const newTodo = { ...oldTodo, completed: true };

 

이렇게 하면 원본 oldTodo는 그대로 있고, completed만 바뀐 새 객체가 생긴다.

 

---

 

Todo 예제 코드(맨위 링크) 일부

setTodos(prevTodos =>
  prevTodos.map(todo =>
    todo.id === tempId
      ? { ...response.data, isTemporary: false }  // 서버 응답으로 대체
      : todo
  )
);

• todo.id와 tempId가 같은 경우 todo에 서버 응답 대체.
• response.data는 서버에서 온 객체.
• ...response.data → 기존 속성 펼치기
• isTemporary: false → 거기에 덮어쓰기

---

 

+ ❓ 왜 React에서는 상태를 직접 바꾸지 않고, 새 객체/배열을 만들어 교체해야 할까?

 

React는 "값이 바뀌었는지"를 "겉보기로" 판단하기 때문.

React는 컴포넌트 상태가 변경되었는지 판단할 때 참조(주소)가 바뀌었는지를 확인한다.

 

예시

const [user, setUser] = useState({ name: 'Yeon' });

 

 

상태를 직접 바꾸면(틀린 방법),

user.name = 'Lee';  // 이렇게 하면 내부 값은 바뀌지만
setUser(user);      // 이걸 해도 React는 "어? 참조는 그대로네?" → 변경된 걸 모름

 

 

이건 React 입장에서 user === user → true니까, "변화 없음"으로 착각함.

 

 

 

새 객체로 교체시(올바른 방법),

setUser({ ...user, name: 'Lee' });

• ...user로 기존 값 복사
• name: 'Lee'로 새로운 값 덮어쓰기
• 이건 새로운 객체이기 때문에 user !== 새객체 → React가 "변화 있음" 으로 인식함.

 

---

 

React의 렌더링 조건

React는 상태(state)나 props가 바뀌었을 때만 렌더링을 다시 하고, "바뀌었는지" 판단할 때 값이 아니라 주소(참조)를 비교한다.

 

직접변경	새 객체로 교체
obj.key = val	setState({ ...obj, key: val })
React는 못 알아챔	React가 변경 감지함
렌더링 안 됨	렌더링 정상 작동

 

 

한줄정리

React는 "얕은 비교(shallow compare)"로 상태 변화 감지하기 때문에, 불변성(immutability) 을 유지하면서 새 객체/배열을 만들어줘야 한다.