React

자바스크립트 map 함수 사용

React에서는 for문을 사용할 수 없기에 map함수를 이용하여, 반복을 처리한다

{
	post.map((a, i) => {
    	return (
         	<div
                className="post"
                onClick={() => {
                  handleDetailClick();
                }}
            >
             	<h3>
                  {post[i].title}
                  <span onClick={() => addLike(i)}>💗</span>
                  {like[i]}
                </h3>
                <p>{post[i].date}</p>
              </div>
            );
          }
	)
}

다음과 같이 map을 통해 반복을 처리할 수 있다.

이벤트 버블링

부모 컴포넌트와 자식 컴포넌트 동시에 이벤트를 발생시키는 상황이 왔을 때, 부모 이벤트는 방지시키는 것을 말한다.
stopPropagation() 메소드를 사용하면 된다.

props

• 리액트에서 다른 컴포넌트 끼리 데이터를 전달할 때 사용한다.
• 부모 컴포넌트에서 자식 컴포넌트로만 데이터를 전달할 수 있다.

Splice로 게시글 삭제

arr.splice(i,1)를 이용하면 배열의 i번째 요소를 제거할 수 있다.

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

원래 게시글을 담는 배열을 깊은복사로 복사해놓고 setState를 이용해 제거한 배열을 다시 넣어주는 코드이다.