[React 강의] Slack 클론 코딩[실시간 채팅 with React] 섹션4

강경서·2025년 9월 14일

📫 섹션 4. DM 보내기

NavLink

import { NavLink } from 'react-router';

<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>

react-router의 NavLink 는 Link 를 확장한 컴포넌트로 active, pending 상태에 따라 자동으로 스타일을 적용할 수 있습니다.

active 상태는 링크의 to 경로가 현재 URL과 일치할 때 활성화되며, className style children prop에서 상태 기반 렌더링이 가능합니다.

pending 상태는 react-router 의 Data Router 모드에서 사용 가능하며 현재 페이지는 그대로 보여주면서 백그라운드에서 다음 페이지 데이터를 로딩 중일 때 활성화됩니다.

SWR vs props

 // Props

const ChannelList = (channels) = {
	return (
  		<div>
    		{channels.map(channel => <EachChannel channel={channel} />}
    	</div>
  	)  
} 

// SWR

const ChannelList = () = {
  	 const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher);
  
	return (
  		<div>
    		{channelData.map(channel => <EachChannel channel={channel} />}
    	</div>
  	)  
}

props 로 자식 컴포넌트에게 데이터를 전달하는 것과 달리 SWR 을 사용하면 직접 데이터를 fetch 하므로 부모 컴포넌트의 리렌더링의 영향이 없으며, 부모 컴포넌트에서 데이터 및 상태가 바뀌어도 React.memo 를 사용하면 자식 컴포넌트는 리렌더링 되지 않아 성능 최적화가 가능합니다.

autosize

npm install autosize

function AutoTextarea() {
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current) {
      autosize(textareaRef.current);
    }

    return () => {
      if (textareaRef.current) {
        autosize.destroy(textareaRef.current); 
      }
    };
  }, []);

  return (
    <textarea
      ref={textareaRef}
    />
  );
}

autosize 는 텍스트 영역의 높이를 텍스트에 맞게 자동으로 조절하는 라이브러리입니다.

keydown

const ChatBox = (onSubmitForm) => {

  const onKeydownChat = useCallback(
    (evevt: any) => {
      if (evevt.key === 'Enter') {
        if (!evevt.shiftKey) {
          evevt.preventDefault();
          onSubmitForm(evevt);
        }
      }
    },
    [onSubmitForm],
  );

  return (
    <ChatArea>
      <Form onSubmit={onSubmitForm}>
        <Textarea
          onKeyDown={onKeydownChat}
        />
      </Form>
  );
};

onKeyDown 이벤트는 React 에서 키보드 입력을 감지할 때 사용하는 키 이벤트 핸들러입니다.
event.key 를 통해 눌린 키의 이름을 알 수 있고, evnet.code 를 통해서는 물리적인 키의 코드를 알 수 있습니다. 또한
event.shiftKey event.ctrlKey event.metaKey 를 통해서 해당 키의 눌림 여부가 가능합니다.