React

React 완벽 복습

렌더링 리스트 및 조건부 Content

Keys 이해하기

• map을 사용할 때 key가 필요한 이유는 무엇일까?

• React는 데이터 리스트를 렌더링할 때 특별한 컨셉을 갖는데

  • 성능손실이나 버그없이 효율적으로 해당 리스트를 업데이트하고
  • 렌더링할 수 있는 개념

• key를 지정해주지 않으면

  • 새로운 아이템을 추가하면 목록의 마지막 아이템으로 생성
  • 모든 아이템을 확인하고 업데이트, 배열에 있는 순서와 맞춰보는
  • 성능 관점에서 좋지 않음

• key를 사용할 때는

  • 리스트의 아이템당 고유의 값(ID)이 필요
  • map의 두번째 인수로 index를 지정하여 자동적으로 관리될 수 있지만
  • 지정된 항목에 대한 인덱스가 항상 동일(순서가 바뀔 수 있는 경우에는 권장X)하고
  • 아이템의 내용에 직접 첨부되지 않기 때문에 버그에 노출될 수 있어 사용하지 않는 것이 좋다.
    
    
    
    

객체에서 숫자로 변환

• 최댓값 등을 구할 때 단순히 객체에서 숫자로 변환하는 과정

const Chart = (props) => {
  const dataPointValues = props.dataPoints.map(dataPoint => dataPoint.value) // value를 반환
  const totalMaximum = Math.max(...dataPointValues) // 배열의 모든 요소를 꺼내어 최댓값 구함

  return (
      {props.dataPoints.map((dataPoint) => (
        <ChartBar
          key={dataPoint.label}
          maxValue={totalMaximum}
        />
      ))}
  )
}

• dataPoint 객체를 단순히 숫자로만 바꿈