blog clone-2
blog clone-2
여기서는 props와 javascript에서 map메소드를 이용할 것이다 이전글을 보면 props를 이용해서 데이터를 전달하는걸 알 수 있다
이번 블로그 클론에서는 이미 저장된 데이터를 가지고하기 때문에 저장된 데이터를 읽어서 원하는 부분에 보여줄 필요가 있다
프로퍼티 전달
블로그에 사용할 정보를 보기 관리하기 쉽게 한 파일에 몰아 넣었다
만약 보여줄 정보를 각각의 컴포넌트.js파일에 넣고 이용해도 결과는 같고 props를 사용하지 않아도 된다 정보를 객체와 객체 배열을 이용해서 저장했다
컴포넌트에 프로퍼티를 넘겨 줄려면 <컴포넌트 변수={객체}></컴포넌트> 이렇게 작성하고 해당 컴포넌트.js파일에서 받은 프로퍼티를 이용할 수 있다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import TopNav from "./components/TopNav"
import UserInfo from "./components/UserInfo"
import Menu from "./components/Menu"
const user = {
username:"김민정",
userImgPath:"https://mblogthumb-phinf.pstatic.net/MjAyMTAxMTVfMTQy/MDAxNjEwNzA3OTI5NTc5.cKTzFMOwZUp9VCfdW_Dg8kkPGU3sNmOZIHi6R_31HI8g.HNWQB0zojY4M8-VRSkAn0fhaXXdX4QulmXWmKxoiO04g.JPEG.41minit/1610707724432.jpg?type=w800",
userInfo:"cosmic 김민정",
tags : [
{id:1,name:"IT"},
{id:2,name:"Start-Up"},
{id:3,name:"개발자"},
{id:4,name:"게임"},
{id:5,name:"web"}
]
}
const listArticles = [
{
src:"https://image.bugsm.co.kr/album/images/1000/40824/4082425.jpg",
title: "Ditto",
preview: "NewJeans",
createDate: "2023.01.02"
},
{
src:"https://image.bugsm.co.kr/album/images/1000/40824/4082425.jpg",
title: "OMG",
preview: "NewJeans",
createDate: "2023.01.02"
},
{
src:"https://image.bugsm.co.kr/album/images/1000/40780/4078016.jpg",
title: "Hype Boy",
preview: "NewJeans",
createDate: "2022.08.01"
},
{
src:"https://image.bugsm.co.kr/album/images/1000/40734/4073469.jpg",
title: "사건의 지평선",
preview: "윤하",
createDate: "2022.03.30"
}
];
const images = [
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174427_99db5d6e.webp"},
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174438_f3d9b9fb.webp"},
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174444_232ea4f6.webp"},
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174446_f252d89e.webp"},
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174449_5d310f5a.webp"},
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174501_3f642b08.webp"},
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174605_9a071507.webp"},
{src:"https://cdnweb01.wikitree.co.kr/webdata/editor/202006/15/img_20200615174516_44fe039e.webp"},
{src:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdRIdqYTeuS_CFPVmxwgEwABCcqmB-82u0DQ&usqp=CAU"},
{src:"http://social.phinf.naver.net/20200216_113/1581817802286ALBRW_JPEG/Screenshot_20200216-035456_Baidu.jpg?type=w710_1"},
{src:"http://social.phinf.naver.net/20200216_216/1581817690317kv10T_JPEG/Screenshot_20200216-035019_Baidu.jpg?type=w710_1"},
{src:"http://social.phinf.naver.net/20200216_299/1581817708172i6x9L_JPEG/Screenshot_20200216-035120_Baidu.jpg?type=w710_1"},
{src:"http://social.phinf.naver.net/20200216_242/1581817657201rvnwu_JPEG/Screenshot_20200216-034841_Baidu.jpg?type=w710_1"}
]
const App = () => {
return (
<div className='App'>
<TopNav></TopNav>
<div style="margin-right: 30%; margin-left: 30%;">
<UserInfo name= {user.username} imgPath = {user.userImgPath} info = {user.userInfo}></UserInfo>
<Menu name= {user.username} tags = {user.tags} listArticles = {listArticles} images={images}></Menu>
</div>
</div>
);
}
export default App;
작성한 <UserInfo name= {user.username} imgPath = {user.userImgPath} info = {user.userInfo}></UserInfo> 에서
{user.username} 에 “김민정”이 들어가있고 name에 값이 저장된다 name은 내가 프로퍼티를 받은 컴포넌트에서 사용할 이름이다
프로퍼티를 받은 컴포넌트
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//UserInfo.js
import React from 'react';
import Image from 'react-bootstrap/Image'
function UserInfo(props) {
return (
<>
<h2>{props.name}</h2>
<Image src= {props.imgPath} roundedCircle width="10%" />
<p>{props.info}</p>
<p>구독자 123</p>
<p>관심작가 26</p>
</>
);
}
export default UserInfo;
함수형 컴포넌트에서 함수이름 뒤에 ()안에 프로퍼티를 받는다 따라서 프로퍼티를 이용할때 이름을 작성한다 function UserInfo(props) props로 이용
위에서 각각의 변수에 값을 넣어줬는데 그이름을 사용해서 프로퍼티를 이용한다 props.name 은 “김민정”을 가지고 있기 때문에 <h2>김민정</h2>이 결과로 나온다
for 대신 map 이용하기
글목록 을 보여주기 위해서 프로퍼티를 리스트 형식으로 만들어서 출력시켰다 for를 이용해서 객체 배열을 하나씩 처리후 list에 push함
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Articles.js의 일부분만 가져옴
function Articles(props) {
const navigate = useNavigate();
const posts =[]
for (let i =0; i<props.listArticles.length; i++){
let a = props.listArticles[i];
posts.push(
<Col >
<Card>
<Card.Img variant="top" src={a.src} />
<Card.Body>
<Card.Title>{a.title}</Card.Title>
<Card.Text>{a.preview} </Card.Text>
<Card.Text> <small >{a.createDate}</small></Card.Text>
</Card.Body>
</Card>
</Col>)
}
export default Articles;
자바스크립트 기본 메소드인 map을 이용하면 더 간단하게 처리할 수 있다 (작성이 조금 더 편함)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Articles(props) {
const navigate = useNavigate();
const posts = props.listArticles.map((element) => (
<Col>
<Card >
<Card.Img variant="top" src={element.src} />
<Card.Body >
<Card.Title>{element.title}</Card.Title>
<Card.Text>{element.preview} </Card.Text>
<Card.Text> <small >{element.createDate}</small></Card.Text>
</Card.Body>
</Card>
</Col>
) );
console.log(posts)
props.listArticles에는 listArticles = {listArticles} 때문에 위 객체 배열이 저장되어있다 (중간에 Menu.js에서 한번더 프로퍼티를 받고 실행하는것임 중간 생략됨)
리스트 출력시 경고 메세지
리스트를 출력할때 위 사진과 같은 경고 메세지가 뜬다 실제 실행은 제대로 되지만 경고가 나오는데 이 이유는 고유한 key값이 없다고 경고 해주는것이다
이때 리스트에 들어가는 요소중 최상단 테그에 key값으로 아무값이나 중복 없도록 넣어준면 된다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Articles(props) {
const navigate = useNavigate();
const posts = props.listArticles.map((element,id) => (
<Col key={id}>
<Card >
<Card.Img variant="top" src={element.src} />
<Card.Body >
<Card.Title>{element.title}</Card.Title>
<Card.Text>{element.preview} </Card.Text>
<Card.Text> <small >{element.createDate}</small></Card.Text>
</Card.Body>
</Card>
</Col>
) );
최상단 테그 Col에 key값을 부여해서 경고를 해결 할 수 있다
This post is licensed under CC BY 4.0 by the author.