[React/TS] Slack 클론코딩 3주차, 4주차

이번 포스팅은 Slack 클론코딩 3주차 메뉴와 모달 만들기, 그리고 4주차 DM 보내기를 수강하고 정리하고 싶은 것들을 몇 가지 적어보았다. 4주차가 실습 위주라 정리할게 많지 않았어서.. 그냥 한번에 쓰기로...

 

 

1.

npm 모듈 설치 시 @types/gravatar 이런식으로 typescript 버전도 깔아야하는지 유무 시행착오 없이 미리 아는법 :

https://www.npmjs.com/

npm | Home

npm 공식 사이트에서 모듈 이름 (ex. gravatar) 검색 -> 검색된 해당 모듈 페이지 클릭해서 확인했을 때, DT라고 되어있으면 @types 설치 필요/ TS라고 되어있으면 x

매번 구글링했던 바보같은 나..

 

2.

중첩 라우팅

App에서 사용하는 메인 라우터에는 Workspace만 등록해놓고, Workspace 안에서 라우터를 또 등록할 수 있다.

App.tsx

Workspace/index.tsx

여기서 Workspace는 레이아웃이고, Channel과 DirectMessage는 Workspace 레이아웃의 children props에 들어가있던 컴포넌트인데, 이런식으로 중첩 라우팅을 통해서 구성해줄 수도 있다. 이때 유의점은 주소 구조가(path 부분) 계층적이어야 한다는 것 기억하자!

 

3.

props 타입 지정해주는 법

: interface로 props의 타입을 지정

 

4.

stopPropagation()

const stopPropagation = useCallback((e) => {
    e.stopPropagation();
  }, []);

  return (
    <CreateMenu onClick={onCloseModal}>
      <div style={style} onClick={stopPropagation}>
        menu
      </div>
      {children}
    </CreateMenu>
  );

모달창 구현 시 나 자신을 클릭했을 때는 안닫히는데 부모를 클릭하면 창이 닫히게 하고 싶을 때, 나 자신 태그에 stopPropagation을 걸어주면 이벤트 버블링에 의해 클릭 이벤트(onCloseModal)가 부모 태그까지 전달되는 것을 방지할 수 있다.

 

5.

trim()

문자열 공백을 제거할 때 사용

 

6.

autosize 라이브러리

useEffect(() => {
    if (textareaRef.current) {
      autosize(textareaRef.current);	// textarea의 사이즈를 자동으로 늘려준다
    }
  }, []);

textarea 쓸 때 사용해보면 좋을 듯

 

7.

react-tostify 라이브러리

토스트 알림창 띄워주는 라이브러리

 

8.

react-mention 라이브러리

사람 언급할 수 있게 하는 기능

 

 

 

 

---

나중엔 리액트에서 써먹기 좋은/ 많이들 쓰는 라이브러리들에 대해서도 따로 포스팅 해볼까 한다.

일단은 허접하니까 제꺼 보지 마새요 (그럴 일 원래도 없었다구요? 죄송ㅎ  맞긴해