My code
render() {
const { commentBox, isHeartChange, changeHeartColor } = this.props;
return (
<>
<ul>
{commentBox.map(comment => (
<li key={comment.id}>
<div>
<span>{comment.userId}</span>
{comment.content}
</div>
<button onClick={changeHeartColor}>
<img
alt="checkingHeart"
src="../../images/seyeonPark/heart.png"
width="12px"
className={isHeartChange ? 'likeHeart' : 'unlikeHeart'}
/>
</button>
</li>
))}
</ul>
</>
);
}
}
리팩토링
render() { const { commentBox, isHeartChange, changeHeartColor } = this.props; return ( <ul> {commentBox.map(comment => ( <li key={comment.id}> <div> <span>{comment.userId}</span> {comment.content} </div> <button onClick={changeHeartColor}> <img alt="checkingHeart" src="../../images/seyeonPark/heart.png" width="12px" className={isHeartChange ? 'likeHeart' : 'unlikeHeart'} /> </button> </li> ))} </ul> ); } }
My code
componentDidMount() {
fetch('http://localhost:3000/data/feedDataSeyeon.json', {
method: 'GET',
})
.then(res => res.json())
.then(data => {
this.setState({ feedList: data });
});
}
리팩토링
componentDidMount() { fetch('http://localhost:3000/data/feedDataSeyeon.json') .then(res => res.json()) .then(data => { this.setState({ feedList: data }); }); }
class LoginBox extends React.Component {
render() {
const { onChange, changeBtn, inputIdValue, inputPwValue } = this.props;
uploadComment = () => {
const { commentBox, comment } = this.state;
if (comment.length === 0) return;
const newCommentBox = [
...commentBox,
사실 Mock data를 구현 중에 코드도 많이 바뀌고 컴포넌트화하던 중에 일이 생겨 전날 PR 한 것을 토대로 코드리뷰를 받았다.
코드리뷰를 받은 것을 하나하나 보고, 놓친 부분도 많아 깨달은 점이 많다.
그리고 아직 적용하지 못한 부분도 있다.
그런데 나름 칭찬 받은 부분이 있어 뿌듯하고, 감사했다.