2. React, 리스트와 키, 폼

 

 

서론

React상에서의 리스트와 Key, 그리고 폼에 관련된 내용을 공부하고 정리하였다. 

 

---

 

 

본론

 

리스트

목록 표현시 자주 사용하는 List에서 우리는 map과 foreach의 사용을 선택을 하는 경우가 있다. 

다음의 예시는 각각 map과 foreach를 사용하는 함수형 컴포넌트이다. 

 

#map

function ExampleMap() {

  let numberArray = [1, 2, 3, 4, 5];

  let returnValue = numberArray.map((num) =>
      <li key={num.toString()}>
        {num}
      </li>
    )
  return (
    <div className="list-numbers">
      <ul>{numberArray}</ul>
      <ul>{returnValue} </ul>
    </div>
  );
}

 

#foreach

function ExampleForeach() {
  let numberArray = [1, 2, 3, 4, 5];

  let returnValue = numberArray.forEach(num => 
    <li key={num.toString()}>
      {num*num}
    </li>
  );
  return (
    <div className="list-numbers">
      <ul>{numberArray}</ul>
      <ul>{returnValue}</ul>
    </div>
  );
}

 

 

forEach메서드를 사용하면 배열의 각 요소를 반복하여 함수를 실행할 수 있습니다. forEach메서드는 아무 것도 반환하지 않으므로 메서드의 반환 값을 얻으 려고 forEach하면 undefined됨으로 값이 나타나지 않으며,

 

map방법은 이 방법과 매우 유사하여 forEach배열의 각 요소에 대해 함수를 실행할 수 있으나 차이점은 map 메서드가 이 함수의 반환 값을 사용하여 새 배열을 생성한다. map소스 배열의 각 요소에 콜백 함수를 적용하여 새 배열을 만듭니다.

즉, map 메서드의 경우 요소값을 다른 값으로 mapping한 새로운 배열을 생성하기 위한 고차함수라 할 수 있다. 

 

 

Key

key는 다른 항목들 사이에서 고유하게 식별할 수 있는 것을 사용한다.

가령 DB의 게시판의 게시글 리스트를 호출할 경우 key는 해당 게시글의 고유 넘버일것이다. 

해서, 결론적으로 key는 어떠한 항목을 변경하거나 추가 또는 삭제할 때, 이것을 식별하는데 사용된다.

 

React상에서의 Key의 특징

1. 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용

2. key에 인덱스를 사용하는 것은 권장X -> 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생 가능

-> ❗️🧐

DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성하는데 key를 index로 사용하는 경우에는 배열의 처음이나 중간에 새로 데이터가 삽입,삭제시 그 부분만을 캐치하지 못한다

 

3. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.

 

 

#key를 사용한 데이터 리스트 출력 

 

function NotUseKeyListItem(props) {
  return (
      <div className="list-numbers">
        <ul>{props.numbers}</ul>
        <ul>{props.value}</ul>
      </div>
    );
}

function UseKeyList(props) {
  const posts = props.posts;
  console.log('test', posts)
  const listItems = posts.map((post) =>
    <NotUseKeyListItem key={post.id} value={post.title}></NotUseKeyListItem>
  );
  return (
    <div className="list-numbers">
      {listItems}
    </div>
  );
}

const posts = [
    {id: 1, title: '마동석', content: '22년생'},
    {id: 2, title: '한석구', content: '33년생'}
  ];

 

posts 안의 데이터들은 각각 고유의 id가 있으며 이를 key로 활용하여 값을 추출할 수 있다. 

 

 

폼

제어컴포넌트라 불리는 기술.. 

React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. - 설명은 React 공식문서와 동일

 

폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트되며 React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트된다

 

폼에 대한 부분은 기본 from과는 일맥상통한 부분이 대부분이기에 

예시 코드로 살펴보면서 설명한다.



 

 

---

 

 

 

결론

 

 

---

 

 

 

 

◇ 요약 ◇

① 

②

③

④

⑤

 

 

 

 

참고자료