Section 3. map을 통한 리스트 렌더링 및 style 동적 적용

📍 배열 rendering - map

전달받은 data가 배열 혹은 객체로 이루어져 있을 때, 몇개의 데이터가 들어올지, 생성될지 우리는 모르기 때문에 인덱스에 하나하나 접근하여 하드코딩 하는 것은 비효율적일 뿐더러 사실상 불가능하다.

때문에, map()을 사용해서 동적으로 rendering하는 방법을 사용한다.

// props.items 는 객체값이다.
// map을 통해 객체 값들에 <ExpenseItem> component를 동적으로 rendering 한다.

{props.items.map((expense) => (
            <ExpenseItem 
                key={expense.id}
                title={expense.title}
                date={expense.date}
            amount={expense.amount}/>
        ))}

📍 key의 중요성

배열로 이루어진 data를 map을 통해 렌더링하는 경우, key값을 설정해두지 않으면 어떤 문제가 일어날까?

map을 통해 적용하는 component가 <div> ... <div/> 로 이루어져 있다고 가정해보자.

배열으로 이루어진 state를 update하였을 때, 즉 배열에 새로운 state값을 push 했을 때 브라우저에서는 해당 아이템이 가장 상단에 보이지만 개발자 도구를 열어 코드를 확인해보면 렌더링 되는 div 목록 가장 밑에 div가 추가되는 것을 볼 수 있다. 이러한 현상은 왜 일어나는걸까?

그 이유는 리액트가 배열 state에 새로운 아이템이 추가되면 우선 div 목록의 가장 마지막 아이템으로 렌더링하고, div 목록의 모든 아이템을 순회하면서 아이템을 업데이트하고 컨텐츠를 교체하는 작업을 한다.

다시 말해, 기존 배열의 길이와 렌더링된 아이템의 개수를 체크한다. 이때 각각의 아이템이 동일해 보이기 때문에 (모두 div) 어느 위치에 추가해야하는지 리액트가 바로 알 수 없다. 따라서 일단 가장 마지막에 위치시키고 컨텐츠들을 업데이트하는 방식으로 동작하는 것이다.

결과적으로 보면 브라우저에서 잘 동작하는 듯 하나, 성능상에서 보면 아주 비효율적이다.

💡 리액트에게 새로 추가된 아이템이 어디에 위치해야해!!! 를 알려줄 수 있는 방법이 바로 key를 활용하는 방법이다

📍 Key

key는 어느 component에서나 쓸 수 있는 기본적인 prop이다. custom component이든 html 요소이든 상관없이 모두에서 사용 가능하다. key를 사용해서 react가 list item과 같은 데이터 속에서 각 아이템이 무엇인지 식별할 수 있도록 한다.

만약 props로 전달받은 배열에 key값으로 사용할만한 요소가 있다면 해당 요소를 사용하면 된다. 하지만 그런 요소가 없다면, 배열 값들을 map을 돌려서 component에 적용할 때, index값을 같이 전달 받아서 key값으로 넣어주면 된다.

하지만,, index를 key 값으로 사용하는 것은 장려되지 않는다. data에 직접적으로 붙어있는 고유의 값이 아닐뿐더러, 배열에서의 index는 계속해서 변화할 수 있기 때문에 버그가 일어날 수 있다.

// 이 prop에는 id값이 존재하기 때문에 key값을 id로 사용하면 된다
// 만약 없을 경우, map에서 Index값을 같이 받아서 사용하면 된다
{props.data.map((expense, index) => (
  			<ExpenseItem 
  				key={expense.id}
                title={expense.title}
				date={expense.date}
				amount={expense.amount}
			/>
  ))}

결론은 item을 map을 통해 component에 적용시킬 경우는 꼭 Key값을 사용해라 😊

📍 요소에 style을 동적으로 입히기

html 태그안에 직접적으로 style = {{}} prop을 전달하는 방법!

style을 html구문 안에서 직접적으로 전달할 때는 css property 이름과 그에 해당하는 값이 key-value의 형태로 전달되게 된다. 따라서 JSX에서도 이와 같은 형식을 사용한다.

style={{height: barFillHeight}}

const ChartBar = props => {
  let barFillHeight = Math.round((props.value / props.maxValue) * 100) + '%';

  return (
    <div className='chart-bar__fill' style={{height: barFillHeight}}></div>
  )
}

🚨 주의사항!

만약 적용하려는 style prop의 이름에 -가 들어가는 경우에는 ''로 해당 property를 감싸줘야 한다.
style={{'background-color': white}}

이보다 좋은 방법은 카멜 표기법을 사용해서 '-'를 사용하지 않는 것이다.
style={{'backgroundColor': white}}

🧐 { }가 2개인 이유 ??

props를 전달할 때는 기본적으로 propName = {} 의 형태로 전달한다.
prop의 형태로 전달하는 style 요소는 대부분 하드코딩된 height = '10%'와 같은 직접적인 값이 아닌 JS로 변수에 저장된 동적인 값일 것이다. JSX에서 JS의 값을 사용하려면 {} 안에 작성해야 한다는 규칙을 기억할 것이다. 따라서, props의 값에 전달하는 값이 JS의 값이므로, {} 안에 넣어서 전달하게 되고, 때문에 이중괄호를 쓰게 되는 것이다~

하지만 style을 적용하는 더 좋은 방법이 있다! 그건 이제 다음 section에서 다룰 예정이다 😇