#useeffect

자기주도적인 개발이 너무 어렵습니다.

안녕하세요.🙇‍♂️ 올해 3월에 부트캠프를 수료하고 취업준비를 하고있는 프론트엔드 지망생입니다. 부트캠프를 통해 js, react, vue, tailwind, zustand등의 스택을 주로 사용하며 프로젝트를 만들었습니다. 부트캠프를 진행하면서 react에서 useEffect훅은 컴포넌트의 생명주기 사이 ~때에 사용한다, 페이지 라우팅 기능을 사용하려면 리액트 라우터 같은 라이브러리를 활용해서 써야한다, 테일윈드가 현재 개발시장에서 가장 많이 쓰이는 CSS 라이브러리다 이런 정도로 기술스택들이 학습되었습니다. 이제 부트캠프도 수료하고 혼자 공부하는 시간이 찾아왔는데 어떤것 부터 어느정도 까지 손을 대야할지 감이 잡히질 않습니다. 1. 어떤것 부터 해야하는지 예를 들어 현재 저에게 가장 부족하다고 생각하는 스택은 next 프레임워크, zustand 외의 전역 상태관리(recoil, redux), 필수 개발 외의 인프라적인 스택?(Storybook, monorepo, sentry, jest )이라고 생각하는데 이 지식들의 우선순위를 정하는 방법과 이 외에도 개발자 시장에서 반드시 장착하고 있어야 하는 필수 스택에 무엇이 있는지를 알고싶습니다. 2. 어느정도 까지 손을 대야할지 예를 들어 React 같은 경우엔 하나의 프로젝트를 만드는 역량까진 가능해졌지만 프로젝트 안에서 퀄리티 있는 디자인 패턴이라던지, 사용해보지 못한 수많은 리액트 메서드들을 딥다이브 해봐야 할 거 같은데, 어느정도 까지 공부해야 너무 깊게 들어가지 않고, 현재 개발시장에서 경쟁력 있는 지식을 쌓았다고 할 수 있는지의 경계를 모르겠습니다. 강사님의 강의에서 벗어나 혼자서 주도적인 학습을 진행하려고 하니 시간낭비를 하게 될 거 같고, 겉햝기 식으로 공부하는 나날을 보내게 될까 심적으로 큰 부담이 됩니다.. 현업 개발자님들의 조언을 듣고싶습니다!!🙇‍♂️🙇‍♂️🙇‍♂️

리액트에서 이벤트 루프관련해서 질문이 있습니다

안녕하세요. 리액트에서 이벤트 루프 동작 관련해서 제가 이해한내용이 맞는지 질문드립니다! 코드를 간단히 설명드리면 List를 그리는 scroll container가 있고 아이템이 추가되면 마지막으로 추가된 아이템으로 스크롤을 시키려는 코드입니다. (useEffect를 사용해도 되지만 이벤트 루프를 이해하기 위해서 작성하였습니다!) 스크롤을 시키기 위해 작성한 코드는 세가지입니다! 1번 코드는 스크롤이 되지 않습니다. 이유는 리액트에서 batch 업데이트 과정에서 렌더링되기 전에 호출되었으니 스크롤이 되지 않습니다. 2번 코드는 스크롤이 되었습니다. 리액트의 상태변화는 마이크로태스크큐에서 실행이 되었고 렌더링이 발생한 후에 매크 태스크큐가 실행되기 때문에 올바르게 렌더링 후에 실행이 되었습니다. 3번 코드는 스크롤이 되었습니다. 이건 이유를 정확히 모르겠습니다. 개발자 도구에서 실행된 시점을 봐도 마이크로태스크큐에서 스크롤 함수가 실행되었지만 올바르게 실행이 되었습니다. 마이크로 태스크 큐 실행과정에서 appenchild가 발생하고나서 렌더링이 되기전에 이미 레이아웃이 다 계산은 완료가 되는걸까요? 어떻게 이해를 해야될지 모르겠습니다.

Next 서버 컴포넌트와 전역 상태관리

안녕하세요. Next15에서 서버 컴포넌트를 적극적으로 도입하여 프로덕트를 개발하고 있는데, 고민이 되는 부분이 있어 여러 분들의 도움을 얻고자 질문을 남깁니다. 서버 컴포넌트에서 받아온 데이터와 클라이언트 컴포넌트에서 사용하는 zustand가 적절히 사용되고 있는지 고민이 듭니다. 현재 GET 요청의 경우 각각의 서버 컴포넌트에서 fetch를 통해 진행하고, 해당 데이터를 자식 클라이언트 컴포넌트에서 사용할 경우 props로 내려 사용하고 있는데, 이때, 드릴링이 심해질 경우 zustand와 같은 전역 상태관리 라이브러리를 함께 사용하려고 합니다. 예를 들어, 서버 컴포넌트의 첫 번째 자식인 클라이언트 컴포넌트에서 zustand를 사용하고, 이후 자식 클라이언트 컴포넌트에서는 zustand를 통해 상태관리 할 때 자식인 클라이언트 컴포넌트의 업데이트가 진행되는 부분에서 try/catch를 통해 요청을 보내고, router.refresh()를 통해 서버 컴포넌트에서 데이터를 새로 받아옵니다. 이후 클라이언트 컴포넌트에서는 useEffect로 서버 컴포넌트에서 props로 받아온 데이터가 바뀌는 것을 감지하고, 해당 props를 zustand에서 사용하는 데이터로 업데이트하려고 하는데 문제가 될만한 점이 있을까요? 이와 관련된 링크나 답변이 있으시다면 감사히 받겠습니다!

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

next.js url 파라미터 변경 시 데이터 호출

next.js 서버 컴포넌트에서 fetch후 클라이언트 컴포넌트로 넘겨주는 구조에서 브라우저 url 파라미터 값이 바뀔때마다 새로운 데이터를 호출하도록 구현하고 싶습니다,. useEffect를 활용하려했으나 fetch 함수가 async다보니 클라이언트 컴포넌트에서 사용할 수 없더라구요... 방법이 뭔지 모르겠습니다ㅠㅠ 알려주시면 감사하겠습니다!!

useEffect에 대해 질문있습니다.

프론트엔드 개발자로 취업을 준비중입니다. 공부를 하면서 useEffect에 대해 아무리 봐도 너무 이해가 되지 않더라구요. 우선 제가 이해한건 데이터를 가져올 때 오류가 날 수 있는 상황이 오므로 사용자에게 UI를 우선 보여주고 그 다음 useEffect 부분이 실행이 된다.... 까지 이해하고 있습니다. 그런데 스크롤 이벤트나, 다른 이벤트도 useEffect안에 작성이 된 부분도 있고 또 useEffect 마지막에 [] 배열 부분에 어떤 값을 작성하면 이 값만 한번 실행이 된다... 이말도 무슨 말인지 이해가 되지 않더라구요. 그래서 useEffect에 대해서 좀 더 쉽게 알려주시면 너무 감사드리겠습니다.

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

객체 depth가 깊은 경우 ... 연산자로 복사하면 안좋나요?

안녕하세요. react를 공부 중인 초보자입니다. 현재 recoil 사용하여 recoil state에 객체로 state를 사용하고 있습니다. 그런데 input에서 onChange 이벤트로 state를 변경할 때, 객체의 depth가 깊다면 ... 연산자로 복사하면서 가는게 안좋나요? 예를들어 setState(prev => ({ ...prev, [name]: { ...prev[name], data: { ...prev[name].data, value: value } }, })); 이런 식으로 update 할 경우 ... 연산이 너무 많아져서 비효율적 인가요? 해당 input의 data가 다른 페이지에서 사용 되진 않고 다른 페이지를 갔다 와도 (컴포넌트 이동) 입력된 정보가 남아 있도록 recoil state에 관리하고 있습니다. 초보적인 입장에서 input에 입력 할 때마다 이렇게 하는 건 손해 같아서, input value를 컴포넌트에서 ref로 따로 관리를 하고, useEffect에서 clenup 으로 한번만 setState 하는 방식이 어떨까 하는 의문이 생깁니다. 객체 깊이가 깊어 ... 연산이 많아지는 경우 onChange에서 관리하면 성능적으로도, 클린 코드 (가독성) 면에서도 별로 일까요?

useState와 useEffect에 대해 너무 헷갈립니다.

안녕하세요 useState와 useEffect를 공부중인데 아직 초보자라 너무 헷갈리더라구요. 제가 이해한 것은 우선 useState는 클릭했을 때 모달창이 나온다거나, 사용자가 input에 입력한 값처럼 무언가를 동적으로 변경이 되게 할 때 사용하고 또 API를 사용할 때 이 데이터를 저장할 때 사용한다...로 알고 있고 useEffect는 컴포넌트가 처음 렌더링 될 때 html 부분이 먼저 화면에 그려진 후 데이터가 실행되게 할 때 useEffect를 사용한다...까지만 이해하고 있습니다. 여기서 궁금한점이 첫번째로, useState는 제가 설명한대로만 사용하면 되는지 궁금합니다. 두번째로, useEffect는 이 안에 작성한 코드는 한번만 실행이 된다라고 하는데 이 한번만 실행이 된다라는게 무슨 말인지 그리고 useEffect안에 console.log()와 useEffect 밖에 console.log() 이렇게 했을 땐 뭐가 다른것인지 너무 헷갈립니다. 제가 아직 초보자라 정말 정말 쉽게 설명해주시면 너무 감사드리겠습니다. ㅜㅜ

useEffect 훅에 대해 질문있습니다.

현재 리액트를 공부중인데 useEffect에 대해서 계속 헷갈리더라구요. useEffect는 처음에 렌더링이 될 때 최초에 한번만 실행이 된다. 그리고 주로 API 데이터작업을 할 때 사용한다...라는 정도만 알고 있는데 한번만 실행이 된다라는 말과 API 관련코드를 주로 왜 useEffect안에 작성이 되는지 이 부분이 이해가 되지 않더라구요. useEffect에 대해 구글링도 하고 공식문서도 읽어봤지만 아직 기초를 공부하고 있는 저에게는 설명이 너무 어렵더라구요. 그래서 useEffect에 대해서 정말 이해하기 쉽게 설명해주시면 너무 감사드리겠습니다.

사용자 등급에 따라 다른 화면을 보여주고 싶어요.

Next.js 14버전을 사용하고 있습니다. 홈페이지에 접속했을 때, 사용자의 로그인 상태 여부에 따라 각기 다른 컴포넌트를 보여주고 싶습니다. const Main = () => { const isLogin = useRecoilValue(loginStatus); const user = useRecoilValue(userAtom); return ( <> <AuthWrapper> {isLogin && user ? <Login/> : <Logout />} </AuthWrapper> </> ) }; export default Main; isLogin과 user는 로그인 여부와 회원 정보에 대한 전역 변수입니다. isLogin의 default값은 false이고, user의 경우 isLogin이 true일 때만 존재합니다. (로그인 상태일 때 해당 유저 정보를 api로 호출) 그리고 <AuthWrapper>를 통해 해당 전역 변수들을 업데이트 해줍니다. 제가 원하는 건 최초 페이지 접속 시에 AuthWrapper를 통해 state값을 초기화해주고, 이에 알맞게 컴포넌트가 렌더링 되는 것입니다. 하지만 isLogin의 default값이 false이기에 로그인 상태일 경우, 순간적으로 Logout컴포넌트가 출력되었다가 AuthWrapper에서 검증 후 state값이 변경되면 Login컴포넌트가 출력됩니다. 이 순간적인 깜빡임을 없애고 바로 동작할 수 있게 하는 방법이 있을까요? +) 추가로.. 서버 사이드에서 처리하기에는 AuthWrapper 내부에서 storage값을 사용하거나 useEffect등을 사용하기에 불가능했습니다.

[React] 도움!! 같은 함수 2번 실행하는 방법

안녕하세요, 스타트업에 취업한 신입 프론트 개발자입니다. 지금 회사에서 jwt 토큰으로 로그인을 구현하고있는데, 지금 3일째 붙잡고있는데 전혀 해결이 안되서 너무 막막합니다 ... 페이지가 처음 열릴 때 load_board()라는 함수를 실행합니다. 이는 axios 통신을 하는 함수이고 만약 res.data=== 'reload' 라면 refresh_token()함수를 실행한 후 다시 load_board()를 실행하고 싶습니다. 이걸 어떻게하면 좋을까요 ?... 제가 해봤던 방법은 1번 .then((res) =>{ setIsRefresh(true); } useEffect(()=>{ if(isRefresh){ refresh_token(); setIsRefresh(false); load_board() },[isRefresh]) 이 방법은 되긴되나 서버와 통신을 최소 3번씩하고 ... (refresh_token()를 실행하기전에 자꾸 load_board()를 실행해서...) 2범 async await을 써보니 useEffect(()=>{ const res = load_board(); if(res.data ==='reload'){ await refresh_token(); await load_board} ... },[]) 이건 확실히 한번만 실행이되는데 refresh_token()의 리스폰이 오기전에 load_board()를 실행하니까 의도한대로 안돼요 . . . . . . . . 이걸 어쩌면 좋을까요. . . . . .

react에서 에러 status에 따라 에러 모달을 가져오는 법

안녕하세요. 지금 api를 호출 후에 api에서 에러가 났을 때, 해당 에러의 status를 저장하여 해당 status에 맞는 에러 모달을 띄워주려고 하고 있습니다. ``` catch (error: unknown) { if (error instanceof AxiosError) { handleErrorModal(error.response?.status); } return null; } ``` 이렇게 fetchData에서 에러가 발생했을 때, handleErrorModal로 에러 status를 전달하고 있습니다. ``` const [errorType, setErrorType] = useRecoilState(errorDataState); const handleErrorModal = (errorStatus: string | number | null) => { setErrorType(errorStatus); }; ``` 그리고 handleErrorModal 함수는 이와 같이 작성을 해놓은 상태이고요. 근데, setState가 비동기로 작동해서인지 errorStatus가 저장이 되지 않아서 계속 초기값인 null을 띄워줍니다. 그리고, 계속 ``` Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. ``` 이 오류를 띄우네요. 이 문제를 해결하기 위해서는 useEffect를 쓰는 방법외에는 다른 방법이 없는걸까요?

Next.js로 프로젝트 중인데, 팀원과 의견조율이 잘 안돼서 도움 부탁드립니다.

안녕하세요, 저는 백엔드 개발자로 일한지 이제 2년차가 된 개발자입니다. 사이드프로젝트에서는 프론트 개발을 하고 있고 현재 Next.js를 사용하고 있습니다. 백엔드팀도 따로 있어서 Next.js의 API routes는 BFF같은 느낌으로 사용하고 있습니다. [Next pages] <-> [Next API] <-> [백엔드 서버] 현재 상황은 유저의 로그인정보를 어떻게 관리하냐로 이야기를 하고 있습니다. 1. 마이페이지 -> 프로필 수정 페이지 2. 로그인 -> 메인페이지 이렇게 유저의 프로필 정보가 많이 쓰이다보니까 이걸 매번 GET해서 가져올까, 전역상태로 관리할까 이야기를 하는데 좀처럼 의견이 좁혀지지가 않는 상황이라 다른 분들의 의견을 여쭙고 싶습니다. (참고로 저희 둘 다 프론트 개발경험이 그리 많지 않습니다) A: 그냥 매번 GET하자.(넥스트 API 캐싱을 사용하자) - 전역상태관리보다 코드 복잡도가 줄어들 것 같다. - 넥스트의 API 최적화를 사용하는 게 더 Next스러운 방식같다. B: 전역 상태로 관리하자. - useEffect로 현재 모든 GET 요청을 하고 있기 때문에 윌업데이트에 변경이 일어나면 재렌더링이 일어남 - (하지만 컨텍스트 정보가 바뀌지 않으면 최초 렌더 이후 리렌더 되지 않음) - 캐싱한 데이터를 받아오더라도 결국 불필요한 api요청을 보내는 것이며 api요청을 보내는 것보다 전역 상태에서 가져다 쓰는 것이 더 바람직하지 않나 서로 비슷한 실력에 사람도 둘 밖에 없어서 결정을 내리기 힘들어서, 다른 분들의 의견을 좀 들어보고 싶습니다. 읽어주셔서 감사합니다.

리액트 타입스크립트 obj[key] 에러

타입스크립트 이제 막 적용해보는 초보입니다.. 코드 내 monitorMenu[type].container 에서 [type]에 에러가 뜨는데 타입 지정이 잘못 된 건지 찾아봐도 원인을 모르겠습니다ㅜㅜ 물어볼 곳이 없어 질문합니다,,! 도움 부탁드립니다...ㅠㅠ // code import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import DashboardContainer from '../containers/DashboardContainer'; import IntegratedContainer from '../containers/IntegratedContainer'; interface IMonitorMenu { [key: string]: { container: string | JSX.Element; }; } const Monitor = () => { const user: any = []; const { type } = useParams<{ type?: string }>(); const navigate = useNavigate(); const [menu, setMenu] = useState('integrated'); const onClickMenu = (name: string) => { navigate(`/monitor/${name}`); }; const monitorMenu: IMonitorMenu = { integrated: { container: <IntegratedContainer /> }, dashboard: { container: <DashboardContainer /> }, }; return ( <div> ... <div>{monitorMenu[type].container}</div> </div> ); }; export default Monitor; // error ERROR in src/pages/Monitor.tsx:37:25 TS2538: Type 'undefined' cannot be used as an index type.

react query가 useEffect를 통한 setState보다 빠른 렌더링을 보여주는 이유는 무엇때문일까요?

버튼을 누르면 QR코드를 받아오는 api를 재호출하여 Qr코드 이미지를 리렌더링 시키려 합니다. react query를 사용하는 것이 useEffect와 setState를 사용해서 api의 값을 화면에 그려주는 것보다 훨씬 속도가 빠르더군요. (react query는 refetch를 통해 api를 재호출 했습니다.) useEffect와 setState를 사용한다면 setState의 배치 처리 과정으로 인해, 즉시 값이 바뀌지 않고 비동기적으로 동작한다고 알고 있습니다. 하지만 react query의 어떤 동작 원리때문에 useEffect와 setState보다 빠르게 처리되는건지는 잘 모르겠습니다. 구글링으로 찾아보니 refetch는 백그라운드에서 처리된다고 하는데 백그라운드의 개념이 정확하게 이해가 되지 않습니다. 제가 추측하기론, react query를 사용하면 api의 응답값을 받자마자 data를 사용할 수 있습니다. setStatef로 state를 변경해주는 과정이 필요 없습니다. 그렇기에, useEffect와 setState를 사용한 것보다 더욱 빠른 렌더링을 보여줄 수 있는 것 같은데 맞을까요??

리액트 useEffect와 unmount에 관해

오늘 회사 스터디를 진행 하면서 제가 공부하면서 느낀 내용에 대해 팀원 분들의 의견이 달라 여기에 궁금해서 끄적여 봅니다... useEffect가 컴포넌트 안에서 선언이 되었을 다고 가정했을 때, 1. 해당 컴포넌트가 mount 되고, unmount 될 때 clean up 함수가 호출 된다. 2. useEffect 내에 state를 변경하는 작업이 존재한다면, react fiber reconciler 에 의해 react fiber 의 작업이 이루어지고, 해당 내용을 변경한 VDOM에 의해 다시 실제 DOM에 바뀐 부분이 새로 그려진다.. === 재렌더링 제가 이해한 게 맞을 까요??

모바일 뷰에서 팝업이, 뒤로가기 제스처를 취했을 때 이전 페이지로 넘어가지 않고 팝업만 닫히게 구현하고 싶어요.

안녕하세요. 이번에 웹뷰 뿐만 아니라 모바일 뷰까지 같이 개발을 진행하고 있는데, 팝업의 기능 구현에 어려움을 겪고 있어 질문을 남깁니다. 웹뷰 같은 경우는 바로 팝업을 닫을 수 있지만, 모바일 같은 경우에는 무심결에 뒤로가기 제스처를 통해서 팝업을 닫으려는 유저가 있을 수 있다고 생각합니다. 그래서 뒤로가기 제스처가 발동 시, 이전 페이지로 렌더링을 시도하는 것을 막고 해당 팝업을 unmount 시키고 싶은데 방법이 잘 생각나지 않네요. **개발환경은 프론트 (react) 입니다. 그냥 간단하게 생각한다면 모바일 뷰일 때를 dom 으로 감지 후에 해당 팝업이 mount 된 상태에서 navigation(-1) 같은 동작을 감지하여, 이전 페이지로 이동 대신 팝업을 unmount 시키게, useEffect 등으로 감시하면 될 것 같은데, 어떻게 구현해야 될까요? + 현재 react-router-dom v6.2를 사용하고 있는데, useBlocker를 활용하면 해결될 것 같습니다..! https://reactrouter.com/en/main/hooks/use-blocker

리액트 비동기 문제일까요 ㅠㅠ?

안녕하세요! 이번에 팔로우 추천 목록을 불러오는 것을 만드는 중인데 문제가 생겨서 질문 남깁니다. 원하는 결과대로라면 내가 팔로우 한 사람들을 불러온 후, 그 사람들의 팔로잉 리스트를 불러오고, 조건에 충족 한다면 저의 추천 팔로우 리스트에 포함시키는 것입니다. 하지만 결과가 저 자신이 팔로우 추천으로 뜨더라구요 ....ㅠㅠ getRecFollowingList의 결과를 콘솔로 찍었을 때 첫 번째, 두 번째 useEffect에서 모두 저 자신의 팔로잉 리스트를 불러옵니다.... ㅠㅠ 제가 생각했을 때, 첫 번째 useEffect에서 setMyFollowList한 것이 아직 반영되지 않아서 두 번째 myFollowList가 forEach를 못 도는 건지... 아니면 getRecFollowingList가 통신이 제대로 안되는건지 모르겠습니다.

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

스크롤 이벤트가 있는 웹페이지 최적화에 대한 질문

스크롤을 내림에 따라 디자인이 동적으로 변하는 웹페이지들이 많은 것 같습니다 근데 대부분 컴포넌트는 observe되지 않는다면 성능메모리만 차지하고 필요가 없어보입니다 제 질문은 이런것들이 실제로 사용되나?입니다 1. 만약 어떤 section이 observe되지 않는다면 조건부 렌더링으로 (크기는 동일한)빈 컴포넌트(또는 정적인 컴포넌트)를 랜더링하도록 한다 (단 필요에 따라 상태나 데이터를 임시저장해야할 필요가 있겠네요) 2.따로 조건부 렌더링을 하지않고 observe되지않을때 성능과 메모리를 줄이기 위한 별도 테크닉을 사용한다(무엇이 있을까요?) 3.아무것도 필요없다 Useeffect안에 스크롤이벤트리스너를 추가하고 scrollY가 특정 주기마다 갱신되는 코드정도만 작성하면 된다 4.기타 물론 케바케긴 하지만 사례가 궁금해요

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)

개발자 도구의 width와 getBoundingClientRect().width의 길이가 다른 이유...

안녕하세요 개인적으로 만들고 있는 프로젝트에서 getBoundingClient().width의 값과 개발자 도구 상의 width 값이 다른 문제가 나와서 원인을 찾고 있습니다. div의 css는 box-sizing:border-box; padding:5px 10px; border:2px solid white; display:inline-block 입니다. 부모 div는 width 값을 정해주지 않아서 useEffect 안에서 부모 div의 children을 순회하며 자식 노드의 width를 누적해서 width값을 구하려고 하는데 첨부한 사진처럼 js로 구한 width가 개발자도구와 맞지 않는 문제가 발생하고 있습니다. 일단은 임의로 보정값을 넣어서 원하는 결과물은 나왔지만 찝찝한 마음이 들어서요 이 문제의 원인을 찾고 싶습니다. 감사합니다!

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => {     if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({     children, }: {     children: React.ReactNode }) {   return (         <html lang="ko">             <body className={inter.className}>                 <div className="wrap bg-white">                     <Header />                     {children}                     <Footer />               </div>             </body>         </html>     ) }

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

안녕하세요. 현재 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!!); }; ------------ 채팅 페이지는 따로 있습니다 --------------

DRF를 자세히 공부해보고싶은데 독학으로 하려니 자꾸 턱턱걸립니다... django 백엔드에서 프론트엔드로 보낸 data가 안불러와져요

django rest framework로 웹을 개발하는 것을 공부하는 중인데 막히는부분이 많아서 점점 괴로워지네요. 이거를 보면서 독학하고 있는데요. https://wikidocs.net/book/9596 django views.py에서 response(data)를 발신하는 것까지는 되는데 next.js를 이용한 프론트에서 data를 받아오지 못하고 있어요... 왜 그럴까요? 디버그 메시지가 안뜨니 더 알기가 어렵네요. # backend/views.py """ from django.shortcuts import render from django.http import HttpResponse from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import AllowAny from rest_framework.response import Response # Create your views here. @api_view(['GET']) @permission_classes([AllowAny]) def hello_world(request): return Response('Hello, World!') # frontend/index.js """ import React, { useState, useEffect } from "react"; // config.js export const BACKEND_URL = "http://127.0.0.1:8000/"; const Home = () => { // State to store the data fetched from the backend const [data, setData] = useState(""); // useEffect hook to fetch data from the backend when the component mounts useEffect(() => { // Fetch data from the backend API using the '/api/hello' endpoint fetch("${BACKEND_URL}api/hello") .then((response) => response.json()) .then((data) => setData(data)); }, []); // Render the component JSX return ( <div> <h1>Welcome to Fine-Tuning Chatbot!</h1> <p>{data}</p> </div> ); }; export default Home; """ pure django-template를 이용해서 홈페이지 만들고 그 원리를 이해하는 것까지는 되는데 DRF는 정말 다른 세상이라고 느껴지네요...ㅎㅎ 좋은 강의나 책이 있으면 추천부탁드립니다. ㅠㅠ 위에 언급한 강의로 RESTful 배워보려는데, 기술스택이 많아서 그런건지 정보량도 많고 어렵네요 ㅠ

React Native 구조 컨벤션이 따로 있거나 개인적인 규칙이 있나요?

요즘 React native를 통해 텀 프로젝트를 하고있습니다. 한 컴포넌트에서 코드가 많아질수록 특정 기능을 하는 코드를 찾을 때 불편함을 겪고 있습니다. 그래서 문득 든 생각이 useState, useEffect, 일반 함수, 이벤트 처리 함수 등 수 많은 코드들이 하나의 훅에서 정의가 되고 있는데 혹시 이것에 대한 순서 규칙이 있나요? 예를 들어서 "useState는 맨 위에 정의되어야 한다." 라는 규칙 같은 게 궁금합니다.

useEffect Redux 사용

개인프로젝트 중인 학생입니다.. 제가 투두리스트 에서 오늘이나 내일 날짜의 투두리스트를 redux에 저장해서 알림칸에 띄워서 보여 주고 싶어서 아래와 같이 구현하였는데요 알림을 클릭했을때 삭제되게 하였는데 홈페이지를 다시 렌더링 하게 되면 삭제 되었던게 다시 들어와 서요 어덯게 해야 삭제된거는 거르고 들어오게 할 수 있을지 질문드립니다. dependency 에 todos 가 다른거에도 영향이 받아서 변해서 그런건가요 ?? 코드가 지저분해도 양해부탁드립니다 ㅠㅠ

팝업이 열리지 않아요 ㅠㅠ

기본값이 false인 setIsPopuped라는 useState를 사용하여 팝업의 상태를 관리하고 있습니다. setTimeout을 사용하여 3초 후에 setIsPopuped(true)로 상태를 변경하려고 했는데, 팝업이 열리지 않는 문제가 발생했습니다. 리렌더링이 되지 않는 것 같은데, 리렌더링을 발생시킬 수 있는 방법을 알고 싶습니다. useEffect의 의존성 배열에도 isPopuped를 추가했음에도 내부 콘솔이 찍히지 않습니다. isPopuped와 setIsPopuped을 둘 다 넣어보았지만 여전히 작동하지 않습니다. setIsPopuped(true)를 호출하면서 콘솔도 찍어보았는데, 콘솔은 찍힙니다. 그런데 왜 팝업이 열리지 않는 걸까요?