저의 솔루션을 설명 드리겠습니다
여기서 src 폴더에서 시작하도록 하겠습니다
그리고 새로운 components 폴더를 추가함으로서 시작하겠습니다
왜냐하면 당연히 이곳에 우리가 몇 가지의 컴포넌트를 추가할 것이기 때문입니다
Header.jsx 파일이라는 header 컴포넌트를
추가하며 저의 솔루션을 시작하겠습니다
이것은 header 컴포넌트 함수를 내보내기 합니다
이 Header 컴포넌트 함수의 아이디어는
물론 App 컴포넌트에서 사용되어
로고와 제목을 출력할 수 있도록 하는 것입니다
다른 방법으로는 Header 코드를 index.html 파일에
직접적으로 추가할 수도 있습니다
이것은 제가 만들려고 하는
Header 컴포넌트가 그다지 동적이지 않기에
가능한 것입니다
그러나 여기, 저는 이 컴포넌트 접근으로 대신하겠습니다
따라서 여기 이 Header 컴포넌트 내에
몇 가지 jsx 코드를 반환할 것입니다
왜냐하면 그것이 컴포넌트 내에서 여러분이 해야 할 일이기 때문입니다
그리고 저는 Header 요소를 반환합니다
더 정확히 말하면, header html 요소 혹은
jsx 요소를 반환할 것입니다
그리고 여기 header 에서 저는 img 하나와
h1 태그를 넣고 싶습니다
이 h1 태그들 사이에는 Investment Calculator 라고 적습니다
따라서 이것이 스크린에 보여져야 할
메인 타이틀일 것입니다
여기 img 에서는 동적인 값으로 설정할
소스를 추가할 것이고
이것은 assets 폴더에 있는
investment calculator PNG 파일을 가져오고자 하는 것입니다
이를 위해 이곳 header.jsx에서 로고를 불러오기 할 수 있습니다.
이름은 여러분의 선택입니다
그리고 여기서 경로는 한 단계 위로 이동해야 합니다
왜냐하면 현재 우리는 components 폴더 안에 있고
assets 폴더는 components 폴더의 상위의 폴더인
scr 폴더에 있기 때문입니다
따라서 우리는 한 단계 이동해야 하고
assets 폴더로 가야 합니다
그런 후 이 investment-calculator.png 파일을 목표로 해야 합니다
이로써 우리는 여기 이 로고를
src 속성에 대한 동적인 값으로 사용할 수 있습니다
그리고 alt 텍스트(대체 텍스트)를 위해서 저는 'Logo showing a money bag (돈가방이 보이는 로고)' 라고 하겠습니다
왜냐하면 이것이 결국 로고에서 여러분이 보는 것이기 때문입니다
이로써 저는 기본적인 header 컴포넌트를 가졌고
우리는 이제 이 컴포넌트를
App 컴포넌트에서 활용하면 됩니다
이것은 이 앱의 루트 컴포넌트에 해당됩니다
왜냐하면 이 App 컴포넌트가
root라는 html 요소로
리액트 라이브러리의 react-dom 부분을 통해 렌더링 되기 때문입니다
위치는 여기 id = root 가 있는 div로 됩니다
따라서 이 App 컴포넌트에서는
저는 이 h1 요소를 대문자로 시작하는
저의 커스텀 Header 컴포넌트로 대체할 것입니다
그리고 물론 우리는 이 app.jsx 파일 내에
다른 파일에서 정의되어 있는
header 컴포넌트를 가능하기 하기 위해
import 를 추가해야 합니다
그리고 이 import의 끝에
.jsx 를 import 경로에 추가해야 합니다
이로써 여러분은 저장하고
개발 서버를 작동시키고, 다시 로드한다면
보여지듯이 이미지를
찾을 수 없다는 에러를 얻게 됩니다
오타일 수 있습니다
맞습니다 이미지에 끝에 -logo 있었습니다
수정을 통해
우리는 여기서 이미지를 보고 타이틀을 보게 됩니다
그리고 이제 여기서 스타일이 조금 더 나아진다면
더 보기 좋아질 것입니다
그것을 위해 우리는
index.css을 찾고
여기서 우리는 header 라는 id를 가진
요소를 찾는 규칙을 찾을 것입니다
그리고 이것은 스타일링에 사용되며
해당 ID를 가진 요소 내의 img 태그를
스타일링 하는 것에 사용될 것입니다
따라서 여기 header.jsx로 돌아와서
우리는 ID 프로퍼티를 header 요소에 추가하고
이것을 header 로 설정하는 것을 통해 더 좋은 스타일을 만들 수 있습니다
그리고 여기 추가된 ID로
header 는 훨씬 더 좋아 보입니다
따라서 이제 우리는 이 앱의 다음 부분으로 넘어갈 수 있습니다