[React18] 리스트와 Key

 -- 여러개의 컴포넌트 렌더링 하기

 엘리먼트 모음을 만들고 {}를 이용하여 JSX에 포함시킬수 있다.

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

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

-- 일반적으로 컴포넌트 안에서 리스트를 렌더링 합니다.

const numbers = [ 1,2,3,4,5 ];

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers}/>);

-- 위와 같이 코드를 작성할경우 각각의 항목에 key를 넣어야 한다고 표시가 됩니다.

-- 이를 위하여 map() 안에서 리스트의 각각의 항목에 key를 할당하겠습니다.

 >> KEY

  -- key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

  -- 대부분 데이터의 ID를 key로 사용합니다.

   -- 렌더링한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 인덱스를 Key로 사용할 수 있습니다.

   -- 하지만 이는 권장하는 방법이 아니므로 사용하지 마

 

 

Key로 컴포넌트 추출하기

 >> 키는 주변 배열의 context에서만 의미가 있습니다

 >> 예를 들면 ListItem 컴포넌트를 추출한 경우 ListItem안에 있는 <li> 엘리먼트가 아니라 배열의 

 >> <ListItem /> 엘리먼트가 key를 가져야 합니다.

 >> map() 함수 내부에 있는 엘리먼트에 key를 넣어주는게 좋습니다 

여러개가 되어야할 컴포넌트가 map()안에 들어가고 이렇게 들어간 컴포넌트안에 key를 넣어준다

 

Key는 형제 사이에서만 고유한값이어야 한다.

 >> Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.

 >> 두개의 다른 배열을 만들때 동일한 Key를 사용할 수 있다. 

function Blog(props){
  const sidebar = (
    <ul>
      {props.posts.map( post => 
        <li key={post.id}>
            {post.title}            
        </li>
      )}
    </ul>
  )
  const content = props.posts.map( post =>
    <div key={post.id}>
      <h3>{post.title}</h3>                          
      <p>{post.content}</p>
    </div>
  )
  
  return(
    <div>
      {sidebar} 
      <hr />
      {content}
    </div>
  )
}

const posts = [
  {id : 1, title:'Hello World', content : 'Welcom to learning React!'},
  {id : 2, title:'Installation', content : 'You can install React from npm.'}
]

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Blog posts={posts} />);

 

React에서 Key는 힌트를 제공하지만 컴포넌트로 전달지는 않습니다. 즉 컴포넌트에서 key와 동일한 값이 필요하다면,

다른이름의 prop으로 명시적으로 전달해야 합니다.

const content = posts.map( post =>
	<Post 
    	key={post.id}
        id={post.id}
        title={post.title}
    />
);

즉  Post 컴포넌트는 props.id를 읽을순 있지만 post.key는 읽을수 없습니다.

 

 

JSX에 map() 포함시키기 

  >> JSX를 사용하면 중괄호 { } 안에 모든 표현식을 포함할수 있으므로 map() 함수의 결과를 인라인으로 처리할 수 있다.

  >> 이 방식을 사용하면 코드가 더 깔끔해 지긴 하지만, 가독성을 위해 변수로 추출해야 할지, 인라인으로 넣을지는 직접 판단해야 한다. 보통 map()함수가 너무 중첩된다면 컴포넌트로 추출하는게 좋다.

<전>

<후>