문제 Message 하나를 우클릭해서 contextMenu 열고 닫을 때 마다 모든 Message 가 재실행된다. //Chat.tsx const [menuState, setMenuState] = useRecoilState(contextMenuState); ... return ( {user.sub !== "0" && {menuState.show && } } ) Chat 컴포넌트 구성은 다음과 같고 Messages 안에는 Message 컴포넌트가 있다. //Message.tsx const [menuState, setMenuState] = useRecoilState(contextMenuState); ... const msgPContextHandler = (e: React.MouseEvent) => { e.pr..

onContextMenu 우클릭 박스는 onClick말고 onContextMenu가 따로 있다. export const Wrapper = styled.div` width: 80px; background-color: rgb(58, 58, 58); border-radius: 10px; box-shadow: 0 12px 35px rgba(0, 189, 25, 0.2); position: absolute; left: ${props => props.x}px; top: ${props => props.y}px; ` export const Menu = styled.ul` padding: 1px 2px; margin: 0; ` export const Item = styled.li` list-style: none; fon..

Each child in a list should have a unique "key" prop. {responseMsgArr.map((responesMsg, idx) => { const createAt = new Date(responesMsg.createdAt); return ( {responesMsg.text} {`${createAt.getHours().toString().padStart(2, "0")}:${createAt.getMinutes().toString().padStart(2, "0")}`} ) })} 다음 상황에서 자식요소에 unique key를 달라는 에러가 나온다. {responseMsgArr.map((responesMsg, idx) => { const createAt = new Date..

const Messeges = () => { { reMsgArr.map((v: responseMsgDto[], idx) => { return }) } setInputMsg(e.target.value)} onKeyDown={keyDownHandler} /> Send } 위와 같은 구성에서 textArea 변경할 때 setInputMsg 돌면서 Messages 재실행 그리고 Message 도 재실행된다. Message 컴포넌트는 inputMsg 값과는 무관한 컴포넌트이고 재실행 될 이유가 없으므로 export default memo(Messege); 다음과 같이 React.memo를 붙여 export 해준다. textArea 변경해도 Message는 재실행되지 않는다.

chat 어플리케이션을 만들면서 한 User의 연속 채팅일 때는 프로필을 첫 채팅에만 보이려고 한다. 그래서 [ responseMsg, responseMsg, responseMsg ... ] 를 [[ responseMsg, responseMsg ], [responseMsg, responseMsg responseMsg ...]] 이런 형태로 바꿔야 한다. 앞의 메세지 주인과 뒤의 메세지 주인이 같다면 한 배열에 있도록 자기 앞 인덱스의 상태를 기억하고 있어야 하기에 누산기인 reduce가 생각났다. useEffect(() => { if (msgArr.length != 0) { const resArr: responseMsgDto[][] = []; let cacheArr: responseMsgDto[] = [..

React hook 최적화 React.memo useCallback useMemo

기본 input tag, textarea tag width/height 가 파이어폭스에서랑 크롬에서랑 다르구나 다른 태그들도 브라우저 따라 차이 조금씩 있을 수 있겠다. 물론 css 놓치지 않고 잘 짜면 똑같이 보인다 ~

프론트 상태 관리 뭐로 할까하다가 useState 처럼 쓰이는 것 같은 recoil 발견 function App() { return ( ); } 대충 감싸주고 const textState = atom({ key: 'textState', // unique ID (with respect to other atoms/selectors) default: '', // default value (aka initial value) }); state key하고 기본 값 넣어주면 function TextInput() { const [text, setText] = useRecoilState(textState); const onChange = (event) => { setText(event.target.value); }; r..

https://ryuhojin.tistory.com/19 [ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료) [2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않 ryuhojin.tistory.com 위 글 작성자분의 webpack5 boilerplate 위에 //webpack.common.js new webpack.ProvidePlugin({ React: "react", process: 'process/browser.js', //추가 }), process 못 찾는 에러 해결하기 위해 추가하고..