[React] 게시글 구현하기, 댓글 구현하기, 이미지 구현하기

이 글은 인프런 제로초님의 '[리뉴얼] React로 NodeBird SNS 만들기' 를 바탕으로 정리한 내용입니다.

게시글 구현하기

배열 안에 jsx를 넣어줄 때는 항상 키를 붙여줘야 한다.

<Card
  cover={post.Images[0] && <PostImages images={post.Images} />}  
    actions={[
        <RetweetOutlined key="retweet"/>,
        <HeartOutlined key="heart" />,
        <MessageOutlined key="comment" />,
        <Popover key="more">
            <EllipsisOutlined/>
        </Popover>,
  ]}
>

Popover 는 더보기처럼 여러 … 이 뜬다.

PropTypes

post 관련 에러가 발생했는데, 이는 proptypes를 지정해주지 않았기 때문이다.

PostCard.propTypes = {
    post: PropTypes.object.isRequired
}

object 를 더 자세하게 적을 수도 있다. shape 를 이용.

PostCard.propTypes = {
    post: PropTypes.shape({
        id: PropTypes.number,
        User: PropTypes.object,
    }).isRequired,
}

옵셔널 체인지 연산자

const id = me?.id;

ture -> false / fasle -> true

true를 false 로 만드는 것은 이것을 이용하면 된다. 반대도 가능하다.

const onToggleLike = useCallback(() => {
      setLiked((prev) => !prev)
  },[])

Q&A

Q. 컴포넌트에 데이터를 전달할때 어떨떄 useSelector를 사용하고 props를 사용하는지 궁금합니다.
→ 이게 컴포넌트를 재사용하다보면 리덕스에서 각각 다른 데이터를 전달해줘야할 때도 있다. 그럴 때는 props를 쓴다.

Q. 각각 다른 데이터를 전달해줘야한다는 때가 어떤 상황일까요?
→ 어떤 PostCard는 리트윗을 보여주고, 어떤 PostCard는 일반 게시글을 보여줘야하는데 PostCard가 내부에서 useSelector를 통해 고정된 데이터를 가져오면 자유도가 떨어진다. 그럴 때 props로 부모로부터 각기 다른 데이터를 받아오는 것이다.

댓글 구현하기

 <CommentForm post={post}/>

게시글의 아이디를 알아야 하기 때문에 post 정보를 props로 넘겨준다.

폼을 만드는 게 생각보다 지겨운 일이다. 지금은 수작업으로 하고 있지만, 좋은 폼 라이브러리 사용하는 것을 추천한다. react-form, redux-form 등등이 있다.

const [commentText, setCommentText] = useInput('');

만들었던 커스텀 훅을 통해 같은 작업을 줄일 수 있다. (useState, useCallback 의 조합) 무언가 반복이 된다면 어떻게든 줄이는 방법을 연구해보는 것이 좋다.

export 관련 에러

컴포넌트를 만든 후 export를 꼭 해줘야 한다.

이미지 구현하기

 <img src={images[0].src} alt={images[0].src} onClick={onZoom}/>

alt 를 꼭 넣어주자. 시각장애인들을 위해. SNS을 안하고, 흥미를 느끼지 않는 이유라고도 함.
페이스북은 AI를 통해 alt를 넣어주는 기능을 구현하기도 하였음.

 <img role="presentation" src={images[0].src} alt={images[0].src} onClick={onZoom}/>

role="presentation 를 넣어주면 클릭할 순 있지만, 굳이 클릭할 필요가 없다는 의미이다. 시각장애인들을 위해서이다.

여러분만의 기능을 넣어봐라. 한번 따라 쳐보는 것은 부족하다. 모든 컴포넌트에 기능 하나씩은 넣어보자.