react useEffect안에서 state를 사용하는 방법에 대한 질문

Question

컴포넌트 초기 렌더링 시 서버를 구독구독할 때 콜백 함수를 지정할 수 있고, 콜백 함수의 인자로 새로운 데이터를 받음콜백 함수에서는 새로운 데이터를 받아 list 배열에 일치하는 데이터가 없으면(=새로운 데이터면) setlist로 새로운 데이터 추가문제점: 초기 렌더링 시 한 번만 구독을 하고 싶지만, 의존성 배열에 list가 있기 때문에 setlist로 상태 변경 시마다 구독을 다시 요청콜백 함수 부분을 함수로 빼내도 useCallback로 감싸고 해당 함수를 useEffect 의존성 배열에 넣어야 하니 결과는 똑같더라구요.list 값을 사용하는 대신 setlist 안에서 current을 사용해서 비교하고 분기 처리는 가능한데, 이런 방식이 좋을까요?어떻게 해결하면 좋을까요? const Component = () => { const [list, setlist] = useState([]); useEffect(() => { const subscription = server.subscribe((newItem) => { if (!list.find((item) => item.id === newItem.id)) { setlist((current) => [...current, newItem]) } }) return () => { server.cancelSubScribe(subscription) } }, [list]) return(

{item.content}

) }제가 생각하는 최선의 방법은 의존성 배열을 없애기 위해 setlist안에서 전부 처리?setlist((current) => { if (!current.find((item) => item.id === newItem.id)) { return [...current, newItem]; } return current; });

얌탱이 · Accepted Answer

setList 콜백으로 처리하셔도 되고, state가 굳이 필요하지 않는다면, 저라면 이 부분을 useRef로 대체할거 같아요. 콤포넌트 내에서 state가 꼭 필요한 상황이라면 useRef를 함께 활용해도 되는데 그럴바엔 setList 콜백 내에서 처리할듯해요

몰랑토끼 · Answer

subscribe 이 나온걸 보면 소켓쪽인가요?

react useEffect안에서 state를 사용하는 방법에 대한 질문

2개의 답변

Q&A 목록