명령형 API와 선언형 API 중 언제 사용할까

리액트는 선언형 스타일을 권장합니다. 주어진 상태에서 UI가 어떻게 보여야 하는지 설명하면 리액트가 그에 맞도록 DOM을 조정합니다. 대부분의 동작은 직접 DOM 명령을 내리기보다 프롭과 상태를 통해 흐릅니다.

이 모델에서는 렌더링된 출력이 수동 변경의 연속적인 결과가 아니라 상태의 순수 함수이므로 UI를 예측하기 쉽습니다.

일부 상호작용은 순수한 선언형 표현식으로 다루기 어렵습니다. 요소에 명령형으로 포커스를 설정하거나, 정확한 순간에 애니메이션을 시작하거나, 외부 DOM 위젯을 제어하는 일은 상태의 함수로 깔끔하게 표현되지 않는 경우가 많습니다.

이런 경우 리액트는 참조와 명령형 핸들 같은 탈출구를 제공합니다. 단, 선언형 프롭으로 부족한 부분에서만 신중하게 사용해야 합니다.

명령형 API에는 절충점이 따릅니다. 메서드를 직접 실행하고 부수 효과를 관찰해야 하므로 테스트하기 어렵고, 리액트 앱을 이해하기 쉽게 만드는 단방향 데이터 흐름을 깨뜨릴 수도 있습니다.

명령형 호출은 동작을 명확한 상태에서 UI로의 매핑에 모으기보다 이벤트 핸들러 여러 곳에 흩어 놓는 경향도 있어 유지 관리 비용을 높입니다.

선언형 API를 우선하고, 상호작용과 측정에만 명령형 API를 사용하십시오. 예를 들면 포커스, 스크롤, 애니메이션, 미디어 재생, 크기나 위치 읽기 등이 해당합니다.

어떤 것을 렌더링된 출력으로 매핑되는 상태로 모델링할 수 있다면 그렇게 하십시오. 깔끔한 상태 표현이 없는 순간적인 작업이라면 명령형 핸들이 적절합니다.

선언형 모달은 부모가 소유하는 isOpen 프롭을 기반으로 렌더링되므로 가시성이 상태에 의해 결정됩니다. 명령형 모달은 열기 및 닫기 메서드를 노출하고 자체 상태를 핸들 뒤에 숨깁니다.

선언형 방식이 리액트의 데이터 흐름에 더 잘 맞으며 일반적으로 선호됩니다. 반면 명령형 방식은 여러 이벤트 중심 코드에서 트리거해야 할 때 편리할 수 있습니다.

key 프롭을 변경하면 폼을 선언적으로 재설정할 수 있습니다. 그러면 리액트가 폼을 기본 상태로 새로 마운트합니다. 명령형 호출은 필요하지 않습니다.

명령형 대안은 핸들에 재설정 메서드를 노출하는 것입니다. key 방식이 수동으로 상태를 지우기보다 리액트의 조정에 의존하므로 더 깔끔한 경우가 많습니다.

Next.js 라우터는 이동, 대체, 미리 가져오기와 같은 명령형 메서드를 제공합니다. 예상되는 이동에 앞서 경로를 미리 가져오는 것은 렌더링 상태의 일부가 아니라 작업이므로 명령형 호출이 자연스럽게 맞습니다.

이는 작업이 특정 순간에 트리거되는 본질적인 동작일 때 관용적인 리액트 도구도 명령형 API를 사용한다는 것을 보여 줍니다.

공식 지침에서는 참조와 명령형 핸들을 선언형 모델에서 벗어나야 할 때 사용하는 탈출구로 설명합니다. 이것이 기능을 만드는 기본 방식은 아닙니다.

이러한 관점을 유지하면 과도한 사용을 막을 수 있습니다. 프롭과 상태로 동작을 깔끔하게 표현할 수 없다는 것을 확인한 후에만 탈출구를 사용하게 되기 때문입니다.

명령형 핸들을 추가하기 전에 다음을 물어보십시오. 이것을 UI에 매핑되는 상태로 표현할 수 있는가? 그렇다면 선언형 방식을 유지하십시오. 포커스, 스크롤, 측정, 애니메이션 또는 외부 라이브러리 작업인가? 그렇다면 명령형 방식이 정당화될 수 있습니다.

또한 외부에 제공하는 범위가 작고 문서화되어 있는지, 프롭으로 전달할 수 있는 데이터를 단순히 넘기기 위해 참조를 사용하고 있지는 않은지도 확인하십시오.

실제 애플리케이션은 두 접근 방식을 함께 사용합니다. 대부분의 로직은 선언형으로 유지하고, 명령형 핸들이 필요한 소수의 상호작용에만 얇은 계층을 둡니다.

이 균형을 잘 맞추면 코드의 예측 가능성과 테스트 가능성을 유지하면서도, 선언형 코드가 닿지 못하는 포커스 관리, 미디어 제어, 라이브러리 통합을 처리할 수 있습니다.

명령형 API가 적절한 도구인 경우를 선택해 보십시오.

리액트는 프롭과 상태로 구동되는 선언형 UI를 기본으로 하며, 이는 예측 가능하고 테스트하기 쉽습니다. 명령형 핸들은 포커스, 스크롤, 애니메이션, 측정, 외부 DOM 제어를 위한 탈출구로 존재합니다.

선언형 모달과 명령형 모달을 비교하고, 폼 재설정에는 key 프롭을 우선 사용하십시오. 리액트의 Next.js 라우터도 작업을 위해 명령형 메서드를 사용한다는 점을 기억하십시오. 명령형 계층은 작고 문서화되어 있어야 하며 사용 이유가 분명해야 합니다.