함수형 업데이트 useState

[React/리액트] 함수형 업데이트 useState

 

const onCreate = useCallback(() => {
    const user = {
        id: nextId.current,
        username,
        email,
    };
    setUsers([...users, user]);
    setInputs({
        username: "",
        email: "",
    });
    nextId.current += 1;
}, [username, email, users]); // users 참조

(이전글 참고)

React.memo 를 통해서 불필요한 렌더링을 방지하였는데도 작동할 때 같이 리렌더링 되는 경우에는 해당 컴포넌트에 같이 참조되는 값이 있기 때문이다.

따라서 이럴 때는 useState 를 이용한 함수 업데이트를 해주면 된다.

 

다른 컴포넌트에서 users 값이 변경될 때 마다 다른 컴포넌트까지 리렌더링 되므로 이를 수정하기 위해서 deps 배열에서 같이 참조되는 props 값 users 를 지우고, setUsers 의 콜백함수의 파라미터로 등록해준다.

콜백함수에서 users 를 파라미터로 조회하기 때문에 deps 배열에 넣지 않아도 된다.

const onCreate = useCallback(() => {
    const user = {
        id: nextId.current,
        username,
        email,
    };
    setUsers((users) => [...users, user]); // 함수형 업데이트
    setInputs({
        username: "",
        email: "",
    });
    nextId.current += 1;
}, [username, email]);

따라서 onCreate 함수는 username과 email 이 바뀔 때에만 리렌더링 되는 것이다.