인프런 커뮤니티 질문&답변

안녕하세요 제로초님

강좌에서 antd Button 컴포넌트 prop으로 loading={addPostRequest} 처럼

제가 따로 Button 컴포넌트를 구현해봤는데

아래 이미지와 같이 버튼 하나만 눌렀는데도, 버튼 옆에 한꺼번에 로딩중이라고 뜨게 되더라구요

각각 버튼을 눌렀을때, 누른 버튼 옆에만 로딩중이라고 뜨게 하려면 어떻게 해야 할까요...?

바쁘시겠지만 조언 부탁드립니다ㅠㅠ

아래 소스가 있는데, List 컴포넌트 내부에 Button 컴포넌트를 사용하고 있습니다.

자식 Button.js

function Button ({ dataId, event, loading, children }) {
    return (
        <>
        <button data-id={dataId} onClick={e => event(e.target.dataset.id)}>
            {children}
        </button>
        {loading && <span>로딩중..</span>}
        </>
    );
}

export default Button;

부모 List.js (props로 배열로 된 lists 를 부모로부터 받고 있습니다.)

function List ({ lists, tit, done, del }) {
    const dispatch = useDispatch();
    const addDoneListRequest = useSelector(state => state.todoList.addDoneListRequest);
    const deleteTodoListRequest = useSelector(state => state.todoList.deleteTodoListRequest);

    const onClickDone = useCallback((id) => {
        dispatch(addDoneList(id));
    }, []);

    const onClickDel = useCallback((id) => {
        dispatch(deleteTodoList(id));
    }, []);

    return (
        <ListLayout>
            {tit && <h2 className="tit">{tit}</h2>}
            <ul className="list">
                {lists.length > 0 && 
                    lists.map(list => (
                        <li key={list.id}>
                            <p>{list.content}</p>
                            {done && 
                                <Button 
                                    dataId={list.id} 
                                    event={onClickDone} 
                                    loading={addDoneListRequest}
                                >완료</Button>
                            }
                            {del && 
                                <Button 
                                    dataId={list.id} 
                                    event={onClickDel} 
                                    loading={deleteTodoListRequest}
                                >삭제</Button>
                            }
                        </li>
                    ))
                }
            </ul>
            {lists.length === 0 && <p className="not">리스트가 없습니다.</p>}
        </ListLayout>            
    );
}

export default List;