Slack 클론코딩 3-4주차

인프런 Slack 클론 코딩

섹션 2~3 메뉴와 모달 만들기, DM 보내기를 수강했다.

---

📚배운 점

1. Input은 컴포넌트 분리

어찌 생각하면 기본이다.
그렇지만 우리는 기본을 자주 잊곤 한다.
규모가 큰 컴포넌트에서는 input을 분리시켜 글자 입력마다 리렌더링이 일어나지 않도록 조심하자.

2. react-toastify

쉽게 예쁜 알림창을 구현해주는 라이브러리.
상세한 내용은 따로 작성해보도록 하고, 간단한 사용법만 정리해보자면

yarn add react-toastify

import {ToastContainer, toast} from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

const notify = () => toast('toastify test');

// ...

return(
	<div>
      <button onClick={notify}>
        알림 노출
      </button>
  	  <ToastContainer />
    </div>
)

이런 식으로 사용해주면 알림이 잘 뜨게 된다.
프로젝트에 적용해봐야지..

3. autosize 라이브러리

textarea의 사이즈를 자동으로 늘려주는 라이브러리.
기존에 textarea에 글을 많이 입력하게 되면 사이즈가 아닌 스크롤로 늘어나게 된다.

사용방법

yarn add autosize

타입스크립트라면

yarn add @types/autosize

까지!

import autosize from "autosize";


const ref = useRef<HTMLTextAreaElement>(null);

useEffect(() => {
  if (ref) {
    autosize(ref.current as HTMLTextAreaElement);
  }
}, []);

// ...

return(
  <textarea
    ref={ref}
    value={text}
    onChange={onChangeTextarea}
    placeholder={"내용을 입력해주세요."}
  />
);

이런 식으로 사용하면 된다!
textarea도 나름 자주 쓰는 태그인데, 유용하게 잘 써먹을 듯 하다.

💎느낀 점

강의 중 크게 공감했던 말이 있다.
스타일드 컴포넌트 / 혹은 emotion으로 태그를 만들다보면 이름이 뭐 Section부터 시작해서 Wrapper Container Zone 등등 중구난방으로 다양해진다고...
아직까지 공식적인 분류는 없더라도 나만의 규칙을 어느정도 만들어놔야겠다고 생각하게 되었다.
(ex. 한 페이지의 제일 큰 부분은 컨테이너, Contents를 담고 있는 작은 부분에 Section 이런 식으로...)