[멋사12기] 리액트(react) | 5주차 세션 및 과제 제출

 

5주차 세션

 

 

5주차 세션에서는 지난 주에 이어서 리액트 실습이 진행되었다.

지난주에는 기본적인 state활용, 컴포넌트 활용에 대해 실습했다면,

이번주에는 state와 컴포넌트, props를 이용해서 글쓰기 페이지를 만들어보는 실습이 진행됐다.

 

 

먼저 글을 작성할 수 있는 페이지를 만들어주었고,

useState와 onChange 속성을 이용해 사용자가 입력하는 값에 대한 상태관리를 하고,

입력값을 props를 통해 글을 보여주는 컴포넌트로 전달하면서 사용자가 작성한 글을 확인할 수 있도록 구현했다.

 

 

물론 데이터베이스에 저장되어 있지 않아 새로고침하면 작성한 글이 사라지기는 하지만,

다른 컴포넌트에서 입력한 값을 props로 또 다른 컴포넌트로 전달해 화면에 표시할 수 있다는 것을 학습했다.

 

또한,

글을 작성한만큼 좋아요 기능도 추가해 좋아요 수 변화, 하트 상태 변화를 구현했다.

 

 

이번 세션에서 진행된 실습은 좋아요 기능을 넣는 것까지였으나,

댓글 창을 구현한만큼 댓글 기능도 추가해보고 싶어서 따로 댓글 추가 기능을 실습해봤다.

 

 

먼저 댓글 input값은 글을 작성할 때와 마찬가지로 useState와 onChange를 이용해 상태를 관리해주었고,

댓글을 계속해서 추가할 수 있도록 배열로 이전 값들까지 함께 저장할 수 있는 상태관리 변수를 만들어주었다.

 

따라서 댓글의 input값이 비어있지 않다면 입력된 모든 댓글이 배열에 저장되고,

map메서드를 통해 저장된 댓글이 하나씩 표시되도록 코드를 작성해주었다.

 

const handleComments = () => {

        if (commentTxt.length > 0) {

            setComment((prev) => [...prev, commentTxt]);

            setCommentTxt('');

        }

    }

 

 

댓글 수의 변화는 저장된 댓글 배열의 길이를 적어줌으로써 간단하게 표현할 수 있었다.

 

 

완성된 결과물은 다음과 같다.

글 작성하기 실습

 

 

728x90

---

 

5주차 세션 과제는 지난번에 만들었던 todolist를 배포하는 것이었다.

 

배포는 netlify를 이용해 진행했으며,

배포된 todolist url은 아래에 있다.

 

https://likelion-to-do-list.netlify.app/

To-do-list

 

 

5주차 세션에서 진행된 실습 전체 코드는 깃허브에서 확인 가능하다.

 

https://github.com/BB545/likelion/tree/main/05_session