Instagram 클론 프로젝트 - 2

또 오랜만의 업로드가 되겠다. 최근 포스팅을 하지 못하고 집중하고 있던 위코드의 과제는 React 개념을 잡고 React 를 통해 인스타그램의 메인페이지 중 댓글과 피드 부분을 Component 화 하는 것을 하고 있었다. 그동안 바닐라 자바스크립트와 CSS 를 활용해서 인스타 메인을 구현하다가 리액트로 해보려니까 아직 개념이 약한 상태에서 리액트를 진행해서 그런지 상당히 버벅거리며 작업을 하였다.

기본적인 작업 목표는 아래와 같았다.

작업목표

• 4명의 팀원이 하나의 Header 부분을 <Nav> 로 만들어서 공유
• Feed 부분의 컴포넌트화
• Feed 에 이은 댓글 부분도 컴포넌트화

✅ 1번 목표

위코드에서 지정해준 4명의 조원들 중 한명의 Header 부분을 Nav.js 와 Nav.scss 로 분리하여 4명 모두의 페이지에 구동됨을 확인하였다.

스크린샷에서 볼 수 있듯이 4명의 조가 공유하는 Nav.js 와 Nav.scss 를 적용하였더니 제대로 동작하고 있음을 확인할 수 있었다.

✅ 2번 목표

Feed 자체를 컴포넌트화 하는 것은 크게 어렵지 않았다. 바닐라 자바스크립트로 만들어진 Feed 부분을 뚝 때다가 feed.js 와 feed.scss 로 분리해주었다. 그리고 리액트에서 새로 배운 개념인 State 와 Props 를 사용하였다.

Main.js 에 Feed 에 Props 를 주기위해 State를 아래와 같이 설정해주었다.

class MainJongmin extends React.Component {
  constructor() {
    super();
    this.state = {
      feed: [
        {
          id: 'kevinlee1207',
          location: 'Mankato',
          mention: 'Home',
          likeId: 'jongmin_8910',
          img: '/images/Jongmin/feed contents.JPG',
        },
      ],
    };
  }

위와 같이 피드 부분이 Array.map() 을 통해서 개별적으로 구현될 수 있게 feed 라는 배열로 만들어 Prop로 넣을 필요가 있는 부분들을 넣어주었다. 이를 통해 아래 값들만 변경해서 붙여주면 map 함수에 의해서 새로운 피드를 생성할 수 있다.

✅ 3번 목표

이제 분리된 피드 부분에서 댓글이 달리는 부분을 분리해주는 작업을 해주었다. 과제로써 map()과 filter() 함수를 사용하여야 한다는 목표가 있었다. comment.js 를 새로 만들고 덧글에 사용될 state와 함수를 만들어주었다.

class Comment extends React.Component {
  state = {
    comment: '',
    comments: [],
    btn: '게시',
  };

  num = 0;

  handleChange = e => {
    this.setState({
      comment: e.target.value,
    });
  };

  handleKeyPress = e => {
    if (e.key === 'Enter') {
      if (!this.state.comment) {
        e.preventDefault();
      } else {
        this.handleComment();
      }
    }
  };

  handleComment = () => {
    this.setState({
      comments: this.state.comments.concat({
        num: this.num,
        comment: this.state.comment,
      }),
      comment: '',
    });
    this.num += 1;
  };

  handleRemove = num => {
    const { comments } = this.state;
    const nextComments = comments.filter(comment => {
      return comment.num !== num;
    });
    this.setState({
      comments: nextComments,
    });
  };

그리고 동작을 확인해보았다.

위의 스샷처럼 map() 함수를 통해 들어가고 옆의 'X' 를 통해 누르면 filter() 에 의해서 덧글이 삭제되는 방식으로 동작된다.