데브코스 12주차 Day5 - [mini diary] 조건문, 반복문 in react

조건문

리액트의 html영역 안에서는 if ~else문을 사용할 수 없다.

삼항연산자의 사용은 가능하다.

{post.detail === true ? <Detail post={post}></Detail> : null}

 

반복문

리액트에서 jsx안에서는 for문을 사용할 수 없다.

map을 사용하면 된다.

            {post.map((post, idx) => {
              return (
                <div className="post" key={idx}>
                  <div className="post-head">
                    <div className="post-left">
                      <p>{post.date}</p>
                      <div>
                        <span
                          className="post-title"
                          onClick={() => {
                            handleDetail(idx);
                          }}
                        >
                          {post.title}{" "}
                        </span>
                        <span
                          onClick={() => {
                            handleLike(idx);
                          }}
                        >
                          👍
                        </span>
                        {post.like}
                      </div>
                    </div>
                    <div className="post-right">
                      <button
                        className="delButton"
                        onClick={() => {
                          handleDelete(idx);
                        }}
                      >
                        삭제
                      </button>
                    </div>
                  </div>

                  {post.detail === true ? <Detail post={post}></Detail> : null}
                </div>
              );
            })}

 

post 배열에 데이터 추가하기

const handleSubmit = (title: string, content: string): void => {
    let today = new Date();
    let todayDate = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
    let newPost: Post = {
      id: post[post.length - 1].id + 1,
      title: title,
      content: content,
      date: todayDate,
      like: 0,
      detail: false,
    };
    setPost((prev) => [...prev, newPost]);
    setInputTitle("");
    setInputContent("");
  };

 

=> 입력된 title, content와 오늘 날짜를 가공하여 배열에 추가한다.

 

 

post 배열에서 삭제하기 - splice

splice (start, deleteCount, item1, item2 ... ) //(삭제시작할 index, 삭제할 개수, 추가할 요소)

 

splice(0,1) => 첫번째 게시물 삭제

splice(1,1) => 두번째 게시물 삭제

splice(2,1) => 세번째 게시물 삭제

 

  const handleDelete = (idx: number) => {
    let cpPost = [...post];
    cpPost.splice(idx, 1);
    setPost(cpPost);
  };

 

=> 선택된 idx를 가진 post를 삭제한다.

기능 구현

1. post 추가

2. post 삭제

3. post 조회 

4. 좋아요 기능