Westagram Refactoring! ๐ง
โ๏ธ ๋ถ๋ชจ ํจ์์๊ฒ ์ธ์์ ๋ฌํ๊ธฐ
์์์ปดํฌ๋ํธ์์ ๋ถ๋ชจ๋ก๋ถํฐ props๋ฅผ ํตํด ์ ๋ฌ๋ฐ์ ๋ฉ์๋๋ฅผ ํธ์ถํ ๋, ์ธ์๋ฅผ ํจ๊ป ์ ๋ฌํ๋ฉด์ ํธ์ถ ํ ์ ์๋ค! โจ
์์ ์ปดํฌ๋ํธ
import React, { Component } from "react";
import "./Comment.scss";
class Comment extends Component {
render() {
return (
<div className="Comment">
{this.props.commentList.map((comment) => {
return (
<li key={comment.id}>
<div>
<a href="#">{comment.userName}</a>
<span>{comment.content}</span>
</div>
<div>
<i
// id={comment.id}
className="fas fa-trash"
onClick={() => this.props.deleteComment(comment.id)}
//๐ฅ ์ด๋ ๊ฒ arrow function์ ์ด์ฉํด์ ๋ณด๋ด์ฃผ๋ฉด ๋๋ค.
/>
<i
className={comment.isLiked ? "hidden" : "far fa-heart unlike"}
/>
<i
className={comment.isLiked ? "fas fa-heart like" : "hidden"}
/>
</div>
</li>
);
})}
</div>
);
}
}
export default Comment;
๐๐ป ๊ทธ๋ผ ๋ถ๋ชจ์ปดํฌ๋ํธ์ ์๋ ํจ์๋ ์ด๋ ๊ฒ ์ ๋ฌ๋ฐ์ ์ธ์๋ฅผ ์ด์ฉํด ์ฐ์ฐ์ ์ฒ๋ฆฌ์ํค๋ฉด ๋๋ค.
๋ถ๋ชจ ์ปดํฌ๋ํธ
deleteComment = (id) => {
const remainComment = this.state.commentList.filter((comment) => {
return comment.id !== Number(id);
});
this.setState({
commentList: remainComment,
});
};
๐ค ์ฒ์์ ๋๋ this.props.deleteComment(comment.id)
โ ์ด๋ ๊ฒ ๋ฐ๋ก ์ ๋ฌํ๋ ค๊ณ ํ๋๋ฐ ์๊พธ ์ ๋ฌ์ด ์คํจํด์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ ์ด๋ฒคํธ์ ๊ตณ์ด id๊ฐ์ ์ฃผ์ด์ e.target.id
๋ฅผ ์ด์ฉํด filterํจ์๋ฅผ ์ฒ๋ฆฌํ๋๋ฐ ์ด๋ ๊ฒ ์ํด์ค๋ ๋๋ค!!!! ๐
๐ปโโ๏ธ๐
๐ปโโ๏ธ๐
๐ปโโ๏ธ
โ๏ธ isLike ์ํ์๋ฐ๋ผ ๋ค๋ฅธ ์์ด์ฝ ๋ณด์ฌ์ฃผ๊ธฐ
์ข์์ ๋ฒํผ์ฒ๋ผ state ๋ก๋ถํฐ boolean ๊ฐ์ ๋ฐ์์ ๋น ํํธ
or ์ฑ์์ง ํํธ
๋ฅผ ๋ณด์ฌ์ค์ผ ํ ๋! ๊ฐ๊ฐ์ <i />
ํ๊ทธ์ display: none;
์ ํด์ฃผ๋ className
์ ์ถ๊ฐํ๋๊ฒ ์๋๋ผ! ์์ ์ผํญ์ฐ์ฐ์๋ค ํตํด ์กฐ๊ฑด์ ๋ง๋ ํ๊ทธ ์์ฒด๋ฅผ ํ๋ฉด์ ๋์์ค ์ ์๊ฒ ํ๋ฉด ์กฐ๊ธ ๋ ์ฝ๋๊ฐ ๊น๋ํด์ง๋ค! โจ
์ด์ ์ ์์ฑํด์คฌ๋ ์ฝ๋
<i className={comment.isLiked ? "hidden" : "far fa-heart unlike"} />
<i className={comment.isLiked ? "fas fa-heart like" : "hidden"} />
์์ ํ ์ฝ๋
comment.isLiked
? (<i className="fas fa-heart like" />)
: (<i className="far fa-heart unlike" />)
ํด๋น ๋ถ๋ถ ์ ์ฒด ์ฝ๋
<div className="Comment">
{this.props.commentList.map((comment) => {
return (
<li key={comment.id}>
<div>
<a href="#">{comment.userName}</a>
<span>{comment.content}</span>
</div>
<div>
<i
className="fas fa-trash"
onClick={() => this.props.deleteComment(comment.id)} />
{comment.isLiked
? (<i className="fas fa-heart like" />)
: (<i className="far fa-heart unlike" /> )}
</div>
</li>
);
})}
</div>
โ๏ธ localhost:3000 ์๋ต!
์๊ธฐ ์์ ์ public์์ ๊ฐ์ ธ์ค๊ณ ์๋ ๋ด์ฉ์ด๋ผ๋ฉด http://localhost:3000/
โ ์ด ๋ถ๋ถ์ ์๋ตํด์ค ์ ์๋ค.
componentDidMount() {
fetch("http://localhost:3000/data_saemsolyoo/commentData.json")
.then((res) => res.json())
.then((data) => {
console.log();
this.setState({
commentList: data,
});
});
}
โ fetch("/data_saemsolyoo/commentData.json")
โจ
โ๏ธ ๋ก์ง์ ์กฐ๊ธ ๋ ํจ์จ์ ์ผ๋ก!
์ผํญ ์ฐ์ฐ์์ ์์น๋ฅผ ์กฐ๊ธ ๋ฐ๊ฟ ์ค๋ค๋ฉด if๋ฌธ์ ์ฌ์ฉํ์ง ์๊ณ
, setState๋ ํ๋๋ง ์ฐ๋ฉด์
! ๊ฐ์ ๋ก์ง์ ์์ฑํด์ค ์ ์๋ค! ๐
์ด์ ์ ์์ฑํด์คฌ๋ ์ฝ๋
activeSubmitBtn = (e) => {
if (e.target.value.length > 0) {
this.setState({ disabled: false });
} else {
this.setState({ disabled: true });
}
};
์์ ํ ์ฝ๋
activeSubmitBtn = (e) => {
this.setState({ disabled: e.target.value.length > 0 ? false : true });
};
โ๏ธ ํจ์์ค์ด๊ธฐ
๐ค ๋ญ๊ฐ ์ฝ๋๊ฐ ๋ฐ๋ณต๋๋๊ฒ ๊ฐ๋ค๋ฉด..? ์ค์ฌ์ค ์ ์๋ค!!
์ด์ ์ ์์ฑํด์คฌ๋ ์ฝ๋
handleIdInput = (e) => {
const userId = e.target.value;
this.setState({
id: userId,
});
};
handlePwInput = (e) => {
const userPw = e.target.value;
this.setState({
pw: userPw,
});
};
โ ์ด๋ ๊ฒ ID. PW๋ฅผ ๋ค๋ฃจ๋ ํจ์๋ค์ด ๊ฐ๊ฐ ์์๋ค,,,
์์ ํ ์ฝ๋
์ด๋ฒคํธ๋ฅผ ๋ฐ์์ํค๋ ๊ฐ๊ฐ์ input์ name
attribute๋ฅผ ์ถ๊ฐํด์ฃผ๊ณ ๊ทธ name์ state์ key๊ฐ๊ณผ ๋๊ฐ์ด ํด์ค๋ค! ๊ทธ๋ผ ํด๋น key๊ฐ(name)์ ๋ฐ๋ผ setState๊ฐ ๋์ด ํจ์๋ฅผ ํ๋๋ก ์ค์ฌ์ค ์ ์๋ค. ๐๐ป
handleInput = (e) => {
const { value, name } = e.target;
this.setState({
[name]: value,
});
};
โ๏ธ image import
์ด๋ฏธ์ง๋ฅผ import ํด์ค ๋ ๋๋ฌด ๋ง์ import๋ก ํ์ผ ์๋จ์ด ์ง์ ๋ถํด ๋ณด์ธ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ์ ์ด์ฉํ ์ ์๋ค.
โ images.js
ํ์ผ์ ๋ง๋ค์ด ๋ค import ํด์ค๋ค.
โก ๊ทธ๋ฆฌ๊ณ import ํด์ค ๊ฒ๋ค์ ๊ฐ๊ฐ export ํด์ค๋ค.
โข ์ด๋ฏธ์ง๊ฐ ํ์ํ ํ์ผ์์ import ํด ์ฌ์ฉํ๋ฉด ๊น๋ํ๊ฒ ๊ด๋ฆฌํ ์ ์๋ค ๐
// images.js
import menu from '../../../../../images/saemsolyoo/Main/menu.svg';
import heart from '../../../../../images/saemsolyoo/Main/heart.svg';
import send from '../../../../../images/saranglee/Main/send.svg';
import bookmark from '../../../../../images/saemsolyoo/Main/bookmark.svg';
import comment from '../../../../../images/saemsolyoo/Main/comment.svg';
export const images = { menu, heart, send, bookmark, comment }
// Feed.js
import { menu, heart, send, bookmark, comment } from "./images"
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(Westagram Refactoring! ๐ง), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@saemsol/westagram-refactoring์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค