instagram 댓글 기능 구현

이번주 내내 React를 했다.

React가 무엇인지, 왜 사용해야하는지, CRA, Component, JSX, Sass, Router를 배우고 

마지막으로 리액트의 가장 핵심인 State, Props를 배웠다.

 

이번에는 js로 구현했던 댓글 추가 기능을 React로 구현해보는 미션이었는데 정말 어려웠다..

하지만 절대 포기하지 않지!! 어려웠지만 결국은 구현해냈다.

다시한번 정리해보며 내것으로 만들어보려고한다!

댓글 기능 추가하기

- 사용자가 댓글 입력 후 enter 를 누르거나 버튼 클릭 시 댓글이 추가되도록 구현해주세요.

- 댓글 기능을 구현하기 위해서는 배열 데이터 타입 활용해야 합니다.

- 댓글 하나를 컴포넌트화 시키고 필요한 데이터는 props로 넘긴 다음 부모의 state에 저장된 댓글 데이터에 Array.map() 메소드를 적용해 댓글의 개수만큼 댓글 컴포넌트가 나타나게 해주세요. 

 

이 두 블로그가 많은 도움이 됐다. 🥹 

https://hymndev.tistory.com/57

React 댓글기능 구현하기

https://velog.io/@hanei100/Westagram-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EB%8C%93%EA%B8%80-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84

[Westagram] 리액트로 댓글 기능 구현

---

1. 컴포넌트화 시키기

나의 feeds는 MainFeed와 mainFeedComment로 구분되어 있다.

mainFeedComment에서 댓글을 입력하면 MainFeed에서 댓글이 추가되니

일단

MainFeed를 컴포넌트화 시켜주었다.

그리고 이렇게 컴포넌트화 시켜주어야 코드를 깔끔하게 볼 수 있다.

Main.js에서 컴포넌트화 시켜준 모습

---

2. Main.js -  State, Props로 Event, 배열 데이터 타입 활용

value값 받기

let [value, setValue] = useState('');
let [comment, setComment] = useState([]);

const getInputValue = e => {
    setValue(e.target.value);
};

댓글을 입력하는 input에 onChange이벤트를 줘서 e.target.value로 값을 받아오게 했다.

받아온 값을 getInputValue 함수에서 State변경함수인 setValue로 value값을 계속 업데이트 해줬다.

이 작업이 필요한 이유는 입력되는 input value를 comment라는 []배열에 하나씩 담아줘야 하기 때문이다.

배열에 input value 넣어주기

const addComment = e => {
    e.preventDefault();
    const copyComment = [...comment];
    copyComment.push(value); //value = e.target.value
    // console.log(copyComment); //copyComment = [value, value, value]
    setComment(copyComment);
    // console.log(comment); // comment = [value, value, value]
    setValue(''); //input value초기화 해주는 것
  };

addComment는 onSunmit이벤트이므로 엔터치거나 게시버튼을 눌렀을 때 자동 새로고침 된다.

그래서 e.preventDefault()로 새로고침을 막아줬다.

이후 copyComment 변수를 만들어 빈 배열인 comment를 깊은 복사 해줬다.

[...comment]는 comment를 깊은 복사하겠다는 뜻이다.

설명해보자면 배열과 객체는 주소값 개념이 있다.

주소값이 바뀌어야 배열과 객체가 변화가 있다고 할 수 있는데 state는 변화가 있어야 재렌더링을 해준다. 

만약에 const copyComment = comment를 했다면 

기존 state랑 달라지지 않았다고 생각해서 재렌더링을 해주지 않는다.

즉, [...comment]를 하면 주소값을 새로 바꿔주세요라는 뜻으로

완전 새로운 주소값을 가지게 되어 state를 이용할 수 있게 된다.

 3. MainFeed.js - props로 자식요소에 state 전달해주기

위의 과정으로 만들어진 comment 배열을 

<MainFeed comment={comment} />

이렇게 MainFeed 컴포넌트로 전달해줄 수 있다.

이것이 props이다.

MainFeed에서 댓글이 달리는 YourComment를 컴포넌트화 시켜주었다.

comment배열과 map을 이용하여 입력할 때마다 댓글이 추가되는 기능을 구현할 수 있게 되었다.

---

느낀점

처음에 이걸 내가 어떻게 구현하나..하고 너무너무 막막했다.

아직 props도 state도 잘 모르는데 내가 이 개념을 이용하여 구현해야한다니.. 감이 잡히질 않았다.

하지만 하다보니 props, state 개념을 확실히 이해하게 됐고

나에게는 구글과 동기, 멘토님이 계시니 못해낼 것이 없었다.

 

앞으로도 이렇게 막막할 상황이 많을텐데 

이겨내어 다 해내는 개발자가 되고싶다. 👩🏻‍💻💖