연락처 카드 만들기를 하고 있다.
아바타 이미지를 따로 떼어컴포넌트로 관리하면
아무 곳이나 원하는 곳에 붙일 수 있게 된다.
Card.jsx에서 이미지 부분만 따로 떼서 컴포넌트로 만든다.
Avatar.jsx 파일 새로 만들어 이동
여기서 문제가 발생한다.
현 파일에 있는 props는 비어있다.
이전 파일과 연결이되어 오브젝트들을 보내주어야
{props.img}를 읽을 수 있다.
어떻게 하면 이미지 property를 방금 새로 만든 Avatar 컴포넌트에서 부를 수 있을까?
앞에서 한 내용을 복습해 보자.
일단 이미지 property가 기본적으로 어디 있는지 보자.
contact.js 파일에 있는 img url 이 이미지가 있는 곳이다.
그 다음은 App.jsx 에서 이 imgUrl을
<Card /> 컴포넌트 안 img attribute로 읽히고 있다.
그 다음
Card 템플릿 안
img 부분이 Avatar로 빠져 나갈 부분이다.
img 부분을 <Avatar> 태그로 바꿔준다.
이미지 사라짐
링크 연결이 안되어서 그럼
App --> Card --> AvatarImg component 로 가는 루트이다.
<Avatar /> 태그에 img attribute를 설정 해준다.
여기서 AvartaImg 탬플릿에 있는 props 가 비워져 있다.
이 props에 필요한 이미지 경로를 채워줘야한다.
그 것은 Card 안 <AvatarImg /> 컴포넌트 안에 또 태그 설정해주는 것이다.
그래야 AvartaImg 탬플릿에 있는 props가 내용을 받아서
UI에 내용을 보여지게 할 수 있다.
property 이름 찾는 더 쉬운 방법이 있다
DevTools를 사용하는 방법이다.
DevTools 사용하기
컴포넌트 구조를 알려면 DevTools를 이용하여 알 수 있다.
1. sandbox.io에서 react dev tools
sandbox.io 에서는
UI창 아래 바를 눌러보면 react dev tools 섹션이 있다.
하지만 이 react dev tools는 버그가 많아 비추한다.
2. Chrome Web Developer Tool 다운 받아 사용
Chrome web store에서 다운 받을 수 있다.
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
다 다운 받고 나서 develper tool을 연다
Components 탭이 혹시 안나오면 새로고침을 한다.
이효리 아바타 이미지 클릭하면 props 가 무엇인지 나오고 source url 도 볼 수 있다.
Avatar에서 {props.img} 인 것을 확인 할 수 있다.
Airbnb 사이트를 보면
엄청나게 많은 컴포넌트들로 이뤄진 것을 알 수 있다.
DevTools로 디버깅
DevTools을 사용하면 디버깅하기도 쉽다.
만약 이미지가 나오지 않는 경우
developer tool-components 에서 이미지를 클릭하면
해당 정보가 나온다.
Avatar 컴포넌트에 img props를 사용 중에 있다.
Avatar.jsx 파일을 가보면 porps가 img가 아닌 imgUrl로 되어 있는 것을 볼 수 있다.
props를 img로 고쳐준다. 사진이 정상적으로 나왔다.
설정을 누르고 나면
type을 끄면 위의 사진 처럼 모든 태그들이 다 나온다
type을 켜 놓아야지 컴포넌트 태그만 나온다.
전화번호와 이메일 따로 빼기
전화 번호와 이메일을 Detail로 묶어서 따로 빼보자
둘 다 Detail component로 묶었다.
detailInfo로 property 이름을 같게 하고
여기서 props로 전화 번호와 이메일을 구분하였다.
Detail.jsx 파일을 만들고 Card.jsx에 import 한다.
하지만 여기서 두 <p>태그를 <div>로 담았는데도 나오지 않는다.
Card 안 <Detail /> 태그 안에 있는 property 이름을 적어 주어야한다.
props를 확인하니 detailInfo로만 나온다.
detailInfo로 변경하니 내용 잘 나온다.
My Contact 아래 아이유 아바타 사진만 나오게 하기
<Avatar /> 컴포넌트를 불러온다.
이미지를 연결하는데
Avatar 함수에 있는 태그에 맞춰서 적어준다.
파일이 너무 많으면 DevTool 이용해서 해당 사진 클릭해서 props 정보를 얻어낸다.
App() 에서 <Avatar /> img 넣고 주소 입력하기
사진 나옴.
index.js
contact.js
App.jsx
Card.jsx
Detail.jsx
Avatar.jsx
index.html
styles.css
'React > React Basic' 카테고리의 다른 글
[React] Mapping Data | 이모티콘 사전 | dl dt dd (0) | 2022.03.14 |
---|---|
[React] Map() | functional programming | Mapping Data to Components (0) | 2022.03.13 |
[React] Props | 연락처 카드 만들기 (0) | 2022.02.21 |
[React] 시작하기 | 맥 node 업데이트 | VScode |npx (0) | 2022.02.20 |
[React]import, export modules | require 와 import 차이 | import 모듈 많이 불러와야 하는 경우 | 계산기 만들기 (0) | 2022.02.18 |
댓글