[react.js] 첫 미니 프로젝트(인스타그램 클론)

4주간 공부하고 실습해본 html,css,javascript,react에 대해 인스타그램 홈페이지를 클론했던 것을 바탕으로 정리하며 한번 복습해보려고 한다.

• 간략 소개
  html, css, javascript만을 이용해서 인스타그램을 클론해보고, 똑같은 내용을 React로 다시 클론해봤다. 클론코딩을 처음해봤기 때문에, 시작하기 전에는 과연 이 페이지의 레이아웃과 기능을 구현해낼 수 있을까라는 막연한 두려움이 있었지만, 직접 해보니 그런 막연한 두려움은 사라졌다. 간단한 미니 프로젝트지만 react로 만든 첫 페이지라 의미 있었다.
  
  
• 기간📆 :
  • 2020.06.29~2020.07.05 html, css, javascript
  • 2020.07.06~2020.07.17 react
    
    
• 적용 기술🔨:
  - React.js(class형 컴포넌트), JavaScript(ES6), SASS, Git
  
  
• 사이트 주요 기능
  1) 로그인 페이지
  - 로그인 기능
  - 이메일 및 패스워드 양식 확인 기능
  2) 메인 페이지
  - 댓글 추가 / 삭제
  - 컴포넌트 갯수 조절 가능

코드 리뷰👀

👉 로그인 페이지

로그인 기능

loginToMain = () => {
    this.props.history.push('/main-hyosik');
  };

checkIdPw = () => {
    const { id, pw, adminId, adminPw } = this.state;
    fetch('', {
      method: 'POST',
      body: JSON.stringify({
        email: id,
        password: pw,
      }),
    }).then((res) => res.json());

    if (id === adminId && pw === adminPw) {
      this.loginToMain();
    } else {
      alert('비밀번호가 맞지 않습니다.');
    }
  };

checkIdPw메소드에서 id와 pw를 input창에 입력한 value값과 비교해서, 비교한 값이 맞다면 main페이지로 이동한다. fetch함수의 첫번째 인자로 여기에는 없지만 실제 api주소를 넣어서 id와 pw데이터를 전송해 백엔드와 소통해보았다.

id와 pw 양식 확인

<button className={id.includes('@') && pw.length >= 5 ? 'box login-changed' : 'box login'}
        onClick={this.checkIdPw}>로그인</button>

클래스명에 따라 다른 css를 적용시켜서 조건에 따라 클래스명을 변경 시켜줌으로써 id와 pw의 조건이 충족되면 버튼의 css를 변경시켜줬다.

👉 메인 페이지

댓글 추가

class Comment extends React.Component {
  constructor() {
    super();
    this.state = {
      comment: '',
      comments: [],
    };
  }
  num = 0;
  changeHandler = (e) => {
      this.setState({
        comment: e.target.value,
      });
    };

  addComment = (e) => {
      if (e.keyCode === 13 && this.state.comment.length > 0) {
        this.clickHandler();
      }
    };

  clickHandler = () => {
      const { comment, comments } = this.state;
      this.setState({
        comments: comments.concat({
          num: this.num,
          comment: comment,
        }),
        comment: '',
      });
      this.num += 1;
    };
  ----------------------------------------------------------
  <input onChange={this.changeHandler}
         onKeyUp={this.addComment}
         type="text"
         className="add-input"
         placeholder="댓글 달기..."
         value={comment} />

• input의 onChange에 changeHandler를 통해서 댓글의 value값을 실시간으로 변경시켜 준다.
• onKeyUp에 addComment에서는 댓글이 한글자라도 입력이 되었는지 확인하고 clickHandler를 실행시킨다.
• clickHandler에서는 댓글을 삭제할 때 필요한 num과 입력한 댓글을 comment변수에 저장해서 comments배열에 추가해준다.

  render() {
      const { comment } = this.state;
      return (
        <>
          {this.state.comments.map((comment) => {
            return (
                <div key={comment.num} className="comment">
                  <div className="comment-container">
                    <span className="name">h_sick</span>
                    <span className="comment-text">{comment.comment}</span>
                  </div>                  
          <button className="dot" onClick={() => this.removeHandler(comment.num)}></button>
            </div>
         )

render()에서는 map함수를 활용해서 추가한 댓글을 화면에 보여줬다. comments배열에 들어간 값들을 하나씩 꺼냈다.

댓글 삭제

removeHandler = (num) => {
    const commentFilter = this.state.comments.filter((comment) => {
      return comment.num !== num;
    });
    this.setState({ comments: commentFilter });
  };

댓글 삭제를 구현하느라 당시에 정말 애를 많이 먹었다. remove()함수를 사용하여 comments배열 안에 담긴 해당 댓글을 삭제했더니, 화면에서는 댓글이 사라졌는데 배열안을 확인해보면 값은 남아있는 이상한 일이 일어났다. 그래서 filter함수를 사용했었는데 처음에는 num변수를 사용하지 않았더니, 댓글을 삭제하면 같은 내용의 댓글이 전부 삭제됐다. 결국, num이라는 전역 변수를 사용해 comments배열에 댓글을 하나씩 넣을 때, comment마다 index를 count한 셈이다. filter함수에서는 해당 num이 아닌 comments배열의 값들만을 comments값에 담아줌으로써 결국, 해당되는 num의 댓글만을 삭제하게 만들었다.

좋았던 점😄

• 프로젝트라고 하기는 민망한 수준이지만, 처음으로 react를 활용하여 페이지 하나를 완성했다.
• 바닐라 자바스크립트와 달리 DOM에 직접 접근할 필요가 없는 react의 특징을 잘 살려보았다.
• 컴포넌트화 시킬 수 있는 수준의 컴포넌트는 여러 컴포넌트로 분리시켰다.
• 팀 프로젝트는 아니였지만, 팀원들과 index.html과 reset.css/common.css를 git으로 공유하고 같이 사용해 본 것이 git의 개념을 이해하는데 도움이 됐다.

아쉬웠던 점😕

• react 개념 공부에 시간을 몰두하고 싶어서, 기능을 더 이상 추가하지 않았다.
• 팀원들과 css파일을 공유하니 화면이 깨졌다. css를 조금 더 범용적으로 적용되게 작성해야겠다.
• 기능구현시, react가 아닌 javascript의 개념이 부족해서 어려웠던 부분이 많았다.