[React] Props | 연락처 카드 만들기

반복되는 카드 형태를 간단하게 만드는 법에 대해 알아보자 

 

일단 리액트가 잘되는지 확인하고 

Hello World 

 

 

이효리의 연락처 카드를 하나 만든다

 

 

 

 

 

여기서 유재석, 비의 연락처 카드도 만들고 싶다면 

html 코드를 사용하면 빨간 박스 코드를 반복 사용하여 만들 수있다.

 

 

 

My Contact

Lee Hyori

123-345-4567

lee@hyori.com

Yoo JaeSuk

493-834-4789

yoo@jaesuk.com

Rain

281-384-9374

rain@jihun.com

 

 

---

하지만 이보다 좀 더 간편하게 만드는 방법은 없을까?

 

Card() 함수를 만들어 하나의 카드 템플릿을 만들고 

<Card />element로 랜더 해본다 

 

 

 

 

이렇게 되면 3개의 카드가 쭉 나오는데

이제는 이 카드 안의 내용을 바꿔줘야한다. 

 

 

---

 

 

html attribute 처럼 react attribute 만들기 

 

html에서의 attribute 

html 파일에서 attribute가 어떤 형태인지 보자. 

지금 카드 모두는 html 파일 안 body 중에서 'root' div 안에 있다.

 

 

 

이 div는 만지지 말고,  input 태그를 하나 만들어 보자. 

 

 

이 안에 들어가는 attributes를 몇 개 활용해 보면

 

 

value: 빈칸에 이미 채워져 있는 내용

 

 

placeholder: 박스 빈 칸일 때 채워져 있는 내용

 

 

chrome developer tool에서 콘솔창을 열고

 

 

id가  fName인 element를 input으로 저장한 후 

 

input.placeholder 

이 형태로 input이 object 같이 사용되고

이 object에 properties에 접속하는 모양을 하고 있다.  

we tap into that element using getElementById and we have a reference to it, 

you can see it's almost like as if we have the input as an object and we're accessing each of its properies. 

 

우리는 이 properties를 .placeholder .value로 접근할 수 있다. 

 

 

 

React에서의 attribute 

그렇다면 react에서의 attribute는 어떻게 사용할 수 있을까? 

html attribute는 이미 정해진 것만 사용할 수 있지만 

React에서는 내가 원하는 attribute를 만들어서 쓸 수 있다. 

 

React component 세상에서는

이 attribute를 properties라고 부른다

줄여서 props라고 한다. 

 

 

카드 컴포넌트 만들기 

Card 함수를 새 Card 탬플릿으로 만들어보자.

 

일단 Card 함수를 ReactDOM.render 밖으로 뺀다. 

 

 

 

<Card /> component가

Card 함수를 부르면 

함수 안에 있는 custom HTML element를 return 해준다. 

 

 

 

 

이 <Card /> component안에서

properties를 정의 내릴 수 있다. 

문법은 html에서 하던 것과 비슷하고 

이름은 내가 원하는대로 쓸 수 있다. 

property로 name을 넣어보았다. 

we can get hold of it by adding a name to the inputs to access those things that are sent over. 

 

 

 

Card 함수에 props를 파라미터로 넣어서 무슨 내용이 있나 살펴보면 

 

 

콘솔

Card 컴포넌트에서 입력했던 property가 나온다. 

 

 

 

 

그러면 property를 컴포넌트에 여러 개 추가한다

 

 

 

 

함수에는 하드코드 된 element들을 다이나믹하게 바꿔준다. 

 

 

 

이제 Card 함수는 한 명의 정보가 들어있는게 아니라 

하나의 탬플릿이 되어 여기 저기에 쓰일 수가 있게 되었다. 

 

 

 

그럼 이제 유재석, 비의 정보도 넣어보자 

 

잘 나오는 것을 볼 수 있다.

 

 

---

card에 style 줄 때 주의사항  

카드 탬플릿 함수에서 style을 줄 수있다. 

카드 컴포넌트에서의 propertys는 카드 함수를 부를 때 쓰이고

스타일은 적용되지 않는다. 

 

 

Card 탬플릿 함수안 태그에는 style이 적용이 됨

index.js

 

 

card 컴포넌트에는 스타일이 적용 안됨 

 

---

 

Component 만들기 

각 내용들을 컴포넌트로 관리해보자. 

 

 

 

파일로 쪼개서 저장하기 

 

 

 

index.jsx

index.js

 

 

 

contacts.js (소문자)

개인 정보 들어있는 파일 

이 파일은 컴포넌트 파일이 아니고 오브젝트들이 array에 들어있는 자바스크립트 파일이다. 

여기 있는 내용을  App.js에서  일일이 똑같이 적을 필요없이 

하나씩 불러오기 한다. 

 

const contacts = [
{
name: "Beyonce",
imgURL:
"https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",
phone: "+123 456 789",
email: "b@beyonce.com"
},
{
name: "Jack Bauer",
imgURL:
"https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",
phone: "+987 654 321",
email: "jack@nowhere.com"
},
{
name: "Chuck Norris",
imgURL:
"https://i.pinimg.com/originals/e3/94/47/e39447de921955826b1e498ccf9a39af.png",
phone: "+918 372 574",
email: "gmail@chucknorris.com"
}
];

 

 

일단 App.jsx에서 contact.js 파일을 import한 후 

하드 코드 해야할 부분을 다이나믹하게 바꿔준다. 

 

 name = { contacts[0].name } 

contact 파일 안 

첫번째 object에서

여러 property들 중 name을 적어준다. 

 

 

 

object 옮겨가는 순서 정리 

 

 

 

Card.jsx에서

style 주기 위해 컴포넌트 입력하기 

 

 

 

 

 

index.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;

}