리액트 슬랙 클론코딩 #4

배운 것 :

// <navLink> 태그는 activeClassName 이라는 태그를 달 수 있다.
// 지금 주소랑 링크의 주소가 같으면 해당 클래스가 적용된다.
// 위에 gif처럼 현재 페이지가 현재 주소와 같을 때 하이라이트를 준다던지 등 그럴때 편하다
            return (
              <NavLink key={member.id} activeClassName="selected" to={`/workspace/${workspace}/dm/${member.id}`}>
...(생략)...
              </NavLink>
            );

SWR 을 이용하면 Props로 값을 전달할 필요가 없다

Props 사용예제 :

const ChannelList: FC<Props> = ({userData, channelData}) => {
...(생략)

SWR 사용예제 :

const ChannelList: FC = () => {
  const { data: userData, error, mutate } = useSWR<IUser>('http://localhost:3095/api/users', fetcher, {
    dedupingInterval: 2000, // 2초
  });

autosize

autosize 는 위의 gif 처럼 shift+enter 로 칸이 늘어나면 자동으로 텍스트 칸도 늘어나는 textbox를 만들 수 있다.

설치방법 :
cmd에 두 명령어를 실행한다.
이때 autosize는 타입스크립트를 지원하지 않으므로 npm i --save-dev @types/autosize 를 실행해 준다.

npm i autosize
npm i --save-dev @types/autosize

아래 코드는 채팅 박스에 autosize를 적용한 코드이다.

ChatBox/index.tsx

import { ChatArea, Form, MentionsTextarea, SendButton, Toolbox } from "./styles";
import React,{useCallback, useEffect, useRef, VFC } from "react";
import autosize from 'autosize';

interface Props{
    chat:string;
    onSubmitForm:(e:any) => void;
    onChangeChat:(e:any) => void;
    placeholder?:string
}

const ChatBox:VFC<Props> =({chat,onSubmitForm,onChangeChat,placeholder}) =>{
    // state 를 관리하는 게 아니라 태그에 직접 접근하고 싶을 때 ref 를 쓴다
    const textareaRef=useRef<HTMLTextAreaElement>(null)
    useEffect(()=>{
        if(textareaRef.current){
            autosize(textareaRef.current);
        }
    },[])
    const onKeydownChat = useCallback((e)=>{
        if(e.key==='Enter'){
            if(!e.shiftKey){
                e.preventDefault();
                onSubmitForm(e);
            }
        }
    },[])
    return(
        <ChatArea>
            <Form onSubmit={onSubmitForm}>
                <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyDown={onKeydownChat} placeholder={placeholder} ref={textareaRef}/>
                <Toolbox>
                    <SendButton
                        className={
                            'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' +
                            (chat?.trim() ? '' : ' c-texty_input__button--disabled')
                        }
                        data-qa="texty_send_button"
                        aria-label="Send message"
                        data-sk="tooltip_parent"
                        type="submit"
                        disabled={!chat?.trim()}
                    >
                        <i className="c-icon c-icon--paperplane-filled" aria-hieen="true"/>
                    </SendButton>
                </Toolbox>
            </Form>
        </ChatArea>
    )
}

export default ChatBox