리액트 슬랙 클론코딩 #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
Author And Source
이 문제에 관하여(리액트 슬랙 클론코딩 #4), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hw020123/리액트-슬랙-클론코딩-4저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)