ewhk9887/korean_code_reviews_from_github huggingface dataset:
@@ -0,0 +1,32 @@
+import React from 'react';
+import Feed from './Feed';
+
+class Feeds extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      feeds: [],
+    };
+  }
+
+  componentDidMount() {
+    fetch('/data/feed.json')
+      .then(res => res.json())
+      .then(data => {
+        this.setState({ feeds: data });
+      });
+  }
+
+  render() {
+    const { feeds } = this.state;
+    return (
+      <div className="feeds">
+        {feeds.map(feed => (
+          <Feed key={feed.id} img={feed.img} text={feed.text} />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Feeds;

리뷰: - method 잘 생략해주셨네요! 👍

- 추가적으로, `http://localhost:3000` 부분도 생략할 수 있습니다. 포트 번호가 바뀔 때마다 에러가 발생하고 그때그때 수정해줘야 하는 번거로움이 있기 때문에, 다음과 같이 생략해서 사용해주세요!
```suggestion
    fetch('/data/feed.json')
```
@@ -0,0 +1,32 @@
+import React from 'react';
+import Feed from './Feed';
+
+class Feeds extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      feeds: [],
+    };
+  }
+
+  componentDidMount() {
+    fetch('/data/feed.json')
+      .then(res => res.json())
+      .then(data => {
+        this.setState({ feeds: data });
+      });
+  }
+
+  render() {
+    const { feeds } = this.state;
+    return (
+      <div className="feeds">
+        {feeds.map(feed => (
+          <Feed key={feed.id} img={feed.img} text={feed.text} />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Feeds;

리뷰: 오잉 여기에는 key prop 잘 부여해주셨네요!
살짝 흠을 잡자면,, 매개변수의 데이터는 각 피드에 대한 데이터이기 때문에 feeds -> feed가 더 적절한 것 같습니다.
@@ -1,9 +1,22 @@
+// eslint-disable-next-line
 import React from 'react';
+import Nav from './Nav';
+import Feeds from './Feeds';
+import MainR from './MainR';
+import './Main.scss';
 
-class Main extends React.Component {
+class MainYoonHee extends React.Component {
   render() {
-    return null;
+    return (
+      <div className="main-body">
+        <Nav />
+        <main>
+          <Feeds />
+          <MainR />
+        </main>
+      </div>
+    );
   }
 }
 
-export default Main;
+export default MainYoonHee;

리뷰: import 순서 수정해주세요! 일반적인 convention을 따라 순서만 잘 지켜주셔도 가독성이 좋아집니다. 아래 순서 참고해주세요.

- React → Library(Package) → Component → 변수 / 이미지 → css 파일(scss 파일)
@@ -0,0 +1,25 @@
+import React from 'react';
+
+class Recommend extends React.Component {
+  render() {
+    const { nickname, img } = this.props;
+    return (
+      <li className="user main-right__user2">
+        <div className="user-and-botton">
+          <img
+            className="user__img user__img--brder-red"
+            alt={nickname}
+            src={img}
+          />
+          <div className="user-id2">
+            <div className="user__id">{nickname}</div>
+            <div className="text--gray">한국어한국어한국어</div>
+          </div>
+        </div>
+        <button className="btn btn--hover nnn">팔로우</button>
+      </li>
+    );
+  }
+}
+
+export default Recommend;

리뷰: `<li>`태그, `<div>`태그 둘 중 하나로만 감싸주셔도 될 것 같습니다!
@@ -0,0 +1,22 @@
+import React from 'react';
+
+class Story extends React.Component {
+  render() {
+    const { nickname, img } = this.props;
+    return (
+      <li className="user main-right__user">
+        <img
+          className="user__img user__img--brder-red"
+          alt={nickname}
+          src={img}
+        />
+        <div className="user-id2">
+          <div className="user__id">{nickname}</div>
+          <div className="text--gray">2시간 전</div>
+        </div>
+      </li>
+    );
+  }
+}
+
+export default Story;

리뷰: 여기도 마찬가지-!
@@ -0,0 +1,59 @@
+import React from 'react';
+import Comment from './Comment';
+
+class CommentBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { feedComment: '', commentList: [] };
+  }
+
+  handleInput = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  addCommentByEnter = e => {
+    if (e.key === 'Enter') {
+      this.addComment();
+    }
+  };
+
+  addComment = () => {
+    const { feedComment, commentList } = this.state;
+    this.setState({
+      commentList: [...commentList, feedComment],
+      feedComment: '',
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <div className="feed__comment-box">
+          <input
+            name="feedComment"
+            className="comment__input"
+            placeholder="댓글 달기..."
+            onChange={this.handleInput}
+            onKeyDown={this.addCommentByEnter}
+            value={this.state.feedComment}
+          />
+          <button
+            className="btn btn--hover comment__btn"
+            onClick={this.addComment}
+          >
+            게시
+          </button>
+        </div>
+        <div className="feed__comment">
+          <ul className="feed__comment-list">
+            {this.state.commentList.map((comment, index) => {
+              return <Comment key={index} innerText={comment} />;
+            })}
+          </ul>
+        </div>
+      </>
+    );
+  }
+}
+
+export default CommentBox;

리뷰: 리액트로 파일 옮겨오기전 js파일로만 작업할 때 돔으로 접근하는 용도로 쓰고 지우는걸 깜빡했네요 …;;;ㅠㅠ지웠습니다!
@@ -1,9 +1,23 @@
 import React from 'react';
+import './Login.scss';
+import LoginForm from './LoginForm';
 
-class Login extends React.Component {
+class LoginYoonHee extends React.Component {
   render() {
-    return null;
+    return (
+      <article className="login-art">
+        <div className="log-in__main">
+          <h1 className="main-name">westagram</h1>
+          <div className="log-in">
+            <LoginForm />
+          </div>
+          <a className="find-ps" href="#!">
+            비밀번호를 잊으셨나요?
+          </a>
+        </div>
+      </article>
+    );
   }
 }
 
-export default Login;
+export default LoginYoonHee;

리뷰: 수정했습니당! 덕분에 라우터에 대해서 좀 더 알게됐네용 ㅎㅎ
@@ -0,0 +1,10 @@
+import React from 'react';
+
+class Comment extends React.Component {
+  render() {
+    const { innerText } = this.props;
+    return <li>{innerText}</li>;
+  }
+}
+
+export default Comment;

리뷰: 수정했습니다-! key값 넣는곳을 정확히 모르고있었는데 이제 정확하게 알거같아요!
@@ -0,0 +1,32 @@
+import React from 'react';
+import Feed from './Feed';
+
+class Feeds extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      feeds: [],
+    };
+  }
+
+  componentDidMount() {
+    fetch('/data/feed.json')
+      .then(res => res.json())
+      .then(data => {
+        this.setState({ feeds: data });
+      });
+  }
+
+  render() {
+    const { feeds } = this.state;
+    return (
+      <div className="feeds">
+        {feeds.map(feed => (
+          <Feed key={feed.id} img={feed.img} text={feed.text} />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Feeds;

리뷰: 수정했습니다-! 포트번호는 생략으루! 팁 감사합니당!
@@ -0,0 +1,32 @@
+import React from 'react';
+import Feed from './Feed';
+
+class Feeds extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      feeds: [],
+    };
+  }
+
+  componentDidMount() {
+    fetch('/data/feed.json')
+      .then(res => res.json())
+      .then(data => {
+        this.setState({ feeds: data });
+      });
+  }
+
+  render() {
+    const { feeds } = this.state;
+    return (
+      <div className="feeds">
+        {feeds.map(feed => (
+          <Feed key={feed.id} img={feed.img} text={feed.text} />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Feeds;

리뷰: feed로 수정완료 했습니당 😊
@@ -1,9 +1,22 @@
+// eslint-disable-next-line
 import React from 'react';
+import Nav from './Nav';
+import Feeds from './Feeds';
+import MainR from './MainR';
+import './Main.scss';
 
-class Main extends React.Component {
+class MainYoonHee extends React.Component {
   render() {
-    return null;
+    return (
+      <div className="main-body">
+        <Nav />
+        <main>
+          <Feeds />
+          <MainR />
+        </main>
+      </div>
+    );
   }
 }
 
-export default Main;
+export default MainYoonHee;

리뷰: scss파일 아래로 위치수정 했습니당 !
@@ -1,9 +1,22 @@
+// eslint-disable-next-line
 import React from 'react';
+import Nav from './Nav';
+import Feeds from './Feeds';
+import MainR from './MainR';
+import './Main.scss';
 
-class Main extends React.Component {
+class MainYoonHee extends React.Component {
   render() {
-    return null;
+    return (
+      <div className="main-body">
+        <Nav />
+        <main>
+          <Feeds />
+          <MainR />
+        </main>
+      </div>
+    );
   }
 }
 
-export default Main;
+export default MainYoonHee;

리뷰: 그 때 말씀해주셨던 부분이네용 ㅎㅎ.. <div>로 변경했습니당.. 콘솔창에 뜨던 알수없는 빨간색 글씨 오류가 이것떄문이였군용 ㅠㅠ index.html에있는 body부분과 충돌해서요; 기본적인 구조를 생각하면 당연한건데 제가 너무 안일했네요..
@@ -0,0 +1,25 @@
+import React from 'react';
+
+class Recommend extends React.Component {
+  render() {
+    const { nickname, img } = this.props;
+    return (
+      <li className="user main-right__user2">
+        <div className="user-and-botton">
+          <img
+            className="user__img user__img--brder-red"
+            alt={nickname}
+            src={img}
+          />
+          <div className="user-id2">
+            <div className="user__id">{nickname}</div>
+            <div className="text--gray">한국어한국어한국어</div>
+          </div>
+        </div>
+        <button className="btn btn--hover nnn">팔로우</button>
+      </li>
+    );
+  }
+}
+
+export default Recommend;

리뷰: 수정했숨미당~!😇
@@ -0,0 +1,22 @@
+import React from 'react';
+
+class Story extends React.Component {
+  render() {
+    const { nickname, img } = this.props;
+    return (
+      <li className="user main-right__user">
+        <img
+          className="user__img user__img--brder-red"
+          alt={nickname}
+          src={img}
+        />
+        <div className="user-id2">
+          <div className="user__id">{nickname}</div>
+          <div className="text--gray">2시간 전</div>
+        </div>
+      </li>
+    );
+  }
+}
+
+export default Story;

리뷰: 여기두용~
@@ -0,0 +1,51 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+
+class LoginForm extends React.Component {
+  constructor() {
+    super();
+    this.state = { id: '', ps: '' };
+  }
+
+  goToMain = e => {
+    this.props.history.push('/main-yoonhee');
+  };
+
+  handleInput = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  render() {
+    const { id, ps } = this.state;
+    const isAble = id.includes('@') && ps.length >= 5;
+    return (
+      <form>
+        <input
+          name="id"
+          className="log-in__id"
+          type="text"
+          placeholder="전화번호, 사용자 이름 또는 이메일"
+          onChange={this.handleInput}
+        />
+
+        <input
+          name="ps"
+          className="log-in__ps"
+          type="password"
+          placeholder="비밀번호"
+          onChange={this.handleInput}
+        />
+        <button
+          type="button"
+          className={`log-in__btn ${isAble ? '' : 'disabled'}`}
+          onClick={this.goToMain}
+          disabled={!isAble}
+        >
+          로그인
+        </button>
+      </form>
+    );
+  }
+}
+
+export default withRouter(LoginForm);

리뷰: 래영님 강의 덕분입니당 ㅋ.ㅋ
@@ -0,0 +1,59 @@
+import React from 'react';
+import Comment from './Comment';
+
+class CommentBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { feedComment: '', commentList: [] };
+  }
+
+  handleInput = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
+  addCommentByEnter = e => {
+    if (e.key === 'Enter') {
+      this.addComment();
+    }
+  };
+
+  addComment = () => {
+    const { feedComment, commentList } = this.state;
+    this.setState({
+      commentList: [...commentList, feedComment],
+      feedComment: '',
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <div className="feed__comment-box">
+          <input
+            name="feedComment"
+            className="comment__input"
+            placeholder="댓글 달기..."
+            onChange={this.handleInput}
+            onKeyDown={this.addCommentByEnter}
+            value={this.state.feedComment}
+          />
+          <button
+            className="btn btn--hover comment__btn"
+            onClick={this.addComment}
+          >
+            게시
+          </button>
+        </div>
+        <div className="feed__comment">
+          <ul className="feed__comment-list">
+            {this.state.commentList.map((comment, index) => {
+              return <Comment key={index} innerText={comment} />;
+            })}
+          </ul>
+        </div>
+      </>
+    );
+  }
+}
+
+export default CommentBox;

리뷰: 데이터 내용의 뜻을 알 수 있게 comment로 변경했습니다!
@@ -0,0 +1,14 @@
+const flowTypeDao = require('../models/flowTypeDao');
+const error = require('../utils/error');
+
+const getFlowTypes = async () => {
+  const flowTypes = await flowTypeDao.getFlowTypes();
+  if (flowTypes.length === 0) {
+    error.throwErr(404, 'NOT_FOUND_TYPE');
+  }
+  return flowTypes;
+}
+
+module.exports = {
+  getFlowTypes
+}
\ No newline at end of file

리뷰: ```suggestion
  return flowTypes;
}
```

else 없어도 될 것 같습니다 :)
@@ -0,0 +1,83 @@
+@import '../../../../../Styles/common.scss';
+
+.navYeseul {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  right: 0;
+  transform: translateX(-50%);
+  padding: 8px 0;
+  border-bottom: 1px solid $main-border;
+  background-color: #fff;
+  z-index: 9999;
+
+  .inner-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+    max-width: 975px;
+    box-sizing: border-box;
+
+    h1 {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      font-size: 28px;
+      color: $main-font;
+
+      button {
+        margin-right: 15px;
+        padding: 0 14px 0 0;
+        width: 22px;
+        height: 22px;
+        box-sizing: content-box;
+        border-right: 2px solid $main-font;
+
+        img {
+          margin: 0;
+        }
+      }
+    }
+
+    .nav__search {
+      display: flex;
+      align-items: center;
+      padding: 3px 10px 3px 26px;
+      width: 215px;
+      min-width: 125px;
+      height: 28px;
+      box-sizing: border-box;
+      border: 1px solid $main-border;
+      border-radius: 3px;
+      background-color: $bg-light-grey;
+
+      input {
+        height: 100%;
+        background-color: transparent;
+
+        &::placeholder {
+          text-align: center;
+        }
+      }
+    }
+
+    .nav__menu {
+      display: flex;
+
+      li {
+        margin-left: 22px;
+        width: 22px;
+        height: 22px;
+
+        .like-button {
+          padding: 0;
+          width: 22px;
+          height: 22px;
+        }
+      }
+    }
+  }
+}

리뷰: css 속성 순서에 따르면 z-index가 가장 아래에 와야 할 것 같아요 😀
@@ -0,0 +1,83 @@
+@import '../../../../../Styles/common.scss';
+
+.navYeseul {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  right: 0;
+  transform: translateX(-50%);
+  padding: 8px 0;
+  border-bottom: 1px solid $main-border;
+  background-color: #fff;
+  z-index: 9999;
+
+  .inner-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+    max-width: 975px;
+    box-sizing: border-box;
+
+    h1 {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      font-size: 28px;
+      color: $main-font;
+
+      button {
+        margin-right: 15px;
+        padding: 0 14px 0 0;
+        width: 22px;
+        height: 22px;
+        box-sizing: content-box;
+        border-right: 2px solid $main-font;
+
+        img {
+          margin: 0;
+        }
+      }
+    }
+
+    .nav__search {
+      display: flex;
+      align-items: center;
+      padding: 3px 10px 3px 26px;
+      width: 215px;
+      min-width: 125px;
+      height: 28px;
+      box-sizing: border-box;
+      border: 1px solid $main-border;
+      border-radius: 3px;
+      background-color: $bg-light-grey;
+
+      input {
+        height: 100%;
+        background-color: transparent;
+
+        &::placeholder {
+          text-align: center;
+        }
+      }
+    }
+
+    .nav__menu {
+      display: flex;
+
+      li {
+        margin-left: 22px;
+        width: 22px;
+        height: 22px;
+
+        .like-button {
+          padding: 0;
+          width: 22px;
+          height: 22px;
+        }
+      }
+    }
+  }
+}

리뷰: common css에 있어서 빼셔도 될 것 같아요!
@@ -0,0 +1,83 @@
+@import '../../../../../Styles/common.scss';
+
+.navYeseul {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  right: 0;
+  transform: translateX(-50%);
+  padding: 8px 0;
+  border-bottom: 1px solid $main-border;
+  background-color: #fff;
+  z-index: 9999;
+
+  .inner-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+    max-width: 975px;
+    box-sizing: border-box;
+
+    h1 {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      font-size: 28px;
+      color: $main-font;
+
+      button {
+        margin-right: 15px;
+        padding: 0 14px 0 0;
+        width: 22px;
+        height: 22px;
+        box-sizing: content-box;
+        border-right: 2px solid $main-font;
+
+        img {
+          margin: 0;
+        }
+      }
+    }
+
+    .nav__search {
+      display: flex;
+      align-items: center;
+      padding: 3px 10px 3px 26px;
+      width: 215px;
+      min-width: 125px;
+      height: 28px;
+      box-sizing: border-box;
+      border: 1px solid $main-border;
+      border-radius: 3px;
+      background-color: $bg-light-grey;
+
+      input {
+        height: 100%;
+        background-color: transparent;
+
+        &::placeholder {
+          text-align: center;
+        }
+      }
+    }
+
+    .nav__menu {
+      display: flex;
+
+      li {
+        margin-left: 22px;
+        width: 22px;
+        height: 22px;
+
+        .like-button {
+          padding: 0;
+          width: 22px;
+          height: 22px;
+        }
+      }
+    }
+  }
+}

리뷰: 오 꼼꼼히 봐주셨네요 감사합니당 :) 고치러가유
@@ -0,0 +1,83 @@
+@import '../../../../../Styles/common.scss';
+
+.navYeseul {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  right: 0;
+  transform: translateX(-50%);
+  padding: 8px 0;
+  border-bottom: 1px solid $main-border;
+  background-color: #fff;
+  z-index: 9999;
+
+  .inner-nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+    max-width: 975px;
+    box-sizing: border-box;
+
+    h1 {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      font-size: 28px;
+      color: $main-font;
+
+      button {
+        margin-right: 15px;
+        padding: 0 14px 0 0;
+        width: 22px;
+        height: 22px;
+        box-sizing: content-box;
+        border-right: 2px solid $main-font;
+
+        img {
+          margin: 0;
+        }
+      }
+    }
+
+    .nav__search {
+      display: flex;
+      align-items: center;
+      padding: 3px 10px 3px 26px;
+      width: 215px;
+      min-width: 125px;
+      height: 28px;
+      box-sizing: border-box;
+      border: 1px solid $main-border;
+      border-radius: 3px;
+      background-color: $bg-light-grey;
+
+      input {
+        height: 100%;
+        background-color: transparent;
+
+        &::placeholder {
+          text-align: center;
+        }
+      }
+    }
+
+    .nav__menu {
+      display: flex;
+
+      li {
+        margin-left: 22px;
+        width: 22px;
+        height: 22px;
+
+        .like-button {
+          padding: 0;
+          width: 22px;
+          height: 22px;
+        }
+      }
+    }
+  }
+}

리뷰: 왜 제 common엔 없죠?!?!
@@ -0,0 +1,60 @@
+@import '../../../Styles/common.scss';
+
+.loginYeseul {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -60%);
+  padding: 32px 0 25px;
+  width: 350px;
+  text-align: center;
+
+  h1 {
+    font-size: 40px;
+  }
+
+  .login-form {
+    margin: 35px 40px 120px;
+
+    &__input-box {
+      margin-bottom: 15px;
+
+      input {
+        margin: 3px 0;
+        padding: 12px 10px 10px;
+        border: 1px solid $main-border;
+        border-radius: 3px;
+        background-color: $bg-light-grey;
+
+        &::placeholder,
+        &::-webkit-input-placeholder,
+        &::-ms-input-placeholder {
+          color: $font--grey;
+        }
+
+        &:focus {
+          border: 1px solid $border--gray;
+        }
+      }
+    }
+
+    button {
+      padding: 8px;
+      width: 100%;
+      border-radius: 4px;
+      background-color: $btn--blue;
+      color: #fff;
+      font-weight: 600;
+    }
+  }
+
+  .find-pw {
+    font-size: 13px;
+  }
+
+  button:disabled,
+  input:disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}

리뷰: - & 연산자 활용 굿입니다!
@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import './Comment.scss';
+
+class Comment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLiked: false,
+    };
+  }
+
+  likeComment = () => {
+    this.setState({ isLiked: !this.state.isLiked });
+  };
+
+  render() {
+    const { isLiked } = this.state;
+    const { info, handleClick } = this.props;
+
+    return (
+      <p className="feed__comment align-item-center">
+        <span className="user-name">{info.writer}</span>
+        <Link to="/main-yeseul">{info.tagId ? `@${info.tagId}` : ''}</Link>
+        {info.content}
+        <button
+          type="button"
+          className="delete-btn"
+          onClick={() => handleClick(info.id)}
+        >
+          x
+        </button>
+        <button
+          className={
+            isLiked ? 'like-btn align-right clicked' : 'like-btn align-right '
+          }
+          onClick={this.likeComment}
+        >
+          <svg
+            version="1.1"
+            id="Capa_1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            viewBox="-50 -45 580 580"
+            xmlSpace="preserve"
+          >
+            <path d="M376,30c-27.783,0-53.255,8.804-75.707,26.168c-21.525,16.647-35.856,37.85-44.293,53.268c-8.437-15.419-22.768-36.621-44.293-53.268C189.255,38.804,163.783,30,136,30C58.468,30,0,93.417,0,177.514c0,90.854,72.943,153.015,183.369,247.118c18.752,15.981,40.007,34.095,62.099,53.414C248.38,480.596,252.12,482,256,482s7.62-1.404,10.532-3.953c22.094-19.322,43.348-37.435,62.111-53.425C439.057,330.529,512,268.368,512,177.514C512,93.417,453.532,30,376,30z" />
+          </svg>
+        </button>
+      </p>
+    );
+  }
+}
+
+export default Comment;

리뷰: - id 값은 프로젝트 전체 내에서 유일해야하기 때문에, 꼭 필요한 경우에만 사용해주세요!
- id 대신에 onClick 이벤트에 바로 인자를 넘겨주실 수도 있습니다. 참고해주세요!
```js
onClick = {() => this.props.handleClick(info.id)}
```