Assignment

1. 로그인 버튼 눌렀을 떄, 사용자가 입력한 id와 pw 가 콘솔에 나올 수 있게 해주세요.
2. 사용자가 입력한 id와 pw가 기준(id- '@'포함/ pw-5글자 이상)에 맞는 경우에만 로그인 버튼 색상이 활성화 될 수 있도록 해주세요.
3. 메인 페이지 : 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭시 댓글이 추가되도록 구현.

// 부모 컴포넌트 Feeds
class Feeds extends Component {
    constructor(){
        super()
        this.state = {
          replyList : [ ],
          value : "",
        }
    }
    
    setValue = (event) => {
      this.setState({
        value : event.target.value
      })
    }

    pushList = (event) => {
      this.setState({
        replyList: this.state.replyList.concat(this.state.value)
      })
    }
    
    pushListKey = (event) => {
      if(event.key === 'Enter'){
        this.setState({
          replyList: this.state.replyList.concat(this.state.value)
        })
      }
    }

    render() {
    return(
    (중략)
    <ul>
     <Reply replyList={this.state.replyList} />
    </ul>
    <div className='commenting'>
      <div>
        <input className='commenting_input' type="text" placeholder="댓글달기..." 
         onChange={this.setValue} 
         onKeyPress={this.pushListKey} />
      </div>
         <button className='commenting_button' onClick={this.pushList}>게시</button>
      </div>

// 자식 컴포넌트 Reply
class Reply extends Component {
    constructor(){
        super()
    }

    render(){
        return(
            this.props.replyList.map( (reply, idx) =>{
                return <li key={idx}>{reply}</li>
            })
        )
    }
}

이를 해결하기 위해 다음과 같은 알고리즘을 설정하였다.

• 댓글이 나타나는 부분을 컴포넌트로 만들었다.(Reply)
• 해당 컴포넌트는 댓글 부분으로 li태그로 이루어져 있다.
• 댓글이 달릴 때마다, 컴포넌트를 반복하는 것도 생각해봤지만,
  Relply 컴포넌트에서 li태그가 반복되고 이 상황을 렌더하는 것을 선택했다.
• Reply 컴포넌트의 li 태그가 반복되기 위해 map 메서드를 사용하기로 결정했고. 이를 위해 배열이 필요하다는 것을 알게 되었다.
• 배열을 이루는 원소는 댓글 하나하나의 내용이고 이 내용을 map 을 통해 li 태그를 얻게될 것이다.
• 댓글 내용을 얻기 위해 Feeds 컴포넌트의 input 태그에서 value를 받아와 state의 value값으로 설정하였다.
• state에 빈 배열을 설정하고, 엔터 혹은 게시 버튼을 클릭을 하면 state의 value값(댓글 창에 기록된 문자열)이 빈 배열에 들어가게 된다. 이 역시 직접적으로 바꿀 수 없기에, 새로운 배열을 반환해주는 concat() 메서드를 사용하였다.
• 이제 댓글 창에 내용을 입력하면 state의 value 값이 변경되고, 클릭 또는 엔터를 치면 그 value 값이 빈 배열(replyList)에 들어가게 된다.
• 이제 값이 채워진 replyList 배열을 props를 통해 자식 컴포넌트로 가져온다. 해당 배열의 각 원소를 li 태그로 감싸준다.
• 끝.