WeCode 3주차부터는 기존에 html, css, javascript로 만들었던 사이트를 react로 바꾸는 과정이 진행되었다!

---

하다가 어려웠던 부분

   Login page   

changeHandler = (e) => {
  this.setState({
    userId: e.target.value,
    userPw: e.target.value,
  });
};
<input className='login_input' onChange={this.changeHandler} type='text' placeholder='전화번호, 사용자 이름 또는 이메일' />
<input className='login_input' onChange={this.changeHandler} type='password' placeholder='비밀번호' />

이렇게 작성했었는데....!

안되는 이유가 있었다ㅠㅠㅠ changeHandler 라는 공통의 event를 ID input과 PW input 에서 모두 사용하고 있으니까ㅠㅠ

해당 state 의 userId, userPw 가 가르키는 e.target 이 같은거인것....!

아 되게 간단하게 풀렸다ㅠㅠㅠㅠ 이걸 몰랐네😭😭

changeIdHandler = (e) => {
    this.setState({
      userId: e.target.value,
    });
  };

  changePwHandler = (e) => {
    this.setState({
      userPw: e.target.value,
    });
  };

<input className='login_input' onChange={this.changeIdHandler} type='text' placeholder='전화번호, 사용자 이름 또는 이메일' />
<input className='login_input' onChange={this.changePwHandler} type='password' placeholder='비밀번호' />

이렇게 ID event 와 PW event 를 쪼개줬다!

작동 잘함.....👍

   Main page - 게시 누르면 댓글 업로드   

handleAddForm = () => {
  if (this.state.userInput) {
    this.setState({ commentArr: this.state.commentArr.concat(this.state.userInput) });
  }
};

일단 함수 먼저 선언하고!

if (this.state.userInput) 라는 조건을 걸어준다!
걸어준 이유는 input 에 아무 값도 안들어왔을 때 댓글이 올라가는걸 방지하기 위해서!!

그담에 form 을 setState() 해주는데, this.state.userInput 을 this.state.commentArr 에 concat 해준다!!

여기서 userInput 이란??
input 창에서 받아온 데이터임!! (user가 입력한 s댓글 내용!)

<button> 을 onClick 할때마다 실행되는 이벤트로 만들었고, 처음엔 빈 배열이었지만 클릭할 때 마다 userInput 의 값을 commentArr 배열이랑 합쳐서 반환해준다. ( concat 메서드를 통해서!!)

concat 은 기본 배열과 인자로 주어진 배열/값을 합쳐서 새 배열을 반환하는 메서드임!!
처음에 기본 배열은 빈 배열이고, 인자로 들어온 값은 userInput 값!
그럼 둘을 [ ] + "userInput" 합쳐서 [ "userInput" ] 가 반환!!!

만약 다음에 버튼을 또 클릭하면 어찌 될까??
[ "userInput" ] + [ "userInput2" ] 가 되어서 [ "userInput", "userInput2" ] 이 된다!

그리고 render() { return( 안에서 <div className='comments'> </div> 안에 아래 코드를 넣어주었다!!

{this.state.form.map((userInput, idx) => (
	<CommentForm key={idx} name='Wecoder' comment={userInput} />
))}

이건 솔직히 승현님이 쳐주신 코드긴 한데....ㅋ.....ㅋㅋㅋㅋ.......

this.state.commentArr 에 대해 map 을 돌리는데, map에 콜백함수를 넘겨줄때 파라미터로 userInput 을 같이 전달해준다! ( idx 는 그냥 key 값에 지정하려고 넘긴 인자라서 자세한 설명은 생략...! 이 key 값은 나중에 댓글 삭제나 기타 등등에서 요긴하게 쓸 예정입니당)

map 메서드 자체가 , 배열의 요소들한테 함수를 쫙 적용하고 반환까지 하는 메서드이기 때문에,

<CommentForm key={idx} name='Wecoder' comment={userInput} />

에서 key 값과 comment 값에 인자로 전달받은 요소(userInput)과 index 위치 값을 적용한 후 <CommentForm/> 이라는 컴포넌트 자체를 반환!!!

   Main page - Enter 누르면 댓글 업로드   

handlePressEnter = (e) => {
    if (e.key === 'Enter') {
      this.handleAddForm();
    }
  };

handlePressEnter 함수를 선언하고, 위의 handleAddForm 이벤트를 넣어줬다!

key === 'Enter' 부분이 특이한데, 처음엔 JS처럼 e.keyCode === 13 을 넣었는데 안 먹는것....ㅠㅠ!

검색해보니 react에서는 e.key == 'Enter' 를 주로 사용한다고...!

e.key 로 바꾸자마자 바로 잘 적용된다!!!!

   Main page - 댓글 업로드 후 input창에 남아있는 글 삭제   

handleAddForm 이벤트의 setState 값에 userInput: '' 을 추가로 넣어줬다!

userInput 값을 commentArr 이랑 concat 으로 합친 이후에는 userInput의 내용을 '' 로 지정해줘서 내용이 지워진 것 처럼 보이도록!

근데 내용이 안지워져서 멘붕ㅠㅠㅠㅠㅠ

다음날, react 세션에서 들은건데 해당 input에 ( 진짜 <input /> 태그에 )

value 값을 지정해줘서, setState 됐을 때, 변경된 state 값으로 input창의 내용이 바로바로 바뀌게 해주면 된다고 한다.

그럼.... input 창에 이 태그만 넣어주면 되는거 아냐?

<input value={this.state.userInput} 어쩌구 />

띠용~~~ 바로 됨😂👍

이렇게 동작함!

---

여기까지 필수(?) 과제 끝~!
하지만 여기서 멈추면 NOJAM~~
이 외에도 ❤️ 버튼, 댓글 수 카운트, 클릭시 검색창 바뀌는거 등등 구현했다! 이건 다음글에 계속!

추가로 더 구현하고 싶은건,
1. 댓글 모두보기 버튼 클릭 시 댓글 창 다 보이는거(이건 class 변경해서 쉽게 처리 가능할듯)
2. 로그인 페이지의 회원가입 창
3. main Nav_bar 아이콘 클릭시 검은색으로 변하는거!

얘네는 꼭 해야지~는 아니고...시간 나면?? 일단 밀린 블로그부터ㅎㅎㅎㅎ