동적인 값을
중괄호 문법을 사용해
출력하는 것을 배웠으니
동일한 문법으로 이미지도
다양한 방식으로 로딩하거나
가리킬 수 있습니다
이미지를 이와 같이
표현해도 괜찮긴 합니다
이런 식으로 보여집니다
그러나 사실 이것이 최적의 방법은 아닙니다
정확히 말하자면 소스 속성 값이
최적이 아닌 이유는
이미지를 SRC 폴더와
assets 폴더에 표시하고 있습니다
이런 식으로 불러오면
리액트 작업물을 배포할 때
이미지가 사라질 수도 있습니다
배포는 차후에 상세히 배울 예정이나
우선 알아야할 것은 배포 과정에서
모든 코드가 변환 및 최적화되고
함께 묶여집니다
묶여지는 과정에서 이와 같이 로딩된
이미지 파일이 무시될 수 있고
배포 과정에서 유실될 수 있습니다
또한 이런 방식으로는
여러 추가적인 최적화 단계를
사용할 수 없습니다
그렇다면 어떻게 이미지를 로딩 및 추가해야 할까요?
그건 import를 사용할 수 있습니다
예시로 'reactImg'를 불러올 수 있는데
이름은 자유롭게 설정하셔도 됩니다
이렇게 파일에서 상대경로를 만들 수 있습니다
앱 JSX 파일에서, 이 경우에는 이미지 파일로, 불러오는 것입니다
그래서 이 경우 assets 폴더에 들어가면
'react-core-concepts' PNG 파일이 있습니다
이렇게 파일을 선택합니다
일반적으로 자바스크립트에는
이미지 파일을 자바스크립트 파일에 불러들이지 않아서
이 방식이 다소 이상해 보일 수 있습니다
그러나 여기는 JSX 코드를 작동하게 만드는
동일한 빌드 과정으로 인해
가능합니다
다시 말해 이 빌드 과정은
JSX 코드를 변환하는 것 뿐 아니라 이 문장
그리고 이 문장과 같은 내용을
index.jsx 파일에 불러옵니다
이 파일에 CSS 파일을 불러오는데
이도 마찬가지로 일반적으로는 작동하지 않을 것입니다
그러나 빌드 과정을 통해 여기에 불러오는 파일이
최종 페이지 및 배포 패키지에 포함되도록
하기 때문에 설정된 프로젝트에 이러한
import가 가능합니다
따라서 이와 같은 문법을 사용하여
이 리액트 이미지를 사용할 수 있습니다
이 이미지는 다시 한 쌍의 중괄호를 사용하여
소스의 속성 값으로 로딩합니다
다시 말해 학습한 동적인 값
문법을 사용하는 것입니다
여기서 소스 속성의 동적인 값은
다음과 같이 불러올 이미지입니다
이 이미지는 결국 자바스크립트 객체라고
할 수 있습니다
정확히는 자바스크립트 변수로
해당 이미지로 이동하는 경로를 포함한
해당 이미지를 가리킨다고 할 수 있습니다
따라서 이 src 속성 값으로
사용할 경로를 포함하는 변수입니다
이것이 그것을 위한 문법입니다
여기서 속성 값에
동적인 값 표현을 사용할 때
아주 중요한 것은 따옴표를 추가하지 않는다는 것입니다
반드시 생략해야 합니다
대신 이 중괄호 문법인
역동적 값을 등호(=) 바로 뒤의
값으로 사용할 수 있습니다
이것으로 모두 저장하고 새로고침해도
여전히 이 이미지를 볼 수 있습니다
여전히 똑같이 작동되는 것을 볼 수 있으나
더 최적의 방법으로 불러와지는 것입니다
이 프로젝트의 일부인 빌드 과정과
자바스크립트 값을 가리키기 위해
사용한 한 쌍의 중괄호 문법 덕분입니다