anott
기록
anott
  • 분류 전체보기
    • 오라클
    • SQL
    • 알고리즘
      • 백준저지
      • 프로그래머스
      • SWEA
    • 개발 관련
    • 프론트엔드
      • TypeScript, Next.js
      • React 공식문서 읽기
hELLO · Designed By 정상우.
anott

기록

프론트엔드/React 공식문서 읽기

리스트와 Key

2022. 5. 30. 17:23
https://ko.reactjs.org/docs/lists-and-keys.html를 읽고 정리한 글입니다

 

  • 리스트 컴포넌트
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);
  • Key
    • React가 어떤 항목을 변경, 추가, 삭제할지 식별 
    • 엘리먼트의 안정적인 고유성 부여하기 위함
    • 리스트 내에서 고유하게 식별할 수 있는 항목의 문자열 사용하는 것 권장 (예 : ID)
    • 안정적인 ID가 없다면 최후의 수단으로 index 사용 ⇒ 항목의 순서가 바뀔 수 있는 경우 권장 안 함
      • 성능 저하 또는 state 문제 발생 가능
    • 주변 배열의 context에서만 의미 ⇒ map() 함수 내부의 엘리먼트에 넣는 것 권장
    • 배열 안 형제 사이에서 고유해야하지만, 전체 범위에서는 고유할 필요 없음
    • React에서 key는 힌트를 제공할 분 컴포넌트로 전달하지는 않음 ⇒ 다른 컴포넌트에서 필요하다면 다른 이름의 prop으로 명시적으로 전달
// Post 컴포넌트는 props.id로 post.id 값을 받을 수 있지만 props.key는 불가능
const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);
  • JSX에 map() 함수를 넣을 수 있지만 너무 중첩될 경우 컴포넌트로 추출할 것 ⇒ 변수로 추출할지 인라인으로 넣을지는 개발자의 선택

 

저작자표시 비영리 (새창열림)

'프론트엔드 > React 공식문서 읽기' 카테고리의 다른 글

State 끌어올리기  (0) 2022.06.03
폼  (0) 2022.06.02
조건부 렌더링  (0) 2022.05.28
이벤트 처리하기  (0) 2022.05.26
State and Lifecycle  (0) 2022.05.25
    '프론트엔드/React 공식문서 읽기' 카테고리의 다른 글
    • State 끌어올리기
    • 폼
    • 조건부 렌더링
    • 이벤트 처리하기
    anott
    anott

    티스토리툴바