[Flutter] 위젯에 borderRadius 줄 때 어느 것이 더 효율적일까? ClipRRect vs Container decoration

Container를 ClipRRect로 감싸서 border radius를 주는 코드를 몇번 본 적이 있습니다. Container에도 decoration을 사용하여 border radius를 주는 방법이 있기 때문에, '그러면 Container 하나만 쓰면 되는 것 아닌가'하는 의문이 든 게 이 글의 시작이 된 것 같습니다. 저는 이 두 방법이 무슨 차이가 있는지 간단히 알아보는 시간을 가졌습니다.

사실 위젯의 모서리를 둥글게 만들고 싶을 때 ClipRRect를 쓰던 Container decoration을 쓰던 원하는 목적을 이룰 수는 있습니다. 하지만 ClipRRect는 다소 비싼 비용이 드는 위젯이기 때문에, 이미지 자체의 모서리를 둥글게 변경하고 싶거나 다소 복잡한 그래픽 요소를 주고 싶은게 아닌 단순 모서리만 둥글게 하고자 한다면 Container decoration을 사용하는 것이 효율적입니다.

플러터 공식 문서 - Minimize use of opacity and clipping 항목에도 다음과 같이 나와있습니다. 둥근 모서리가 적용된 사각형의 위젯을 만들고 싶다면 많은 위젯에서 제공하는 borderRadius 속성을 사용하라고 권장하고 있습니다.

To create a rectangle with rounded corners, instead of applying a clipping rectangle, consider using the borderRadius property offered by many of the widget classes.

스택 오버플로우에도 비슷한 주제의 글이 있어서 가져왔습니다.

결론

결론적으로 단순히 사각형 위젯에 둥글게 모서리만 주고 싶을 때는 Container 또는 그 외 위젯에서 제공하는
borderRadius 속성을 사용하는 것이 낫고, 이미지 자체를 변경하거나 복잡한 그래픽 요소를 주고 싶다면 ClipRRect를 사용하는 것이 효율적인 것 같습니다.

References

Flutter Dev : Performance best practices - Minimize use of opacity and clipping
Stack Overflow: Container borderRadius vs ClipRRect borderRadius