State & Event

1. Login | 사용자 입력 데이터 저장

제시된 문제 : ID와 PW <input>에 이벤트가 발생할 때, handleIdInput함수를 실행하고 이벤트가 일어난 요소에 담긴 (event.target.value)을 state에 저장한다.

< 내가 작성해본 코드 >

constructor() {
 super();
  this.state = {
    email: '',
    password: '',
    };
  }
  handleIdInput = event => {
    this.setState({ email: event.target.value });
  };
  handlePwInput = event => {
    this.setState({ password: event.target.value });
  };

email(idInput)과 password(pwInput)의 빈 값을 만들어주고, handleIdInput 과 handlePwInput함수를 이용해서 email과 password에 이벤트가 일어난 값을 넣어주었다. 콘솔을 찍었을 때 값이 들어가는걸 확인할 수 있었다.

< 리뷰를 통해 배우게 된 코드 >

 handleInput = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

나는 handleIdInput 과 handlePwInput을 handleInput으로 만들어서 key 값이 Input의 name이 변경되는 것에 맞춰 값이 입력되게 하는 것으로 이해했고, 아래와 같이 이를 적용해야 했다.

<input
  className="userId"
  placeholder="전화번호, 사용자이름 또는 이메일"
  name="email" 
  onChange={this.handleInput}
/>

2. Login | 로그인 버튼 활성화

제시된 문제 : 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 하고, 삼항연산자 조건에 따라 색의 변화를 주어야 한다.( ID - @ 포함 / PW - 5글자 이상)

<내가 작성한 코드>

<button className={
  this.state.email.indexOf('@') !== -1 &&
  this.state.password.length >= 5
  ? 'activeButton'
  : 'disabledButton'}

주어진 문제에서 ID는 '@'가 있어야하고, PW는 5자 이상이기 때문에 .indexOf와.length를 이용해 조건을 입력하고, 삼항연산자를 사용해야 했기 때문에 조건 ? true : false를 이용해서 조건이 참일 경우 'activeButton'을 거짓일 경우 'disabledButton'을 적용했다.

<리뷰를 통해 배우게 된 코드>
조건을 변수로 선언해서 작성할 수 있다는 리뷰를 작성해주셔서 그 내용을 보고 수정해보았다. render()의 아래에서 변수를 선언하였고,삼항연산자를 이용해 버튼의 활성화를 관리했다. 그리고 변수명은 boolean의 값을 나타내기 위해 isvalid를 이용해 지어야 한다.

const isvalidButton = this.state.email.indexOf('@') !== -1 && this.state.password.length >= 5;
 <button className={isvalidButton ? 'activeButton' : 'disabledButton'}
          disabled={!isvalidButton}

3. Main | 댓글 기능

제시된 문제 : 사용자가 댓글 입력 후 enter를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현하고, Array.map을 활용하라.

<내가 작성한 코드>

  constructor() {
    super();
    this.state = {
      comment: '',
      commentList: [],
    };

<입력되는 댓글을 저장하는 부분>
  replyComment = e => {
    this.setState({
      comment: e.target.value,
    });
  };

<입력되는 댓글을 추가하는 부분>
  addreplyComment = () => {
    this.setState({
      commentList: this.state.commentList.concat(this.state.comment),
      comment: '',
    });
  };

<엔터키가 눌렸을 때 부분>
  pressEnter = e => {
    if (e.key === 'Enter') {
      this.addreplyComment();
    }
  };

<댓글이 추가되는 부분>
<ul className="commentLists">
  {this.state.commentList.map(comment => {
   return (
    <li className="replyComment">
     <span className="commentId">hoonstagram</span>
      <span>{comment}</span>
     </li>
   );
   })}

<댓글작성에 대한 event>
<input className="feedComment"
         value={this.state.comment}
   placeholder="댓글 달기..."
      onChange={this.replyComment}
    onKeyPress={this.pressEnter}/>
<button className="submitbtn" 
          onClick={this.addreplyComment}>게시</button>

간단회고

어느덧 벌써 3개월 과정의 1/3이 지났다. 리액트를 시작한지 2주 되었고, 앞으로 프로젝트를 앞두고 있어 조금 걱정이 있다. 하지만 벨로그를 작성하면서 다시 쳐보는데 처음보다는 조금 익숙해진 느낌으로 칠 수 있었다. 프로젝트를 하면서 조금 더 발전할 수 있도록 노력해야겠다. 그리고 클론코딩 중 댓글의 컴포넌트화 그리고 MOCK DATA화도 진행을 했는데, 이 부분은 다른 글에서 작성해 볼 수 있도록 해야겠다. 오늘은 여기까지!