List & Key

React 내에서의 List

• 기본적으로 React 내에서의 배열을 엘리먼트 리스트로 만드는 방식은 아래와 같다.

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

• 아래와 같이 map() 을 이용한 방식으로 배열을 반복실행.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

• 아래와 같이 props로 number 배열을 전달받아 사용할 수도 있다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Key

• Key는 엘리먼트 리스트를 만들 때 반드시 포함해야 하는 문자열 어트리뷰트이며, 각 엘리먼트에 안정적인 고유성을 부여한다.
• Key는 React 컴포넌트 사이에서 전달받는 값이며, li 등의 하위의 자식요소로 전달하지 않는다!!!
• Key는 형제 사이에서 반드시 고유한 값으로 지정되어야 한다. 전체범위 내에서는 고유하지 않아도 된다.
• Key는 React가 어떤 항목을 변경/추가/삭제할지 식별하는 것을 돕는다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

• 대부분의 경우에는 데이터의 ID를 Key로 사용한다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

• 데이터의 ID 등이 존재하지 않는 경우에 각 요소의 index를 Key로 사용하기도 하나, 각 요소의 순서가 변경될 수 있는 경우에는 권장하지 않는다. 성능의 저하 혹은 컴포넌트의 state와 관련된 문제가 발생될 수 있다. 또한 Key를 별도로 명시하지 않았다면, React는 기본적으로 index를 Key로 사용한다.

const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

• 아래의 코드는 Key를 언제, 어떻게 사용해야하는지 도움이 될 코드이므로 꼭 읽어보자. 일반적으로 map() 내부의 엘리먼트에 key가 사용된다.

// 잘못 사용된 Key
function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

// 올바르게 사용된 Key
function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

// 아래는 직접 정리해본 코드이며 {...}의 사용과 map()의 사용을 중심으로 보면 좋을 것 같다.

const StudyFetch = () => {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/techoi/raw-data-api/main/simple-api.json"
    )
      .then(function (response) {
        return response.json();
      })
      .then(function (myJson) {
        let result = myJson.data.people;
        result.map((person, index) => {
          person.id = index;
        });
        setData(result);
      })
      .catch((error) => {
        setError(`ERROR!! :: ${error.message}`);
      });
  }, []);
  if (error != null) {
    return <p>{error}</p>;
  }
  if (data == null) {
    return <p>Loding ....</p>;
  }

// 리스트 1. data는 위에서 fetch를 이용해 가져옴
  const Persons = (props) => {
    return (
      <li>
        name : {props.name} <br />
        age: {props.age} <br />
        id : {props.id} <br />
      </li>
    );
  };
  const myPersonList = data.map((person) => (
    <Persons key={person.id} name={person.name} age={person.age} />
  ));

// 리스트 2
  const todos = [
    { id: 1, inner: "work1" },
    { id: 2, inner: "work2" },
    { id: 3, inner: "work3" },
    { id: 4, inner: "work4" },
  ];

  const Items = (props) => {
    return <li>{props.inner}</li>;
  };
  const todoList = todos.map((todo) => <Items key={todo.id} {...todo} />);
  return (
    <div>
      <br />
      <br />
      <p>People</p>
      <ol>{todoList}</ol>
      <ol>{myPersonList}</ol>
    </div>
  );
};

export default StudyFetch;