728x90 반응형 react7 [React] 22.07.20 회고록 채팅을 보낼 때 엔터키 이벤트를 받아보자 채팅창 입력창에 글을 쓰고 마우스로 보내기 버튼을 누르는 것이 아니라 엔터키를 눌러서 메세지를 보내고 싶다!! const handleKeyPress = (event: React.KeyboardEvent) => { if (event.key === "Enter") { btnSend(); } }; 이벤트를 받아서 키가 엔터인지 판별해서 엔터일 경우 마우스로 보내기를 눌렀을 때 동작하는 btnSend 함수를 호출해주었다. html, css에서는 이렇게 넣어주면 된다. onChangeFunc(event, setEmitMessage)} className="w-[85%] border-main border-2 rounded px-2 py-1 text-sm font-main" o.. 2022. 7. 20. [React] 22.07.19 회고록 socket.on의 위치를 잘 설정하자 강제 퇴장 기능을 구현하는 과정에서 강제 퇴장 버튼이 있는 컴포넌트에서 emit을 보냈다. 그리고 아무생각 없이 똑같은 위치에서 socket.on으로 백에서 보내는 데이터를 받았더니 팝업을 켰을때만 강퇴가 되는 현상이 발생해서 상위 컴포넌트로 올라가서 socket.on을 하는 것으로 바꾸었더니 잘 되었다. Component 재사용 이거는 정확하게 알지 못해서 이게 문제인지는 정확하게 모르겠다. 컴포넌트를 재사용하면서 소켓통신이 이루어질 때마다 다른 유저의 행동이 나의 행동에 영향을 미치는 것 같다. 똑같은 유저리스트 박스를 다른 페이지에서 각각 사용하고 있는데 이거때문인 것 같다.. 아닌가.. 아무튼 지금은 이놈이 문제일거라고 생각중이다... 내일 컴포넌트 리팩토링.. 2022. 7. 19. [React] 22.07.15 회고록 event에 함수를 2개이상 사용하는 방법 이벤트에서 함수를 2개이상 사용하는 방법은 알고 있었다. ... onClick={() => { func1(); func2(); }} 이렇게 사용하면 함수를 2개이상 사용할 수 있다. 하지만 여태 사용하지 못했던 것은 props로 받아온 함수를 포함해서 2개 이상 사용하는 방법을 몰라서였다. props로 onClick 함수를 받아올 경우 onClick; onClick(); 둘다 작동을 하지 않았었다. 그런데 오늘 유심히 에러메세지를 보니 onClick();을 했을경우 argument 하나를 요구하고 있었다. 그래서 혹시나 하는 마음에 event를 넣어봤더니 잘 작동하였다. 의외로 아주 간단한 문제였었다. import React from "react"; interf.. 2022. 7. 15. [React] 22.07.14 회고록 Input 태그에서 바꾸지 않을 value는 onChange를 설정하거나 readOnly를 설정하자 onChange로 변화시에 대한 로직을 구현하거나 readOnly를 선언해주어서 막아야 하나보다!!! 오늘은 개인적인 사정으로 인해 공부하는 시간을 많이 가지지 못했다. 그래서 쓸내용도 적다!!! 적기보단 없다!!!! 그래도 매일매일 하루하루 글을 남기기로 했으니 남겨본다!!! 2022. 7. 14. [React] 22.07.13 회고록 어제의 삽질이 헛된 것은 아니었다. useEffect를 사용하여 atom의 값을 변경한 후 api를 요청하는 파라미터로 사용하는 것. 백문이 불여일견이라했다. function PopUpOtherProfile({ targetId }: PopUpOthProfProps): JSX.Element { const [openModal, setOpenModal] = useState(false); const setUserIdInfo = useSetRecoilState(userIdInfoAtom); const setReqUserInfo = useSetRecoilState(reqUserInfo); useEffect( () => setUserIdInfo(targetId.toString()), [targetId, setUser.. 2022. 7. 13. [React] 22.07.12 회고록 렌더링 할때 State를 변경하면 Warning이 뜬다. function ChatRoom() { const path = window.location.pathname.split("/")[2]; const [chRoomId, setChRoomId] = useRecoilState(getChRoomId); useEffect(() => setChRoomId(path), [path, setChRoomId]); const mainUser = useRecoilValue(getUserInfoSelector); const chatParticipants = useRecoilValue(getChRoomUser); const myIndex = chatParticipants.findIndex( (chatParticipant) =.. 2022. 7. 12. [React] 22.07.11 회고록 후회 바쁘다는 핑계로 리액트로 프로젝트를 하면서 시행착오와 배운 것들을 정리하지 않았다. 프로젝트를 목표한 시간 내에 끝내야 한다는 압박감에 블로그에 정리하는 것은 사치다 라고 자기위로를 하며 하루하루를 보냈다. 프로젝트를 시작하고 매일매일 검색하고 들이받아보면서 지금까지 왔는데 그것들을 다 정리해놓았다면 나중에 조금이라도 도움이 되지 않았을까 하는 후회를 뒤로하고 오늘부터라도 오늘의 시행착오 및 배운 것들을 나열하면서 기록해두자는 생각을 하게 되었다. 그래 오늘부터라도 시작하자. 이미지 업로드 리액트로 이미지를 업로드하는 여러 글들을 찾아보았다. function PopUpProfile(): JSX.Element { const [preview, setPreview] = useState(DefltImg);.. 2022. 7. 11. 이전 1 다음 728x90 반응형
