🤓 리액트 옵셔널 체이닝 연산자, useSelector, useCallback, 조건부 렌더링 (토글 기능 Toggle)

인프런 제로초님의 NodeBrid 강의 듣고 공부한 내용입니다.

🌼 reducer를 useSelector를 통해 불러오기.

const PostCard = ({ post }) => {
  //있나없나 의문일때 ?. 를 사용 (?. = 신상문법)
  const id = useSelector((state) => state.user.me?.id);

props에 post라는 데이터가 들어있다. 이 데이터를 사용하려면 상단에는 import PropTypes from "prop-types"; 를 불러오고 맨 하단에는

PostCard.propTypes = {
  post: PropTypes.shape({
    id: PropTypes.number,
    User: PropTypes.object,
    content: PropTypes.string,
    createdAt: PropTypes.object,
    Comments: PropTypes.arrayOf(PropTypes.any),
    Images: PropTypes.arrayOf(PropTypes.any),
  }),
};

🌼 옵셔널 체이닝 연산자

  const id = useSelector((state) => state.user.me?.id);

useSelector는 import { useSelector } from "react-redux"; 이렇게 불러오고 이는 리액트 리덕스가 제공한다.

여기서 쓰인 ?. 는 이번에 새로생긴 문법으로 무슨뜻을 의미하냐면, me.id가 있으면 id가 들어가고 없으면 undefined로 바꿔주는 옵셔널 체이닝 연산자다. 이게 없었더라면

  const id = useSelector((state) => state.user.me && state.user.me.id);

이렇게 && 연산자를 사용해서 코드량이 길어지게 하는 방법도 있다.ㅎ 있나 없나 의심되는 부분에는 옵셔널 체이닝을 사용하면 좀 더 편하게 쓸 수 있음!

🌼 toggle 기능을 동작 (useState와 useCallback)

toggle 기능을 구현해보고 싶을 때는, useState로 현재 상태와 바뀔 상태를 지정해 줘야한다. (상단에 임폴트 시켜주는 거 잊지말기) 그리고 첫 상태는 토글기능을 넣기 전의 상태로 보여야되기 때문에 false로 해줬다. 토글 할 시 어떻게 변화를 줄 것인지에 대한 것은 useCallback을 사용하면 된다.

 const [liked, setLiked] = useState(false);
  const [commentFormOpened, setCommentFormOpened] = useState(false);

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

  const onToggleComment = useCallback(() => {
    setCommentFormOpened((prev) => !prev);
  }, []);

🌟 toggle 할 때, 바뀐 상태를 useCallback 통해 표현해 준다. 이때 조건은 토글기능이니 on,off를 구현해 줘야되기 때문에 false는 true로 true는 false로 만들어 주려면 위 코드처럼 prev를 사용해주면 된다. 🌟

🌼 조건식 렌더링

return (
    <div>
      <Card
        style={{ marginBottom: "20px" }}
        cover={post.Images[0] && <PostImages images={post.Images} />}
        actions={[
          <RetweetOutlined key="retweet" />,
          liked ? (
            <HeartTwoTone
              twoToneColor="#eb2f96"
              key="heart"
              onClick={onToggleLike}
            />
          ) : (
            <HeartOutlined key="heart" onClick={onToggleLike} />
          ),
          <MessageOutlined key="message" onClick={onToggleComment} />,
          <Popover
            key="ellipsis"
            content={
              <Button.Group>
                {id && post.User.id === id ? (
                  <>
                    <Button>수정</Button>
                    <Button type="denger">삭제</Button>
                  </>
                ) : (
                  <Button>신고</Button>
                )}
              </Button.Group>
            }
          >
            <EllipsisOutlined />
          </Popover>,
        ]}
      >
        {/* 게시글 */}
        <Card.Meta
          avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
          title={post.User.nickname}
          description={post.content}
        />
      </Card>

조건 1. 버튼 눌렀을 때 조건식 달기

<Card
        style={{ marginBottom: "20px" }}
        cover={post.Images[0] && <PostImages images={post.Images} />}
        actions={[
          <RetweetOutlined key="retweet" />,
          liked ? (
            <HeartTwoTone
              twoToneColor="#eb2f96"
              key="heart"
              onClick={onToggleLike}
            />
          ) : (
            <HeartOutlined key="heart" onClick={onToggleLike} />
          ),
          <MessageOutlined key="message" onClick={onToggleComment} />,

내용물을 감싸고 있는 컴포넌트에 cover는 post 안에 이미지가 있는 경우, PostImages라는 컴포넌트를 가져오기. 버튼은 총 4개를 넣을 것인데 actions 안에다가 여러개니까 배열로 넣어주면 된다. 먼저 [리트윗버튼, 하트버튼, 메시지버튼,popover] 이렇게 하였다. (Popover는 밑에 있음) 그리고 배열은 꼭 key값을 넣어줘야 한다. 잊지말고 고유의 값으로 넣어주기.

하트 버튼과 메시지 버튼은 토글 기능을 넣어줘야 되는데, 하트를 눌렀을 때 투톤컬러가 변경되게 컴포넌트 안에 스타일 적용해주고 아닐 시에는 그냥 하트 아웃라인만 보여지게 ! 하트, 메시지 버튼은 같은 onToggleLike 이벤트를 사용했다.

조건 2. 내가 작성한 글이면 수정과 삭제버튼이 보이게 내가 작성한 글이 아니면 신고버튼만 보이도록.

	<Popover
          key="ellipsis"
          content={
            <Button.Group>
              {id && post.User.id === id ? (
                <>
                  <Button>수정</Button>
                  <Button type="denger">삭제</Button>
                </>
              ) : (
                <Button>신고</Button>
              )}
            </Button.Group>
          }
        >
          <EllipsisOutlined />
        </Popover>,

opover이라는 컴포넌트는 마우스를 올려놨을 때 팝업창이 뜨는 컴포넌트다. 이 컴포넌트에 content로는 antd에서 제공해주는 <Button.Group>컴포넌트를 사용했는데 조건은 id가 있고 내 아이디랑 게시글 작성자의 아이디가 같으면 마우스를 버튼위에 올려놨을 때 수정과 삭제버튼이 보여지도록, 그게 아니라면 신고버튼만 보이도록 조건식 렌더링을 설정한 것이다.

조건식을 사용해줄 때는 { } 중괄호 안에다가 js 처럼 설정해주고, 하나의 객체들은 ( ) 소괄호로 묶어서 표현해준다. 그리고 삼항 연산자를 써서 맞으면 (?) 수정삭제, 그게 아니라면 (:) 신고버튼 보이게 완료.

아바타의 닉네임 첫글자 배열로 지정하기

<Card.Meta
          avatar={<Avatar>{post.User.nickname[0]}</Avatar>}
          title={post.User.nickname}
          description={post.content}
        />

게시글 내용물은 avatar에 컴포넌트를 넣고 post에 User 닉네임의 첫글자만 따서 보여지게끔 했다.