styled component 설치
state의 데이터를 map을 이용 해서 입력
Post.js
import React from "react";
import styled from "styled-components";
const PostBox = styled.div`
height: 100px;
width: 300px;
border: 1px solid black;
`;
const Post = (props) => {
return <PostBox>{props.title}</PostBox>;
};
export default Post;
App.js
import React, { Component } from "react";
import Post from "./Post";
import styled from "styled-components";
class App extends Component {
state = {
posts: [
{
id: 1,
title: "제목1",
},
{
id: 2,
title: "제목2",
},
{
id: 3,
title: "제목3",
},
],
};
render() {
const ContainerBox = styled.div`
display: grid;
justify-content: center;
`;
return (
<ContainerBox>
{this.state.posts.map((post) => {
return <Post id={post.id} title={post.title} />;
})}
</ContainerBox>
);
}
}
export default App;
추가를 누르면 리스트가 아이템이 추가되도록 할 것
자바스크립트 배열 추가할 때는 무조건 concat 쓰자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = [{
id: 1,
username: 'ssar'
}, {
id: 1,
username: 'ssar'
}];
console.log(a);
let b = [{
id: 2,
username: 'cos'
}];
a = a.concat(); // 변수, 객체, 배열 다 들어갈 수 있다.
console.log(a);
</script>
</body>
</html>
App.js
import React, { Component } from "react";
import Post from "./Post";
import styled from "styled-components";
class App extends Component {
state = {
posts: [
{
id: 1,
title: "제목1",
},
{
id: 2,
title: "제목2",
},
{
id: 3,
title: "제목3",
},
],
};
render() {
const ContainerBox = styled.div`
display: grid;
justify-content: center;
`;
const add = () => {
// render안에 const로 만들면 계속 초기화 되지않는다
this.setState({
posts: this.state.posts.concat({
id: 4,
title: "제목4",
}),
});
};
return (
<ContainerBox>
<button onClick={add}>추가</button>
{this.state.posts.map((post) => {
return <Post id={post.id} title={post.title} />;
})}
</ContainerBox>
);
}
}
export default App;
------------------
배열 필터링
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = [1, 2, 3, 4];
a = a.filter((n) => n == 3);
console.log(a);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}];
let b = a.filter((n) => n.id != 3);
console.log(b);
</script>
</body>
</html>
--------------------
App.js
import React, { Component } from "react";
import Post from "./Post";
import styled from "styled-components";
class App extends Component {
state = {
posts: [
{
id: 1,
title: "제목1",
},
{
id: 2,
title: "제목2",
},
{
id: 3,
title: "제목3",
},
],
};
render() {
const ContainerBox = styled.div`
display: grid;
justify-content: center;
`;
const add = () => {
// render안에 const로 만들면 계속 초기화 되지않는다
this.setState({
posts: this.state.posts.concat({
id: 4,
title: "제목4",
}),
});
};
const del = () => {
// render안에 const로 만들면 계속 초기화 되지않는다
this.setState({
posts: this.state.posts.filter((post) => {
return post.id !== 2;
}),
});
};
return (
<ContainerBox>
<button onClick={add}>추가</button>
<button onClick={del}>삭제</button>
{this.state.posts.map((post) => {
return <Post id={post.id} title={post.title} />;
})}
</ContainerBox>
);
}
}
export default App;
'Web > ReactJS' 카테고리의 다른 글
| 리액트 // shouldComponentUpdate / react-router-dom / 페이지이동 Link to (0) | 2020.07.27 |
|---|---|
| 리액트 // 스타일컴포넌트 위치 / 배열 객체 스프레드 연산 / 불변성 (0) | 2020.07.23 |
| 리액트 css 관리 // ref (0) | 2020.07.21 |
| 리액트 에어비앤비 화면구성 (0) | 2020.07.20 |
| airbnb 뼈대 설계 (0) | 2020.07.17 |