#useRef

forwardRef에 대한 회고

안녕하세요 프론트 지망생입니다!!! 다름이 아니라 useRef에 대해서 공부하다가 forwardRef를 알게되어 공부하다가 제가 느낀 것을 블로그로 정리했는데 이게 맞는지 틀린지에 대한 기준이 없어서 forwardRef를 사용함으로써 얻는 이점이 대한 선배님들의 의견을 구하고자 합니다!! 아무쪼록 많이 까 주시면 감사하겠습니다!!🙂🙂💪 useRef -> https://velog.io/@rlwjd31/useRef forwardRef -> https://velog.io/@rlwjd31/forwardRef%EB%8A%94-%EC%99%9C-%EC%93%B8%EA%B9%8C

Next.js의 dynamic import를 이용한 Ref 전달

현재 next.js 13버전과 toast ui calendar를 사용해서 프로젝트를 진행하고있습니다. toast ui calendar는 서버사이드에서는 렌더링이 되지 않기 때문에 dynamic 함수를 사용해서 import를 했습니다. dynamic 함수를 사용해서 import한 component에 ref를 넘기는 방법이 궁금합니다! https://careerly.co.kr/qnas/2078 위의 질문글을 보고 현재 아래 코드와 같이 작성을했는데 이렇게 작성을 하게된다면 결국 TuiCalendar라는 컴포넌트에는 ref={ref}, forwardRef를 사용해서 넘기는것이 아닌 forwardedRef라는 props로 ref를 넘기는형태가 되는건데 dynamic 함수를 사용해서 받아온 컴포넌트에 ref를 넘기는것은 이방법밖에 없을까요? 또한 "use client" import { useRef } from "react"; import Child from "./child"; export default function Parent (props : any) { const testRef = useRef(3) return ( <> <button onClick={() => console.log(testRef.current)}>버튼</button> <Child testRef={testRef} /> </> ) } 이것과 같이 ref를 그냥 props로 넘기는것과 ref + forwardRef 로넘기는 것의 차이점을 알고싶습니다!

useEffect 가 끊임없이 돌고있어요. dependency 의 늪에서 벗어날 수 있게 도와주세요..! 🥹

안녕하세요. 소켓 통신을 사용한 채팅 기능 구현중인 주니어 개발자입니다. 아래와 같은 상황에 보통 어떻게 대처하시나요? 문제: useEffect 사용 시 서버에 채팅 방 말풍선 목록을 요청(publish)하고, 요청한 데이터를 state 에 저장하는 과정에서 loop 가 생겨 useEffect 가 끊임없이 돌고 있습니다. 문제 설명: - 서버에 채팅 방 말풍선 목록을 요청할 때 넘기는 값 중에 direction 이라는 변수가 있는데요, 이 direction 변수는 채팅 방 말풍선 개수에 의존적입니다. 따라서 useEffect 의 dependency에 채팅 방 말풍선 목록이 들어가게 됩니다. - 서버로부터 데이터를 받은 즉시 채팅방 말풍선 목록을 state에 저장하게 됩니다. - 위 두 상황(useEffect의 deps 설정, setState) 때문에 loop 가 생기게 됩니다. 생각해본 해결 방안: - useRef 를 사용하여 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록이 배열 데이터이기 때문에, 새로운 배열을 만들지 않고 기존 배열을 계속 사용하여 같은 메모리를 사용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. - 말풍선 목록을 링크드리스드 자료구조를 사용하고, 한 번 생성한 자료구조를 새로 만들지 않고 재사용하여 같은 메모리를 이용합니다. 같은 메모리를 사용하고 있기 때문에 useEffect 의 deps 에 등록하지 않아도 최신 데이터를 바라볼 수 있습니다. 위 해결 방안의 문제점: - useEffect 의 deps 에 등록하지 않는 방법은 anti pattern 이라는 느낌을 받습니다. 아마도 위 방법을 사용한 데이터를 사용하는 컴포넌트의 re-rendering 이 되지 않기 때문에 이런 느낌을 받는 것 같습니다. 참고 자료: [react 문서](https://react.dev/learn/removing-effect-dependencies#are-you-reading-some-state-to-calculate-the-next-state)

채팅 새로고침시 연결 끊기는 문제

안녕하세요. 현재 Websocket과 stompjs v6.0.0을 활용해 채팅을 구현했습니다. roomId로 여러 채팅방을 만들 수 있게 구현했고, 현재 새로고침을 하지 않는 이상 잘 돌아갑니다. 그러나, 새로고침 할 시에는 바로 연결이 끊겨 이전의 채팅 내역도 보이지 않고, 연결, 구독 내역이 사라집니다 ... 어떻게 reconnect 해야할까요? 단순히 채팅 페이지에서 useEffect로 connect를 다시 하니 이미 연결 구독이 된 상태라고 뜨더라구요 .... ㅠㅠ (고민글을 올렸을 때 채팅방이 생성되고, 연결 구독이 됩니다. 채팅 시작 버튼을 눌렀을 경우에는 본인이 연결 구독이 되어 1대 1로 상대방과 채팅이 시작되는 구조입니다. ) import { CompatClient, Stomp } from "@stomp/stompjs"; import { createContext, useContext, useMemo, useRef } from "react"; import { useSetRecoilState } from "recoil"; import { messageState } from "../../states/chatting"; import audio from "../../assets/audios/chatting.mp3"; const ChatContext = createContext( {} as { connect: (roomId: number) => void; disconnect: () => void; send: (roomId: number, message: string) => void; }, ); export const useChatContext = () => useContext(ChatContext); export function ChatProvider({ children }: any) { const setMessages = useSetRecoilState(messageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connect = (roomId: number) => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe( `/sub/chat/room/${roomId}`, (message) => onMessageReceived(message, roomId), { token: token!, }, ); }, ); return client; }; const onMessageReceived = (message: any, roomId: number) => { const audioElement = new Audio(audio); audioElement.play(); setMessages((prevMessages) => { const updatedMessages = { ...prevMessages, [roomId]: [...(prevMessages[roomId] || []), JSON.parse(message.body)], }; return updatedMessages; }); }; // 채팅 나가기 const disconnect = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const send = (roomId: number, message: string) => { if (client.current) { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: roomId, message: message, type: "TALK", }), ); } }; const handlers = useMemo(() => ({ connect, disconnect, send }), []); return ( <ChatContext.Provider value={handlers}>{children}</ChatContext.Provider> ); } ----------이 부분은 connect 하는 부분입니다 --------- const { connect } = useChatContext(); const chatRoomId = worryBoard && worryBoard.chatRoomId; const handleStartChatting = () => { navigate(`/chatting`); connect(chatRoomId!!); }; ------------ 채팅 페이지는 따로 있습니다 --------------

채팅 기능 client 가 null 값이 돼요

하나의 페이지에서 connectHandler를 작동하고 또다른 페이지에서 sendHandler를 작동하려고 하는데 이렇게 해서는 useChat()이 리렌더링 되면서 client 값이 초기화가 되더라구요 값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서... connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데 그러면 또 client값이 connect한 값이 아니더라구요 무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ (한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!) import { CompatClient, Stomp } from "@stomp/stompjs"; import { useRef } from "react"; import { useRecoilState } from "recoil"; import { inputMessageState, messageState } from "../../states/chatting"; export function useChat() { const [messages, setMessages] = useRecoilState(messageState); const [inputMessage, setInputMessage] = useRecoilState(inputMessageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connectHandler = () => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, { token: token!, }); }, ); }; const onMessageReceived = (message: any) => { setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]); }; // 채팅 나가기 const disconnectHandler = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const sendHandler = () => { if (client.current && inputMessage.trim() !== "") { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: 1, message: inputMessage, type: "TALK", }), ); setInputMessage(""); } }; return { connectHandler, disconnectHandler, sendHandler, }; }

ios safari Mobile input focus 시 키보드가 올라오지 않습니다.

현재 React + Typescript로 모바일 웹을 개발하고 있습니다. 페이지가 처음으로 렌더링 시 input에 focus를 줘서 키패드가 올라오도록 구현하고 싶습니다. 하지만 ios safari mobile 환경에서 useRef를 사용하여 focus를 주니 focus는 잘 작동하지만 키패드가 올라오지 않고 있습니다. 찾아보니 IOS에서 정책상의 문제로 막아놨다고 합니다만 다른 서비스의 모바일 웹 래퍼런스를 봤을 때 제가 원하는 기능을 작동하는 곳이 몇 곳 있었습니다. 혹시 구현할 수 있는 방법이 있을까요? 시도해봤던 방법으로는 사용자와의 인터렉션을 통해 가능하다고 IOS의 정책에 나와있어서 hidden으로 숨겨놓은 버튼을 하나 추가하여 click event에 focus를 주도록 하고 렌더링 시 클릭 이벤트를 호출해봤었습니다. 아쉽게도 원하는대로 동작은 안했지만.. 도움 주시면 감사하겠습니다.

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}

input form 데이터 땡겨올 때 useRef를 많이 사용하지 않는 이유가 있나요?

회원가입 폼에 input에 useRef로 값 땡겨오면 값이 변할 때 재랜더링이 없어서 좋을 것 같은데 깃헙 다른 분들 코드 보면 거의 Hooks으로 useInput 써서 하는데 무슨 이유로 더 간단한 useRef를 안 쓰고 기존 onChage 형식으로 하는 건가요?

react-hook-form과 React Query를 데이터 조회용도로도 함께 쓰는 것이 과연 효율적일까요?

안녕하세요. 실무에서 react-hook-form과 React Query를 함께 사용하고 있는 FE 개발자입니다. 먼저 제가 알기론 react-hook-form은 CRUD 중, C(생성)와 U(수정)를 위해 쓰는 경우, 폼 제출 시 React Query의 mutate 함수를 호출하게끔 코드를 짜는 것이 일반적인 것으로 알고 있습니다. 이 때에는 분명 validation 처리 등의 작업을 (useState, useRef와 같은 react 내장 hook 대비) 효율적으로 진행할 수 있다는 점을 충분히 이해하고 있어요. 이제 궁금한 점은 데이터를 조회하는 경우입니다. 과연 useState, useRef와 같은 react 내장 hook 대비 react-hook-form을 사용하는 것이 효율적일까요? 예컨대 키워드 검색과 페이지네이션 기능이 들어간 목록에서 데이터를 조회해오는 경우, react 내장 hook + React Query를 사용한 코드와 react-hook-form + React Query를 사용한 코드를 각각 작성해보았습니다. (아래 코드 첨부) 제가 생각한 결과는 아래와 같습니다. 1. 검색어 입력, 페이지네이션 기능 사용간 리렌더링 횟수 기준으로 성능적인 차이가 없습니다. (동일) 2. 조회 요청이므로 입력에 대한 validation 처리 코드가 필요하지 않습니다. (동일) 3. 코드량은 react-hook-form보다 react 내장 hook을 사용한 것이 더 적습니다. (react 내장 hook이 우위) 위 결과를 토대로 저는 아무리 프로젝트에서 react-hook-form을 도입했다고 하더라도 데이터를 조회해오는 상황에서는 react 내장 hook을 사용하는 것이 좀 더 가독성도 좋고 유지보수성도 높을거란 생각이 드는데요. (물론 제가 react-hook-form 코드를 효과적으로 작성하지 못했을 수도 있습니다. 혹시 그렇다면 이 부분도 지적 부탁드려요!) 여러분들의 생각은 어떠신가요?

React에서 document.getElementById 써도 괜찮은가요

리액트를 공부하던중에 문제가 생겼는데요, 요소의 절대위치를 가져와여하는데 useRef를 쓰자니 컴포넌트끼리의 거리가 좀 멉니다. 그래서 recoil을 사용해서 ref를 가져오려하는데 잘안되네요... 구글링을 하던중에 js문법으로 해결한 코드를 발견했는데 간단하게 끝나더라구요... 근데 또 막상 코드를 가져다 쓰려니 나중에 면접에서 useRef냅두고 왜 document.getElementById 썻냐고 물어보면 할말이 없을거같아서 고민됩니다... 어떻게해야할까요? 도와주세요...

typescript에서 useRef.current는 null 체크가 필수인가요?

useRef를 이용해서 focus를 하도록 하고 있는데 typescript에서 오류가 납니다. 아래 코드와 같습니다. 동작은 잘 하는데 코드의 밑줄이 신경쓰입니다.

리액트에서 컴포넌트 직접 접근 후 값 수정하기

안녕하세요! 최근에 리액트를 접해서 연습삼아 리액트로 미니 게임을 만들고 있습니다. 컴포넌트를 클릭하면 해당 컴포넌트의 위치가 랜덤하게 바뀌는 걸 구현 하고 싶은데 방법을 모르겠습니다.(하늘에서 별이 랜덤으로 반짝 반짝 하듯이) useRef를 통해 DOM에 직접 접근 하는 것 까지는 알았는데 값 수정을 못해서요 ㅠㅠ 예를들어 ,바닐라 js에서는 const random = () => Math.floor(Math.random()*99+1) let x =random() let y = random() document.Queryselector().style = “position : absolute; top: “ + x.toString()+”%, left :”+ y.toString()+”%”; 이런 식으로 생각했는데 리액트에서는 어떻게 하면 좋을까요..? 구글링만 하루종일 했는데 해결법을 못 찾아 질문 남깁니다 ..!

useRef를 사용해서 window resize hook을 만들었는데 잘 동작하지 않습니다.

안녕하세요..! window size를 체크해서 mobile여부를 확인하는 커스텀 훅을 만들었습니다. 코드도 아래 첨부합니다. 원하는 대로 동작하지 않네요 크롬 개발자도구로 윈도우 사이즈를 줄여봤는데 useIsMobile의 리턴값이 false입니다. 혹시 뭐가 문제인지 아시는분 답변 부탁드립니다!

useRef를 이용하는 것과 그냥 변수를 정의하는 것의 차이는 무엇인가요?

useRef를 통해 특정 element를 선택할 수도 있지만 값을 넣어 사용하는 경우도 있다고 하는데 그냥 변수로 사용하는 것과 어떤차이가 있나요? 아래 두 코드의 차이점이 궁금합니다. export default function Test () { const a = useRef(0) } export default function Test () { const a = 0 }

react-native의 TextInput에서 입력을 연속되게 하는 방법

react-native에서 To Do List를 만드는 연습을 해보고 있습니다. react-native의 컴포넌트들을 사용하다 보니 어렵네요. 웹에서 사용하는 input태그와 react-native의 TextInput태그도 많이 다른것 같아요. TextInput에서 입력을 완료하고 나서 확인을 누르면 연속되게 할 일을 입력할 수 있도록 바로 TextInput으로 focus를 해주려고 합니다. 그런데 확인을 누르면 input영역을 다시 터치해서 focus를 잡아줘야하네요. useRef를 사용해서 onSubmitEditing에서 ref.current.focus()를 해주어도 소용이 없습니다. 혹시 방법이 있을까요??

캐러셀에서 다중 이미지 로드시 스켈레톤을 보여주는 방법

캐러셀 안에서 이미지 컴포넌트를 map으로 그려주고 있습니다. 이미지 컴포넌트가 로드중일 때 스켈레톤을 보여주고 싶은데 이슈가 있습니다. 이슈: 여러 이미지 컴포넌트를 그릴 때 이미지가 하나라도 로딩중이면 스켈레톤 + 컴포넌트가 동시에 보임 컴포넌트 예시 ex) const imageRef = useRef(null); const isComplete = imageRef.current?.complete; {!isComplete && <Skeleton />} <img alt={alt} src={src} ref={imageRef} /> 위와 같은 코드를 작성했는데 ref값이 세팅되기 전에 isComplete가 undefined인 순간이 있어서 그런 것 같습니다... 그래서 코드를 다음과 같이 수정했는데 스켈레톤이 무한으로 로딩되네요.. {!isComplete ? <Skeleton /> : <img alt={alt} src={src} ref={imageRef} />} 로딩시에 스켈레톤을 보여줄 수 있는 좋은 방법이 있을까요?

useRef의 작동방식이 궁금합니다

useRef를 통해 dom element에 접근하기도 하고, stale closure문제를 해결하는데에도 사용하는데, 실질적으로 어떻게 작동해서 이게 가능한지 궁금합니다.