[RN] 빈 태그(<></>) 대신 Fragment 사용하기! (map 함수 빈 태그에 key값 넣어주기)

포스팅 부제에도 나와있듯이, RN으로 개발을 하다보면 map() 함수로 특정 배열을 랜더링 시킬 때,

함수를 감싸는 부모 컴포넌트를 View가 아닌 빈 태그(<></>) 로 지정할 때가 있다.

 

테스트 코드

const tmpArr = [0,1,2,3,...]

return (
	...
   	tmpArr.map((res, idx)=>{
    	return (
        	<>
            	<Text>{res}</Text>
            </>
        )
    })
    ...
)

...

 

위와 같은 테스트 코드를 랜더링 시키면, React Native는 

Warning: Each child in a list should have a unique "key" prop.

 

우리가 자주 보는 Warning을 뱉어낸다.

 

사실 우리가 원하는데로 랜더링은 시킬 수 있지만, 해당 컴포넌트를 랜더링 시켜주는 페이지를 들어갈 때 마다

디버깅 경고창이 계속 뜨는건 불편하지 않은가.

 

그렇다고 빈 태그에 key값은 문법상 부여할 수 없으니,

이럴 때 부모 컴포넌트를 빈 태그가 아닌 Fragment로 감싸주고 key값을 주면 간단하게 해결된다.

 

https://reactjs-kr.firebaseapp.com/docs/fragments.html

Fragments – React

 

Fragment는 공식 문서에서도 나와있듯이, 실질적으로 아무 역할도 하지 않는 컴포넌트이다.

 

수정된 코드

const tmpArr = [0,1,2,3,...]

return (
	...
   	tmpArr.map((res, idx)=>{
    	return (
        	<Fragment key={idx}>
            	<Text>{res}</Text>
            </Fragment>
        )
    })
    ...
)

...

 

깔끔하게 해결!