리액트 네이티브에서 pdfmake 라이브러리 쓸 때 (NOBRIDGE) ERROR Unhandled promise rejection [RangeError: Maximum call stack size exceeded (native stack depth) 에러 해결하는 법

내가 기억할라고 빠르게 씀 + 공익을 위해 글 씀............

결론부터 말하자면:

const docDefinition = [
    content: [
        {text: "", fontSize: 24, },
        {...}
    ],
    defaultStyle: {
        ...
    }
    ...
]

위 docDefinition.content 에 들어갈 객체를 동적으로 만들지 말자!!!!!

자세히 설명하자면:

지금 나는 pdfmake 로 좀 복잡한 디자인을 구현 중인데 예를 들어 table의 각 row마다 isDark: boolean 값에 따라 image 컴포넌트를 추가해야 했다.
그래서 대충 이런 식의 함수를 구현했다.

const createCellStyle = (isDark?: boolean) =>{
    return isDark ? {
        image: "dark",
        width: 100,
        height: 50,
    }  : {
        text:"light",
        fontSize: 24
    }

const createTableContent = (tableData: Array<any>)=>{
    return [
        ...tableData.map((el, index)=>{
            return [
                {columns:[
                        {text: el.text},
                        createCellStyle(el.isDark)
                    ]
                }
            ]
        })
    ]
}

const docDefinition = {
    content: [
        ...createTableContent(tableData)
    ]
}

이런 식으로 구현했다. 근데 이게 문제될 거라곤 생각도 못한 게, 리액트 네이티브 pdfmake 예시를 보면 (https://pdfmake.github.io/docs/0.1/getting-started/examples-from-comunity/) 여기서도 동적으로 만들어서 쓰고 있음..

근데 왜 몇몇 동적 생성에서만 에러가 터지냐?? -> pdfmake는 재귀적으로 docDefinition을 탐색하며 객체를 감시하고 리렌더링함. 내가 만든 createCellStype 함수는 이미지 객체를 리턴하는데, 텍스트 객체와 달리 동적으로 평가됨 -> 계속 감시하면서 무한 뤂,,, (사실 아직 이게 뭔 말인지 잘 이해는 안됨. 나중에 다시 더 알아보고 글 보충하겠음) -> 따라서 함수 쓰지 말고 그냥 {image:'dark'} ... 이렇게 정적으로 이미지 컴포넌트를 넣든가, 아님 JSON.parse(JSON.stringfy(createCellStyle(el.isDark))) 를 사용해서 객체의 참조를 끊고 pdfmake 감시를 벗어나는 식으로 해야 한다.

만약 동적 스타일링이 필요하다면 이렇게 구현하자. JSON.parse(JSON.stringfy(함수 실행())) 으로 수정해주면 된다.

const createCellStyle = (isDark?: boolean) =>{
    return isDark ? {
        image: "dark",
        width: 100,
        height: 50,
    }  : {
        text:"light",
        fontSize: 24
    }

const createTableContent = (tableData: Array<any>)=>{
    return [
        ...tableData.map((el, index)=>{
            return [
                {columns:[
                        {text: el.text},
                        JSON.parse(JSON.stringify(createCellStyle(el.isDark))), // 🟢 JSON 변환하여 참조를 끊음
                    ]
                }
            ]
        })
    ]
}

const docDefinition = {
    content: [
        ...createTableContent(tableData)
    ]
}

이거 진짜 5일 내내 보이던 에러 메세지라 노이로제 걸릴 거 같았는데 어찌저찌 해결이 되네.. 아 눈물나..
이 에러 메세지가 뜬다 해도 pdf 가 생성 안 되는 것도 아니고, 앱도 잘 돌아가고 그래서 하 그냥 무시하고 모른척할까 수도 없이 생각했는데 개발자의 쫀심을 걸고 해결했다.