06 스터디 퀴즈 [컴포넌트의 반복]

[PaulMuadDibUsul]

data.map((item, index) => (
  <>
    <div key={index}>
      <Box> {item.content} </Box>
    </div>
  </>
))

잘못된 예시로서,

Warning: Each child in an array or iterator should have a unique “key” prop.

이 에러가 난다.

해결 방법은?

[PaulMuadDibUsul]

function TeamMemberList() {
  const [members, setMembers] = useState([
    { name: "명수", role: "Front-end Architect" },
    { name: "혜림", role: "Front-end Developer" },
    { name: "현정", role: "iOS Developer" },
    { name: "미리", role: "3D Web Developer" },
  ]);

  const removeMember = index => {
    const newMembers = members.filter((_, idx) => idx !== index);
    setMembers(newMembers);
  };

  return (
    <div>
      {members.map((member, index) => (
        <div key={index}>
          {member.name} - {member.role}
          <button onClick={() => removeMember(index)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

이 코드에서 권장하지 않는 부분과 이유?

[andrewylies]

React에서 배열에 새 항목을 추가할 때 배열의 array.push 함수를 사용하지 않고 array.concat을 사용해야하는 이유는?

[seokhj]

map() 함수에 key값을 선언해야하는 이유 2가지를 말씀해보세요.

[cheesepizza453]

ul li 리스트를 만드는 배열이 있다.

리액트 환경에서

1. 맨 뒤쪽에 push할 때 어떻게 리렌더링 되나요?
2. 맨 앞에 unshift 했을 때 어떻게 리렌더링 되나요?

---

push : 배열의 맨 끝에 값을 추가 pop : 배열의 맨 끝에 값을 제거 unshift : 배열의 맨 앞 값을 추가 shift : 배열의 맨 앞 값을 제거

---

[seokhj]

스프레드 연산자를 남발하는 것이 항상 바람직하지 않은 이유는 몇 가지가 있습니다. 주요 이유 중 일부는 다음과 같습니다:

가독성 감소:

스프레드 연산자를 과도하게 사용하면 코드의 가독성이 저하될 수 있습니다. 복잡한 표현식이나 중첩된 구조에서는 어떤 값들이 전개되고 있는지 이해하기 어려울 수 있습니다. 성능 고려:

스프레드 연산자는 간단한 배열 합치기에는 효과적이지만, 대규모 데이터나 반복 작업에서 사용할 경우 성능 이슈가 발생할 수 있습니다. 특히, 큰 배열을 전개할 때 메모리 소비가 커질 수 있습니다. 불변성 유지 어려움:

스프레드 연산자는 새로운 배열을 생성하기 때문에 원본 배열의 불변성을 유지하기 어렵습니다. 불변성은 상태 관리 및 예측 가능한 동작을 유지하는 데 중요한데, 스프레드 연산자는 새로운 객체를 만들어내므로 원본 객체를 직접 수정하지 않더라도 불변성을 유지하기 어려울 수 있습니다. 리팩터링 어려움:

코드가 스프레드 연산자에 의존하면 나중에 코드를 리팩터링하거나 수정할 때 어려움이 발생할 수 있습니다. 특히, 다른 방식으로 데이터를 다루거나 변경할 때 유연성이 떨어질 수 있습니다. 다양성 부족:

스프레드 연산자는 주로 배열과 객체에서 사용되지만, 다른 자료구조에서는 제한적입니다. 따라서 코드가 다양한 데이터 유형과 상호 작용해야 할 때 유용하지 않을 수 있습니다. 이러한 이유로 인해 스프레드 연산자를 적절히 사용하는 것이 중요합니다. 간단하고 명확한 상황에서 사용하면 좋지만, 복잡한 상황에서는 다른 방법을 고려하는 것이 좋습니다. 코드의 명확성과 성능을 모두 고려하여 사용하는 것이 좋습니다.

스프레드 함수를 남발하면 안되는 이유