useState()에서 setName 호출 시 반영 안되는 문제

    const [data, setData] = useState();
    if (modalName === 'recruit') {
        setData([
            {
                id: 1,
                title: '다운 받기',
                link: 'https://drive.google.com/drive/folders/17KHI_vdVBZch6hGUGlbtzlFg9AOYFlRy?usp=drive_link',
                subtitle: 'Going to Google Drive',
            },
            {
                id: 2,
                title: 'Notion 보러 가기',
                link: 'https://www.notion.so/1bbc042b45b6802aad02e161557c5d49?pvs=4',
                subtitle: 'Going to Notion',
            },
        ]);
    } else if (modalName === 'email') {
        setData([
            {
                id: 1,
                title: '이메일',
                link: 'mailto:miseong827@gmail.com',
                subtitle: 'miseong827@gmail.com',
            },
            {
                id: 2,
                title: '휴대폰',
                link: 'tel:010-2948-0052',
                subtitle: '010-2948-0052',
            },
        ]);
    } else if (modalName === 'sns') {
        setData([
            {
                id: 1,
                title: 'Github',
                link: 'https://github.com/msun97',
                subtitle: 'Go Github',
            },
            {
                id: 2,
                title: 'Notion',
                link: 'https://fishy-snow-15a.notion.site/1bdc042b45b680bb8096d0069d0cfda5',
                subtitle: 'Go Notion',
            },
            {
                id: 3,
                title: 'Blog',
                link: 'https://hollypp.tistory.com/',
                subtitle: 'Go Blog',
            },
        ]);
    }

처음에 이렇게 적어서 data를 업데이트 하려고 했다.

modalName는 부모 쪽에서 전달해주는 애라 될 줄 알았는데 값 업데이트가 안되었다.

 

이유

useState는 비동기적으로 상태를 업데이트하니까 setData()를 호출한다고 해서 즉시 data 값이 바뀌지 않는다. 그리고 useState를 이렇게 사용하면 첫 렌더링 때 data가 undefined여서 오류가 날 수도 있다.

 

해결책

1. useEffect

- modalName이 바뀔 때마다 data를 업데이트하도록 한다.

const [data, setData] = useState([]);

useEffect(() => {
    if (modalName === 'recruit') {
        setData([
            { id: 1, title: '다운 받기', link: 'https://drive.google.com/drive/folders/17KHI_vdVBZch6hGUGlbtzlFg9AOYFlRy?usp=drive_link', subtitle: 'Going to Google Drive' },
            { id: 2, title: 'Notion 보러 가기', link: 'https://www.notion.so/1bbc042b45b6802aad02e161557c5d49?pvs=4', subtitle: 'Going to Notion' },
        ]);
    } else if (modalName === 'email') {
        setData([
            { id: 1, title: '이메일', link: 'mailto:miseong827@gmail.com', subtitle: 'miseong827@gmail.com' },
            { id: 2, title: '휴대폰', link: 'tel:010-2948-0052', subtitle: '010-2948-0052' },
        ]);
    } else if (modalName === 'sns') {
        setData([
            { id: 1, title: 'Github', link: 'https://github.com/msun97', subtitle: 'Go Github' },
            { id: 2, title: 'Notion', link: 'https://fishy-snow-15a.notion.site/1bdc042b45b680bb8096d0069d0cfda5', subtitle: 'Go Notion' },
            { id: 3, title: 'Blog', link: 'https://hollypp.tistory.com/', subtitle: 'Go Blog' },
        ]);
    } else {
        setData([]);
    }
}, [modalName]);

 

2. useMemo();

- modalName이 바뀔 때마다 data를 다시 계산하도록

const data = useMemo(() => {
    switch (modalName) {
        case 'recruit':
            return [
                { id: 1, title: '다운 받기', link: 'https://drive.google.com/drive/folders/17KHI_vdVBZch6hGUGlbtzlFg9AOYFlRy?usp=drive_link', subtitle: 'Going to Google Drive' },
                { id: 2, title: 'Notion 보러 가기', link: 'https://www.notion.so/1bbc042b45b6802aad02e161557c5d49?pvs=4', subtitle: 'Going to Notion' },
            ];
        case 'email':
            return [
                { id: 1, title: '이메일', link: 'mailto:miseong827@gmail.com', subtitle: 'miseong827@gmail.com' },
                { id: 2, title: '휴대폰', link: 'tel:010-2948-0052', subtitle: '010-2948-0052' },
            ];
        case 'sns':
            return [
                { id: 1, title: 'Github', link: 'https://github.com/msun97', subtitle: 'Go Github' },
                { id: 2, title: 'Notion', link: 'https://fishy-snow-15a.notion.site/1bdc042b45b680bb8096d0069d0cfda5', subtitle: 'Go Notion' },
                { id: 3, title: 'Blog', link: 'https://hollypp.tistory.com/', subtitle: 'Go Blog' },
            ];
        default:
            return [];
    }
}, [modalName]);

개인적으론 case가 깔끔해보이고 직관적이어서 useMemo로 수정하였다.