기존코드 리펙토링 하기..이건 아니긴해...

const testList: React.ReactNode[] = newTestList?.map(
    (m: BoxProps[], idx: number) => {
        return (
            <div key={idx}>
                <Label>{m[0].tactics}</Label>
                {m.map((inner: BoxProps, idx: number) => (
                    <MitreBox
                        key={`${idx}-${inner.name}`}
                        id={inner.id}
                        name={inner.name}
                        link={inner.link}
                   />
                ))}
            </div>
        )
    }
)
const activeTestList: React.ReactNode[] = newTestList?.map(
    (m: MitreBoxProps[], idx: number) => {
        return (
            <div key={idx}>
                <Label>{m[0].tactics}</Label>
                {m.map((inner: BoxProps, idx: number) => (
                    <>
                        {inner.isActive && inner.type === 1?
                        <Box
                            key={`${idx}-${inner.name}`}
                            id={inner.id}
                            name={inner.name}
                            link={inner.link}
                            
                        /> :
                        ''}

                    </>
                ))}
            </div>
        )
    }
)

원래 이런 코드 였는데

 

이렇게 두개의 함수를 사용하는게 비효율적이여서

const renderBoxes = (m: BoxProps[]) => {
    return m.map((inner: BoxProps, innerIdx: number) => (
        <Box
            key={`${innerIdx}-${inner.name}`}
            id={inner.id}
            name={inner.name}
            link={inner.link}
         />
    ));
};

const testList: React.ReactNode[] = newTestList.map((m: BoxProps[], idx: number) => (
    <div key={idx}>
        <Label>{m[0].tactics}</Label>
        {isChecked ? renderBoxes(m) : renderBoxes(m.filter(inner => inner.name === 1))}
    </div>
));

 

 

{isChecked ? renderBoxes(m) : renderBoxes(m.filter(inner => inner.name === 1))}

이 부분에서 inner.name 부분이 1인 데이터만 가져와서 filter 해준다.

 

그럼 내가 원하는 부분만 화면에 보여줄 수 있다!!

 

이렇게 하면 가독성 측면에서도 좋다.