이미지를 화면에 보여줄 때는 Image라는 컴포넌트를 사용합니다. 이 컴포넌트를 배우기 위해 실제로 사용해야 할 이미지가 아닌 다른 연습용 이미지를 불러오겠습니다.

참고로 리액트 네이티브 프로젝트에서 이미지를 위한 디렉터리는 여러분 마음대로 지정해도 됩니다. 이 책에서는 assets라는 디렉터리에 이미지를 정리해 사용할 것입니다. images와 같은 서브 디렉터리를 만드는 것도 필수 작업은 아니므로 생략해도 무방합니다.

assets/images 디렉터리를 보면 다음과 같은 파일이 있습니다.

기본적으로 이미지가 young_and_happy.png와 같은 형태로 딱 하나만 있어도 불러와 사용하는 데 전혀 지장이 없습니다. 이와 같이 이미지가 여러 개 있는 이유는 화면의 밀도에 따라 다른 이미지를 보여주기 위함입니다.

여기서 맨 위에 @2x 또는 @3x가 붙어있지 않은 이미지의 크기는 200px × 200px입니다. 그리고 @2x가 붙어있는 이미지의 크기는 400px × 400px(2배), @3x가 붙어있는 이미지의 크기는 600px × 600px(3배)입니다.

기술이 발전하면서 디바이스의 크기는 비슷하지만 화면의 해상도가 갈수록 높아지고 있습니다. 고해상도의 모바일 디바이스에서는 해상도가 높은 이미지를 보여줘야 더욱 선명하게 보입니다.