6. 컴포넌트 반복 문제

1. 자바스크립트에서 반복되는 컴포넌트를 렌더링하기 위해 사용하는 배열 객체 내장 함수는?
2. key 값은 언제나 유일해야 한다. (O/X)
3. key 값은 배열의 각 데이터가 가진 ( )으로 설정하는 것이 적절하다.
4. 각 데이터의 ( )이 없을 때 ( )값을 사용하면 된다. 단 이 방법은 효율적으로 리렌더링하지는 못한다.
5. 리액트에서는 값을 업데이트를 할 때 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 하는데 이를 ( )라고 한다.
6. push 함수는 기존 배열 자체를 변경해주지만, concat은 새로운 배열을 만들어준다. (O/X)
7. 불변성을 유지하면서 배열의 특정 항목을 지울 때 배열의 내장 함수 ( )를 사용한다.
8. 이 코드대로 하면 개발자 도구 콘솔에 경고창이 띄워진다. 경고가 띄우지 않게 처리하시오.

// IterationSample.js

const IterationSample = () => {
  const weather = ['맑음', '흐림', '비', '눈'];
  const weatherList = weather.map(w => <li>{w}</li>);
  return <ul>{weatherList}</ul>;
};

export default IterationSample;

9. 코드가 제대로 완성이 된 상태가 아니다. 문제점을 찾고 코드를 완성시키시오.

// IterationSample.js

import {useState} from 'react';

const IterationSample = () => {
  const [names, setNames] = useState([
    { text: '맑음' },
    { text: '흐림' },
    { text: '비' },
    { text: '눈' }
  ])
  const [inputText, setInputText] = useState('');
  
  const onChange = e => setInputText(e.target.value);
  const onClick = () => {
    const nextNames = names.concat({
      text: inputText
    });
    setNames(nextNames);  
    setInputText('');  
  };

  const namesList = names.map(name => <li key={name.id}>{name.text}</li>);
  return (
    <>
      <input value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>{namesList}</ul>
    </>
  );
};

export default IterationSample;

정답
1. map함수
2. O
3. 고윳값
4. 고윳값, index
5. 불변성 유지
6. O
7. filter
8.

// IterationSample.js

const IterationSample = () => {
 const weather = ['맑음', '흐림', '비', '눈'];
 const weatherList = weather.map((w, index) => <li key={index}>{w}</li>);
 return <ul>{weatherList}</ul>;
};

export default IterationSample;

// IterationSample.js

import {useState} from 'react';

const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '맑음' },
    { id: 2, text: '흐림' },
    { id: 3, text: '비' },
    { id: 4, text: '눈' }
  ])
  const [inputText, setInputText] = useState('');
  
  const onChange = e => setInputText(e.target.value);
  const onClick = () => {
    const nextNames = names.concat({
      text: inputText
    });
    setNames(nextNames);  
    setInputText('');  
  };

  const namesList = names.map(name => <li key={name.id}>{name.text}</li>);
  return (
    <>
      <input value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>{namesList}</ul>
    </>
  );
};

export default IterationSample;