[React] Westagram 코딩 (2) - comment

react instagram clone coding 표지

---

리액트로 댓글 기능을 구현하는 것이 너무 어려웠다. 처음 배우는 리액트인데 댓글 기능을 작업하라는 말에 어디서부터 손을 대야할지 하나도 모르겠었다. 그래서 가장 마음 고생 심했던 애증의 댓글 구현이 되겠다.  앞서 포스팅한 login 기능 구현 처럼 거꾸로 생각하면 좀 더 접근법이 쉬워진다.

---

react 사용한 댓글 기능 구현 완성본

---

위 영상을 보면 알 수 있듯이, 댓글 input창에 글이 써지는 순간 게시버튼은 활성화(색의 변화  & click 가능) 된다.
이 2가지를 모두 리액트를 사용해서 구현해보았다.

---

1 step ) 모든 과정을 거꾸로 생각해보기 !

댓글 기능을 구현하기 전, 우리가 원하는 마지막 완료 단계를 떠올려야한다. 우리가 원하는 마지막 완료 단계는 버튼이 활성화 됨으로 인해 Enter를 누르거나 게시버튼을 클릭하면 댓글이 feed창에 들어갈 수 있도록 구현하는 것이다. 
---------------------------------------------------------------------------------------------------------------
그러기 위해, 가장 우선적으로 해야할 작업은 input창에 변화를 감지할 수 있는 이벤트를 준 후, 이벤트를 감지하면 게시 버튼의 색과 cursor 모양이 변할 수 있도록 SCSS에서 스타일을 바꿔주면 된다. 

2 step ) 버튼 활성화 작업하기 !

① 댓글 인풋 창에 변화를 감지할 수 있는 함수로 onChange함수를 주면 될 것 같다.
왜냐하면 변화가 일어날 때마다, state값이 변해야하기때문에 변화를 빠르게 감지할 수 있는 onChange를 이용한다.
---------------------------------------------------------------------------------------------------------------
const commentChange = (event) => {setCommentValue(event.target.value)}
↘ 댓글창의 input(이벤트가 일어나는 곳)
( ※ setState는 값을 저장해주고 화면에 그려준다 : set을 쓰면 이 2단계를 다 해준다. )     <여기까지가 값이 저장된 상태이다.>
---------------------------------------------------------------------------------------------------------------
②  const btnActive = commentValue.length > 0 일 때 버튼이 활성화되게 조건을 넣어준다.
( 위 조건을 변수로 만든후 if문의 조건으로 넣어준다 ) => 삼항연산으로 구현해주면 간편하다.
ex ) btnActive ? activeClass : dieClass => 댓글 활성화 기능 구현

3 step ) 댓글 올리기 !

commentValue를 계속해서 활용해야한다. 왜냐하면 불필요한 state 만들지 않기 위함이다.
엔터치면 올라가게 form에 submit주는게 좋다 ( form의 onSubmit이벤트 활용 => onSubmit에 넣을 함수를 작성하기! )
---------------------------------------------------------------------------------------------------------------
댓글에 넣어주기 위해서 배열형태의 state가 필요하다. ( JSX에서는 배열을 list형태로 변환시켜줌 =>  반복되는 형태들 배열로
되어있으면 div든 a든 다 저렇게 위에 ul태그 안의 형태로 만들어짐. )
---------------------------------------------------------------------------------------------------------------
※ 댓글이 변화하니까 state를 사용해서 ui를 구현해줌 !!
ex ) const [commentList, setCommentList] = useState([]);
---------------------------------------------------------------------------------------------------------------
( 배열이란 객체는 대부분의 경우에는 const로 정의해주기.)

---

<ul>
   <li>commentValue</li>
   <li>commentValue</li>      //이렇게 들어가게 해주려면 jsx에서는 jsx로된 배열을 만들어주기
   <li>commentValue</li>
   <li>commentValue</li>
</ul>

[<li>commentValue</li>, <li>commentValue</li>, <li>commentValue</li> ...]

// 이 배열을 jsx에서는 위의 ul 태그처럼 만들어줌
// 배열에 넣어주는 이유가 위의 ul 태그 형태를 만들어주기 위함임

---

const putComment = () => { onSubmit이벤트에 {putComment}써주면돼
	//setCommentList([commentValue]); 
    // 이렇게 쓰면 덮어씌우기가 된다 (set함수가 새값을 넣어주기때문에)
	setCommnetList([...commentList, {commetValue}])
    ✔️commentList.map(comment => (
    	return(
        	<li>comment</li>
            )✔️ //이부분은 ul태그에 넣어주기
    )
    //1. commentList의 순서대로 값을 하나씩 가져와서 comment에 넣어준다
    //2. comment에 넣어준 값을 li에 넣어준다 : <li>comment</li>
	//3. 그 값을 새로운 배열에 담아준다 : [<li>comment</li>,<li>comment</li>,...]
}

---

<ul>
    commentList.map(comment => (
      return(<li>comment</li>);
</ul>

//처음엔 commentList가 비어있기 때문에 map에 아무것도 일어나지않음.
//하지만, 값이 하나, 둘 들어가면 생기니까 
//state가 있는애들은 state가 변할때 모두 다 그려준다.