리덕스 스토어와 리액트 리렌더링 관련된 질문입니다.

제로초님 감사합니다.. 제가 FollowersModalVisibleHandler 해당 함수 사용하는곳을 찾아보다 보니 제가 왜 넣었는지 모르겠는 코드가 한줄 있었는데 ㅜㅜㅜ 그게 원인이었던거 같습니다... 바로 아래의 코드가 followComponent에 있었습니다.. // FollowModalComponent에서 modalCancleButtonHandler props로 내려주는 부분const modalCancleButtonHandler = FollowingsModalVisibleHandler || FollowersModalVisibleHandler; FollowComponent modalCancleButtonHandler={modalCancleButtonHandler} /> // FollowComponent useEffect(() => { return () => modalCancleButtonHandler && modalCancleButtonHandler(); }, [followList]); ㅜㅜ 감사합니다. 그래도 물어보면서 잘못알고 있었던 개념도 알게되고 정말 감사합니다!

리덕스 스토어와 리액트 리렌더링 관련된 질문입니다.

제로초님 말씀대로 아래와같이 console을 넣고 찍어보니 팔로우 리스트가 업데이트 될때 FollowersModalVisibleHandler가 또 호출이됩니다.. const FollowersModalVisibleHandler = useCallback(() => { console.log('FollowersModalVisibleHandler 호출'); setFollowersVisible(prev => !prev); }, []); 그런데 저는 followComponent에서 무한 스크롤을 구현해줄때 따로 함수를 호출하지 않았는데 왜그러는 것일까요..? const onIntersect = useCallback( (entries, observer) => { // console.log('entries ? ', entries); entries.forEach(entry => { if (followList.length >= 5 && entry.isIntersecting) { // console.log('api 호출'); mode === 'followings' ? dispatch(getFollowingsRequest({ userId, offset: followList.length })) : dispatch(getFollowersRequest({ userId, offset: followList.length })); observer.unobserve(entry.target); // api를 불러왔다면 타겟 엘리먼트에 대한 관찰을 멈춘다 } }); }, [followList], ); useEffect(() => { let observer; if (target) { // console.log('target 있음'); observer = new IntersectionObserver(onIntersect, { threshold: 1 }); observer.observe(target); } return () => observer && observer.disconnect(); }, [target, followList]);

리덕스 스토어와 리액트 리렌더링 관련된 질문입니다.

현재 부모컴포넌트인 UserInfoAndSocial 컴포넌트에서 아래와같이 FollowModalComponent로 visible props를 내려주고있습니다. 콘솔을 찎어보니 팔로우 리스트를 새로 불러오면 부모컴포넌트인 UserInfoAndSocial 컴포넌트에 걸어두었던 콘솔이 찍히는것을 보니 UserInfoAndSocial가 리렌더링되면서 followingsVisible state가 기본값인 false로 돌아가 모달창이 닫기는게 아닐까하고 추측하고있습니다. console.log('==> [UserInfoAndSocial] 부모 컴포넌트 리렌더링'); 질문 1) 부모컴포넌트에서 useSelector를 통해 followList를 가져오지않고 자식 컴포넌트에서 가져오도록 코드를 수정했는데 왜 부모컴포넌트인 UserInfoAndSocial 컴포넌트가 리렌더링 되는것인가요? // followComponent function FollowComponent({ titleShow, modalCancleButtonHandler, mode, padding, userInfo, }: FollowComponent): JSX.Element { const followerList = useSelector(state => state[USER].followerList); const followingList = useSelector(state => state[USER].followingList); // 말씀하신대로 부모컴포넌트에서 불러와서 내려주기때문에 리렌더링이 되는게 아닌가싶어 자식컴포넌트자체에서 followList와 followingList를 불러와 사용하고 있습니다. //이하 생략 질문2) 모달창이 닫기지 않도록 하려면 어떻게 하면 좋을까요?... followlist를 USER 리듀서에서 분리해야만 할까요.. ?.. . . . . 아래는 부모컴포넌트 UserInfoAndSocial, FollowModallComponent 코드입니다. UserInfoAndSocial > FollowModallComponent > FollowComponent 이런 구조로 되어있습니다. // UserInfoAndSocial 컴포넌트 const UserInfoAndSocial = memo(({ me, userInfo }) => { const [followingsVisible, setFollowingsVisible] = useState(false); const [followersVisible, setFollowersVisible] = useState(false); const FollowingsModalVisibleHandler = useCallback(() => { setFollowingsVisible(prev => !prev); }, [followingsVisible]); const FollowersModalVisibleHandler = useCallback(() => { setFollowersVisible(prev => !prev); }, [followingsVisible]); console.log('==> [UserInfoAndSocial] 부모 컴포넌트 리렌더링'); return ( FollowModalComponent mode="followings" userInfo={userInfo} visible={followingsVisible} FollowingsModalVisibleHandler={FollowingsModalVisibleHandler} /> ); }); // FollowModalComponent 컴포넌트 function FollowModalComponent({ mode, visible, userInfo, FollowingsModalVisibleHandler, FollowersModalVisibleHandler, }: FollowModalComponent): JSX.Element { const modalCancleButtonHandler = useCallback(() => { mode === 'followings' ? FollowingsModalVisibleHandler() : FollowersModalVisibleHandler(); }, [mode]); console.log('==> followModalComponent 리렌더링'); console.log('followModalComponent visible ? ', visible); return ( Modal title="Followings" visible={visible} onCancel={modalCancleButtonHandler} okButtonProps={{ style: { display: 'none' } }} > FollowComponent modalCancleButtonHandler={modalCancleButtonHandler} titleShow={false} mode={mode} padding={false} userInfo={userInfo} scroll={1} /> Modal> ); }

리덕스 스토어와 리액트 리렌더링 관련된 질문입니다.

넵 맞습니다 아래와같이 변수를 받아서 사용하고 있습니다 import { USER } from '../../userSlice'; // index combinedReducer에서 아래와같이 사용중입니다. const combinedReducer = combineReducers({ [USER]: userReducer }); return combinedReducer(state, action);

리덕스 스토어와 리액트 리렌더링 관련된 질문입니다.

아래와같이 변경해보았는데도 똑같은 문제가 지속됩니다.. const { me, userInfo, followingList, followerList } = useSelector(state => state[USER]); // 기존에 사용했던 방법 const me = useSelector(state => state[USER].me); const userInfo = useSelector(state => state[USER].userInfo); const followerList = useSelector(state => state[USER].followerList); const followingList = useSelector(state => state[USER].followingList); // 바꾼 방법 // 부모컴포넌트에서 자식컴포넌트(FollowComponent)로 state를 props로 넘겨주고있습니다. Modal title="Followers" visible={followerVisible} onCancel={modalCancleButtonHandler} okButtonProps={{ style: { display: 'none' } }} > FollowComponent followerList={followerList} followingList={followingList} me={me} userInfo={userInfo} /> Modal>

getServerSideProps에서 context.store.dispatch를 이용해 redux store에 state를 가져오는 과정에서 질문이있습니다.

감사합니다 !!

getServerSideProps에서 context.store.dispatch를 이용해 redux store에 state를 가져오는 과정에서 질문이있습니다.

와.. 감사합니다 제로초님 11초에서 2~3초로 줄었습니다.. 제로초님 현재 프로젝트에서 유저가 요청할때마다 같은데이터를 계속 보내주는 것이 비효율적이라 생각하여 throttle을 사용해 아래와같이 코드를 작성하여 데이터를 요청하는 함수가 실행되고 5초가 지날때까지 요청이 안가도록 해주었는데요 제가 throttle에 대해 알맞게 이해한게 맞을까요?, 그리고 이러한 경우에 takelastest를 사용해도 제가 하고자하는 기능 구현이 될까요? function* watchGetUserPapers() { yield throttle(5000, getUserPaperRequest, getUserPapers); }