Hooks/StyleComponent 사용하기

2차 프로젝트에서는 클래스형이 아닌 함수형 컴포넌트를 사용하게 되어 state 를 관리하기 위해 Hooks 를 사용해 보았다.
아직 헷갈리긴 하지만 class 형의 state 보다 덜 복잡한 것 같다.
CSS 도 sass 가 아닌 style component 를 사용해서 작업한다.

TextArea

  //TextArea 글자 수에 따라 입력창이 늘어나는 함수
  const Resizing = (e) => {
    e.style.height = "auto";
    e.style.height = e.scrollHeight + "px";
  };

                <Description
                  type="text"
                  placeholder="사람들에게 회원님의 핀에 대해 설명해보세요"
                  maxlength="500"
                  rows="1"
                  onKeyDown={(e) => Resizing(e.target)}
                />

StyleComponent withComponent 사용해보기

const Description = styled.textarea`
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(142, 142, 142, 0.5);
  white-space: pre-wrap;
  font-size: 18px;
  color: #dadada;
  outline: 0px none transparent;
  overflow: auto;
  resize: none;
  padding: 10px;
  &:focus {
    border-bottom: 1.5px solid rgb(0, 116, 232);
  }
`;

const AddLink = styled(Description.withComponent("textarea"))`
  position: absolute;
  bottom: 7%;
`;

클릭에 따라 선택한 관심사 추가/삭제하기

  const handleClick = (id) => {
    if (followingList.some((el) => el === id)) {
      let index = followingList.indexOf(id);
      followingList.splice(index, 1);
      setFollowingList(followingList);
    } else {
      setFollowingList(followingList.concat(id));
    }
  };

 <TopicBoxes>
        {datas &&
          datas.map((data) => (
            <SelectedContent key={data.id}>
              <ImageBoxWrap>
                <ImageBox>
                  <ImageWrap styles={data.style} />
                </ImageBox>
                <Title>{data.name}</Title>
                <Follow onClick={() => handleClick(data.id)}>
                  <div>
                  //팔로잉 상태를 나타내는 div 
                    {followingList.includes(data.id) ? "팔로우" : "팔로잉"}
                  </div>
                </Follow>
              </ImageBoxWrap>
            </SelectedContent>
          ))}
      </TopicBoxes>