[React] DevTools | Avatar 이미지 따로 떼서 관리하기 |DevTools로 디버깅

연락처 카드 만들기를 하고 있다. 

 

아바타 이미지를 따로 떼어컴포넌트로 관리하면

아무 곳이나 원하는 곳에 붙일 수 있게 된다. 

 

 

Card.jsx에서 이미지 부분만 따로 떼서 컴포넌트로 만든다.

 

 

Avatar.jsx 파일 새로 만들어 이동 

 

 

여기서 문제가 발생한다. 

현 파일에 있는 props는 비어있다. 

이전 파일과 연결이되어 오브젝트들을 보내주어야 

{props.img}를 읽을 수 있다. 

어떻게 하면 이미지 property를 방금 새로 만든 Avatar 컴포넌트에서 부를 수 있을까?

 

 

 

앞에서 한 내용을 복습해 보자. 

일단 이미지 property가 기본적으로 어디 있는지 보자. 

contact.js 파일에 있는 img url 이 이미지가 있는 곳이다. 

contact.js

 

 

그 다음은 App.jsx 에서 이 imgUrl을  

<Card /> 컴포넌트 안 img attribute로 읽히고 있다. 

App.jsx

 

 

그 다음 

Card 템플릿 안

img 부분이 Avatar로 빠져 나갈 부분이다. 

 

 

img 부분을 <Avatar> 태그로 바꿔준다. 

 

 

 

이미지 사라짐 

링크 연결이 안되어서 그럼 

 

 

 

 

 

App --> Card --> AvatarImg component 로 가는 루트이다. 

 

 

<Avatar /> 태그에 img attribute를 설정 해준다. 

Card.jsx

 

 

여기서 AvartaImg 탬플릿에 있는 props 가 비워져 있다. 

이 props에 필요한 이미지 경로를 채워줘야한다. 

그 것은 Card 안 <AvatarImg /> 컴포넌트 안에 또 태그 설정해주는  것이다. 

 

 

 

그래야 AvartaImg 탬플릿에 있는 props가 내용을 받아서 

UI에 내용을 보여지게 할 수 있다.

Avatar.jsx

 

 

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 정보를 얻어낸다.

Avatar 함수

 

 

App() 에서 <Avatar /> img 넣고 주소 입력하기 

 

 

사진 나옴.

 

 

 

---

 

index.js

import React from "react";

import ReactDOM from "react-dom";

import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

 

contact.js

const contacts = [

{

name: "Lee Hyori",

imgUrl:

"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwLwT_VYGGU8v5bdj3ZmAhaG2fj7DnBXWKmXadURsqYmjNVH9gz8sj902AOREVCBL0iT4&usqp=CAU",

alt: "Lee hyori",

tel: "123-345-2345",

email: "lee@hyori.com"

},

{

name: "Yoo Jae Suk",

imgUrl:

"https://s.yimg.com/ny/api/res/1.2/cVvxUNGOapSM3u2jqAqy9A--/YXBwaWQ9aGlnaGxhbmRlcjt3PTk2MDtoPTcyMDtjZj13ZWJw/https://s.yimg.com/uu/api/res/1.2/IbqHmm4QvPBqKWKNCS1BdA--~B/aD03Njg7dz0xMDI0O2FwcGlkPXl0YWNoeW9u/https://media.zenfs.com/en/ybrand.cinema.com.my/f5e3c5feee225eb760071d5dcb2534e3",

alt: "Yoo Jae Suk",

tel: "123-345-2345",

email: "yoo@Jaesuk.com"

},

{

name: "Rain",

imgUrl: "http://img.segye.com/content/image/2020/12/16/20201216516868.jpg",

alt: "Rain",

tel: "123-345-2345",

email: "rain@jihun.com"

}

];

export default contacts;

 

 

App.jsx

import React from "react";

import contact from "../contact";

import Card from "./Card";

import Avatar from "./Avatar";

function App() {

return (

<div>

<h1 className="heading">My Contacts</h1>

<Avatar img="https://img3.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/201810/08/spotvnews/20181008140235318lzlv.jpg" />

<Card

name={contact[0].name}

imgUrl={contact[0].imgUrl}

alt={contact[0].alt}

tel={contact[0].tel}

email={contact[0].email}

/>

<Card

name={contact[1].name}

imgUrl={contact[1].imgUrl}

alt={contact[1].alt}

tel={contact[1].tel}

email={contact[1].email}

/>

<Card

name={contact[2].name}

imgUrl={contact[2].imgUrl}

alt={contact[2].alt}

tel={contact[2].tel}

email={contact[2].email}

/>

</div>

);

}

export default App;

 

Card.jsx

import React from "react";

import Avatar from "./Avatar";

import Detail from "./Detail";

function Card(props) {

return (

<div>

<div className="card">

<div className="top">

<h2 className="name">{props.name}</h2>

<Avatar img={props.imgUrl} />

</div>

<div className="bottom">

<Detail detailInfo={props.tel} />

<Detail detailInfo={props.email} />

</div>

</div>

</div>

);

}

export default Card;

 

 

Detail.jsx

import React from "react";

function Detail(props) {

return (

<div>

<p className="info">{props.detailInfo}</p>

</div>

);

}

export default Detail;

 

 

Avatar.jsx

import React from "react";

function Avatar(props) {

return <img className="circle-img" src={props.img} alt={props.alt} />;

}

export default Avatar;

 

 

index.html 

<!DOCTYPE html>

<html lang="en">

<head>

<title>JSX</title>

<link rel="stylesheet" href="styles.css" />

</head>

<body>

<div id="root"></div>

<script src="../src/index.js" type="text/jsx"></script>

</body>

</html>

 

styles.css

 

body {

font-family: sans-serif;

margin: 0 auto;

padding: 25px;

max-width: 400px;

min-width: 400px;

background-color: #dfe6e9;

text-align: center;

}

.heading {

text-align: center;

font-size: 2em;

color: #2d3436;

margin: 20px 0 30px;

}

.card {

border-radius: 25px;

position: relative;

padding: 25px 15px;

background-color: #81ecec;

margin: 50px 0;

height: 200px;

box-shadow: 0 2px 5px #ccc;

text-align: left;

}

.top {

border-radius: 25px 25px 0 0;

height: 100px;

width: 100%;

background-color: #00cec9;

position: absolute;

top: 0;

left: 0;

display: flex;

}

.name {

font-size: 2em;

color: #2d3436;

display: flex;

flex: 1;

margin: 10% 20px 0;

}

.card img {

margin: 30px 20px 0 0;

}

.circle-img {

border-radius: 50%;

border: 7px solid #fff;

width: 120px;

height: 120px;

}

.bottom {

margin-top: 120px;

}

.info {

margin: 20px 0;

color: #1a7e76;

}