React의 experimental_useTransition: 애플리케이션 전환 효과 마스터하기

빠르게 발전하는 웹 개발 세계에서 부드럽고 반응성이 뛰어난 사용자 경험을 제공하는 것은 매우 중요합니다. 사용자들은 원활한 상호작용을 기대하며, 인지되는 지연이나 랙은 좌절감과 이탈로 이어질 수 있습니다. 사용자 인터페이스 구축을 위한 선도적인 자바스크립트 라이브러리인 React는 이러한 과제를 해결하기 위한 강력한 도구들을 제공합니다. 그중 하나가 experimental_useTransition 훅이며, 이는 전환을 관리하고 애플리케이션 성능을 향상시키는 데 중요한 구성 요소입니다.

전환의 중요성 이해하기

전환은 긍정적인 사용자 경험의 기본입니다. 이는 사용자를 애플리케이션 내에서 안내하고, 피드백과 연속성을 제공하는 시각적 및 상호작용적 단서입니다. 효과적으로 구현될 경우, 전환은 다음과 같은 이점을 가질 수 있습니다:

• 인지되는 성능을 개선하여 애플리케이션이 더 빠르고 반응적으로 느껴지게 합니다.
• 시각적 피드백을 제공하여 사용자 행동을 확인하고 주의를 유도합니다.
• 애플리케이션의 전반적인 미적 매력을 향상시켜 더 매력적으로 만듭니다.

반대로, 잘못 관리된 전환은 다음과 같은 결과를 초래할 수 있습니다:

• 거슬리고 반응이 없는 사용자 경험.
• 좌절감과 애플리케이션 품질에 대한 부정적인 인식.
• 이탈률 증가 및 사용자 참여 감소.

experimental_useTransition 소개

이름에서 알 수 있듯이, experimental_useTransition 훅은 아직 개발 중이며 실험적인 기능으로 간주됩니다. 이는 향후 React 릴리스에서 API가 변경될 수 있음을 의미합니다. 그러나 이 훅은 업데이트를 전환으로 표시하여 React가 해당 업데이트의 우선순위를 어떻게 정할지 더 많은 제어권을 가질 수 있게 해주는 강력한 메커니즘을 제공합니다.

구체적으로, experimental_useTransition는 다음과 같은 작업을 돕습니다:

• 업데이트 우선순위 지정: 긴급한 업데이트(예: 타이핑과 같은 직접적인 사용자 입력)와 덜 긴급한 업데이트(예: 데이터 가져오기 또는 복잡한 UI 변경 렌더링)를 구분합니다.
• UI 차단 방지: 덜 긴급한 업데이트가 긴급한 업데이트를 차단하지 않도록 보장하여, 집약적인 백그라운드 프로세스 중에도 UI 반응성을 유지합니다.
• 피드백 제공: 사용자에게 전환이 진행 중임을 알릴 수 있습니다(예: 로딩 표시기).

experimental_useTransition의 작동 방식

experimental_useTransition 훅은 두 개의 요소를 포함하는 배열을 반환합니다:

1. isPending: 전환이 현재 진행 중인지 여부를 나타내는 불리언 값입니다.
2. startTransition: 상태 업데이트를 전환으로 감쌀 수 있게 해주는 함수입니다.

기본적인 예시는 다음과 같습니다:

            import { experimental_useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = experimental_useTransition();
  const [data, setData] = React.useState(null);

  const handleClick = () => {
    startTransition(() => {
      // Simulate fetching data
      setTimeout(() => {
        setData({ message: 'Data loaded!' });
      }, 2000);
    });
  };

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Load Data'}
      </button>
      {data && <p>{data.message}</p>}
    </div>
  );
}

            

              
                Copy
              
            
          

이 예시에서:

• startTransition은 데이터 가져오기를 시뮬레이션하는 상태 업데이트를 감쌉니다.
• isPending은 전환이 진행되는 동안 버튼을 비활성화하고 '로딩 중...' 메시지를 표시하는 데 사용됩니다.

실용적인 사용 사례 및 예제

1. 뷰 간 이동

여행 예약 플랫폼과 같은 웹 애플리케이션을 상상해 보세요. 사용자가 검색 결과 목록에서 항공편 상세 페이지를 보기 위해 링크를 클릭할 때, 갑작스러운 페이지 새로고침 대신 부드러운 전환을 보여주고 싶을 것입니다. experimental_useTransition을 사용하여 이 전환을 관리할 수 있습니다:

            
import { experimental_useTransition } from 'react';
import { Link, useLocation } from 'react-router-dom'; // Or your preferred router

function FlightSearchResults() {
  const [isPending, startTransition] = experimental_useTransition();
  const location = useLocation();
  const [flightDetails, setFlightDetails] = React.useState(null);

  // Simulate fetching flight details based on the route parameter (e.g., flight ID)
  React.useEffect(() => {
    if (!location.pathname.startsWith('/flight/')) {
      setFlightDetails(null); // Reset when navigating away
      return;
    }
    const flightId = location.pathname.split('/').pop();
    startTransition(() => {
      // Simulate API call - replace with your actual data fetching
      setTimeout(() => {
        setFlightDetails({ id: flightId, airline: 'Example Airlines', origin: 'JFK', destination: 'LHR' });
      }, 1000);
    });
  }, [location.pathname, startTransition]);

  return (
    <div>
      <h2>Flight Search Results</h2>
      {/* Display flight search results here */}
      <ul>
        <li>
          <Link to="/flight/1234">Flight 1234 (JFK to LHR)</Link>
        </li>
      </ul>
      {isPending && <p>Loading flight details...</p>}
      {flightDetails && (
        <div>
          <h3>Flight Details</h3>
          <p>Airline: {flightDetails.airline}</p>
          <p>Origin: {flightDetails.origin}</p>
          <p>Destination: {flightDetails.destination}</p>
        </div>
      )}
    </div>
  );
}

export default FlightSearchResults;

            

              
                Copy
              
            
          

이 예제에서는 사용자가 항공편 링크를 클릭하면 startTransition이 항공편 세부 정보를 가져오는 비동기 작업을 감싸는 데 사용됩니다. 세부 정보가 로드되는 동안 '로딩 중...' 메시지가 표시되어 사용자에게 피드백을 제공합니다. 이는 데이터 가져오기 프로세스 중에 UI가 응답하지 않는 것처럼 보이는 것을 방지합니다. 이 접근 방식은 전자상거래 스토어의 제품 페이지 간 이동에서부터 소셜 미디어 프로필의 섹션 탐색에 이르기까지 모든 네비게이션 사용 사례에 적용될 수 있습니다.

2. 데이터 필터링 및 정렬

사용자가 다양한 기준(예: 가격, 브랜드, 사이즈)에 따라 제품을 필터링하고 정렬할 수 있는 전자상거래 웹사이트를 생각해 보세요. 필터나 정렬 옵션을 적용하는 것은 종종 데이터를 다시 가져오거나 재처리해야 합니다. experimental_useTransition를 사용하면 이 상호작용이 훨씬 더 부드럽게 느껴질 수 있습니다:

            
import { experimental_useTransition } from 'react';

function ProductList() {
  const [isPending, startTransition] = experimental_useTransition();
  const [products, setProducts] = React.useState([]);
  const [filters, setFilters] = React.useState({});

  // Simulate fetching products with filters and sorting - replace with actual API call
  React.useEffect(() => {
    startTransition(() => {
      // Simulate an API call to fetch filtered products
      setTimeout(() => {
        const filteredProducts = // ... your filtering logic based on 'filters'
        setProducts(filteredProducts);
      }, 1000);
    });
  }, [filters, startTransition]);

  const handleFilterChange = (newFilters) => {
    setFilters(newFilters);
  };

  return (
    <div>
      <h2>Product List</h2>
      {/* Filter controls (e.g., select elements, checkboxes) */}
      <FilterControls onChange={handleFilterChange} />
      {isPending && <p>Loading products...</p>}
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name} - ${product.price}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

사용자가 필터(예: 가격 범위 선택)를 변경하면 startTransition이 products 상태 업데이트를 감쌉니다. 이를 통해 필터링된 데이터를 가져오는 동안 UI가 반응성을 유지할 수 있습니다. 로딩 표시기(<p>제품 로딩 중...</p>)는 전환 중에 사용자에게 피드백을 제공합니다. 이 접근 방식은 데이터 시각화 대시보드와 같이 사용자 상호작용에 기반하여 데이터를 다시 가져오거나 재처리해야 하는 모든 인터페이스에 적용될 수 있습니다.

3. 낙관적 업데이트 구현

낙관적 업데이트는 사용자의 행동이 성공할 것이라고 가정하고 UI를 즉시 업데이트한 다음, 나중에 서버와 상태를 일치시키는 기술입니다. 이는 특히 데이터 저장이나 게시물 좋아요와 같은 작업에서 애플리케이션이 놀랍도록 반응적으로 느껴지게 할 수 있습니다. experimental_useTransition는 낙관적 업데이트와 서버 확인 사이의 전환을 관리하는 데 사용될 수 있습니다:

            
import { experimental_useTransition } from 'react';

function LikeButton({ postId }) {
  const [isPending, startTransition] = experimental_useTransition();
  const [isLiked, setIsLiked] = React.useState(false);

  const handleLikeClick = () => {
    startTransition(() => {
      // Optimistically update the UI
      setIsLiked(!isLiked);

      // Simulate a network request to update the like status on the server
      setTimeout(() => {
        // Replace this with your actual API call
        // If the server update fails, you would revert the UI change here (e.g., setIsLiked(isLiked))
      }, 1000);
    });
  };

  return (
    <button onClick={handleLikeClick} disabled={isPending}>
      {isPending ? 'Liking...' : (isLiked ? 'Unlike' : 'Like')}
    </button>
  );
}

            

              
                Copy
              
            
          

이 예제에서는 사용자가 '좋아요' 버튼을 클릭하면 UI가 즉시 좋아요 상태를 반영하도록 업데이트됩니다. 그런 다음 startTransition 함수가 서버에 좋아요 상태를 보내는 로직을 감쌉니다. 서버 요청이 진행 중인 동안 UI는 반응성을 유지하며, 버튼에는 '좋아요 처리 중...' 메시지가 표시됩니다. 이는 더 빠르고 매력적인 사용자 경험을 만듭니다. 이는 댓글 게시, 양식 데이터 저장 및 비동기 서버 통신을 포함하는 기타 모든 사용자 작업에 적용될 수 있습니다.

모범 사례 및 고려 사항

• 신중하게 사용하기: experimental_useTransition을 남용하지 마세요. 비동기 작업이나 메인 스레드를 차단하고 싶지 않은 복잡한 UI 업데이트를 포함하는 전환에 가장 유용합니다. 코드를 지나치게 복잡하게 만들지 않도록 신중하게 적용하세요.
• 명확한 피드백 제공: 전환 중에는 항상 사용자에게 시각적 피드백을 제공하세요. 로딩 표시기, 진행률 표시줄 또는 기타 시각적 신호를 사용하여 애플리케이션이 작동 중임을 사용자에게 알리세요. 이는 신뢰를 구축하고 느리다는 인식을 줄여줍니다.
• 오류 처리: 전환 내에서 비동기 작업을 다룰 때는 강력한 오류 처리 로직을 구현하세요. 작업이 실패하면(예: 네트워크 요청 시간 초과), 낙관적으로 업데이트된 UI를 되돌리거나 사용자에게 적절한 오류 메시지를 표시해야 합니다. 이는 신뢰할 수 있는 사용자 경험에 중요합니다.
• 문맥 고려: experimental_useTransition을 사용하는 문맥을 이해하세요. 예를 들어, 여러 동시 작업이 있는 복잡한 애플리케이션에서는 의도하지 않은 부작용을 피하기 위해 전환의 범위를 신중하게 관리해야 할 수 있습니다. React 문서를 주의 깊게 검토하세요.
• 성능 모니터링: 전환의 성능을 모니터링하세요. 브라우저 개발자 도구(예: Chrome DevTools)를 사용하여 성능 병목 현상이나 최적화할 부분을 식별하세요. 전환이 완료되는 데 걸리는 시간을 측정하세요. 이는 구현을 개선하는 데 도움이 됩니다.
• 접근성: 장애가 있는 사용자를 포함한 모든 사용자가 전환에 접근할 수 있도록 보장하세요. 키보드 네비게이션 및 스크린 리더 지원과 같은 애플리케이션과 상호작용할 수 있는 대체 방법을 제공하여 완전히 포용적인 경험을 보장하세요.
• 동시성 및 동시성 제한: 전환은 동시에 실행될 수 있다는 점을 인지하세요. 더 높은 우선순위의 업데이트가 들어오면 React가 전환을 중단할 수 있습니다. 이는 반응성에 도움이 될 수 있지만, 전환이 서로 의존적인 경우 잠재적인 경쟁 조건을 고려해야 할 수 있습니다.
• 문서화 및 주석: experimental_useTransition 사용법을 명확하게 문서화하세요. 사용 이유와 관련된 고려 사항이나 절충안을 설명하세요. 좋은 주석은 특히 크거나 복잡한 프로젝트에서 코드를 이해하고 유지 관리하기 쉽게 만듭니다.

글로벌 관점: 문화권별 전환 관리

좋은 전환 관리의 원칙은 위치나 문화에 관계없이 보편적으로 적용됩니다. 그러나 구체적인 구현 및 시각적 신호는 현지 선호도에 맞게 조정해야 할 수 있습니다. 글로벌 관점이 전환 디자인에 어떻게 영향을 미칠 수 있는지 알아보겠습니다:

• 현지화: 전환 내의 모든 텍스트가 사용자가 선호하는 언어로 번역되었는지 확인하세요. 애니메이션과 전환을 디자인할 때 언어 방향성(예: 왼쪽에서 오른쪽 vs. 오른쪽에서 왼쪽)의 차이를 고려하세요.
• 문화적 민감성: 특정 문화에서 불쾌하거나 부적절할 수 있는 시각적 요소나 애니메이션 사용을 피하세요. 대상 고객의 문화적 규범을 조사하고 그에 따라 디자인을 조정하세요. 색상 팔레트, 애니메이션 스타일, 이미지는 문화적 민감성을 존중해야 합니다.
• 네트워크 조건: 여러 지역의 일반적인 네트워크 속도를 고려하세요. 인터넷 연결이 느린 지역에서도 부드러운 전환을 보장하도록 애플리케이션 성능을 최적화하세요. 네트워크 스로틀링 도구를 사용하여 다양한 네트워크 조건에서 애플리케이션을 테스트하세요.
• 모바일 우선 접근 방식: 모바일 기기를 염두에 두고 전환을 디자인하세요. 터치 상호작용에 맞게 애플리케이션을 최적화하고 전환이 반응형이며 다양한 화면 크기에서 잘 작동하는지 확인하세요. 전 세계적으로 모바일 기기 사용이 급증하고 있습니다.
• 접근성: 전환이 접근성에 부정적인 영향을 미치지 않도록 하세요. 키보드 네비게이션 및 스크린 리더 지원과 같은 애플리케이션과 상호작용할 수 있는 대체 방법을 제공하여 완전히 포용적인 경험을 보장하세요. 동작 줄이기 옵션과 같은 사용자 선호도를 고려하세요.
• 사용자 테스트: 다양한 문화적 배경을 가진 개인들과 사용자 테스트를 수행하여 전환에 대한 피드백을 수집하세요. 이는 해결해야 할 사용성 문제나 문화적 민감성을 식별하는 데 도움이 됩니다. 사용자 피드백은 성공적인 글로벌 제품에 필수적입니다.

예를 들어, 일본 사용자를 대상으로 하는 여행 예약 웹사이트는 일본 디자인 원칙을 반영하여 미묘하고 우아한 애니메이션과 전환을 우선시할 수 있습니다. 반대로, 브라질 사용자를 대상으로 하는 유사한 사이트는 브라질의 문화적 선호도에 맞는 더 생생한 색상과 역동적인 애니메이션을 사용할 수 있습니다. 이는 예시일 뿐이며, 철저한 사용자 조사와 현지 문맥에 대한 고려가 핵심입니다.

세부적인 성능 최적화

반응성의 즉각적인 이점 외에도, experimental_useTransition 사용을 포함한 효과적인 전환 관리는 전반적인 애플리케이션 성능에 크게 기여합니다. 그 방법은 다음과 같습니다:

• 블로킹 시간 감소: React가 업데이트의 우선순위를 정하도록 허용함으로써, 전환은 메인 스레드가 차단되는 시간을 최소화할 수 있습니다. 이는 특히 데이터 가져오기나 복잡한 UI 렌더링과 같은 계산 집약적인 작업 중에 부드러운 사용자 경험을 유지하는 데 중요합니다.
• 효율적인 렌더링: experimental_useTransition을 사용하면 불필요한 UI 리렌더링을 피할 수 있습니다. 예를 들어, 큰 데이터셋을 필터링할 때, 필터링이 백그라운드에서 수행되는 동안 보이는 데이터를 업데이트하기 위해 전환을 트리거할 수 있습니다. 이는 각 중간 필터 변경 시 전체 컴포넌트 트리를 리렌더링하는 것을 방지하여 성능을 향상시킵니다.
• 인지 성능 향상: 작업의 실제 로딩 시간이 동일하더라도, 전환을 사용하면 애플리케이션이 더 빠르게 느껴지게 만들 수 있습니다. 시각적 피드백을 제공하고 UI 반응성을 유지함으로써, 사용자는 애플리케이션이 더 성능이 좋다고 인식합니다.
• 쟁크(Jank) 감소: 쟁크는 UI에서 발생하는 시각적인 끊김 현상이나 프레임 드롭을 의미합니다. 전환은 덜 중요한 업데이트에 의해 중요한 UI 업데이트가 지연되지 않도록 보장하여 쟁크를 완화하는 데 도움이 될 수 있습니다. 이는 우선순위 렌더링을 통해 달성됩니다.
• 최적화된 번들 크기: experimental_useTransition 자체는 번들 크기에 직접적인 영향을 미치지 않지만, 그 사용은 간접적으로 더 작은 번들에 기여하는 관행을 장려합니다. 예를 들어, UI 업데이트를 데이터 가져오기 작업과 분리함으로써 각 컴포넌트를 렌더링하는 데 필요한 코드의 양을 최소화하고 번들을 작게 유지할 수 있습니다.
• 지연 로딩(Lazy Loading) 통합: 성능을 더욱 최적화하기 위해 `experimental_useTransition`을 코드 스플리팅 및 지연 로딩과 같은 기술과 결합하세요. 지연 로딩은 필수적이지 않은 컴포넌트의 로딩을 필요할 때까지 지연시켜 초기 로드 시간을 줄이고 전환 중 반응성을 향상시킬 수 있습니다.

접근성 고려 사항

접근성은 사용자 친화적이고 포용적인 웹 애플리케이션을 만드는 데 있어 중요한 측면입니다. 전환을 구현할 때는 항상 접근성을 염두에 두어야 합니다. 다음은 몇 가지 주요 고려 사항입니다:

• 대안 제공: 애니메이션이나 전환을 보고 싶어하지 않는 사용자(예: 전정 장애가 있는 사용자)를 위해 비활성화할 수 있는 방법을 제공하세요. 애니메이션과 전환을 비활성화하는 "동작 줄이기" 설정을 제공하여 더 접근성 높은 경험을 제공하세요.
• 키보드 네비게이션: 전환에 관련된 모든 요소가 키보드 네비게이션을 통해 접근 가능하도록 보장하세요. 이는 마우스나 다른 포인팅 장치를 사용할 수 없는 사용자에게 필수적입니다. 전환 중에 포커스가 올바르게 관리되는지 확인하세요.
• 스크린 리더 호환성: 스크린 리더가 전환 중에 발생하는 변경 사항을 정확하게 안내하는지 확인하세요. 적절한 ARIA 속성(예: aria-live)을 사용하여 스크린 리더 사용자에게 변경 사항을 전달하세요. 정보가 적절하게 업데이트되는지 확인하세요.
• 명확한 피드백: 전환 중에 무슨 일이 일어나고 있는지 설명하기 위해 명확하고 간결한 언어를 사용하세요. 사용자를 혼란스럽게 할 수 있는 전문 용어나 기술 용어를 피하세요. 텍스트 레이블과 다른 시각적 신호를 사용하세요.
• 충분한 대비: 전환에 사용되는 색상이 배경과 충분한 대비를 이루는지, 특히 텍스트와 상호작용 요소에 대해 확인하세요. 색상 대비에 대한 WCAG 가이드라인을 따르세요. 대비는 가독성을 향상시킵니다.
• 사용자 제어: 사용자가 전환의 지속 시간과 속도를 제어할 수 있도록 하세요. 이는 인지 장애나 기타 장애가 있는 사용자에게 유익할 수 있습니다. 전환 속도를 조절할 수 있는 설정을 제공하세요.
• 보조 기술로 테스트: 스크린 리더, 음성 인식 소프트웨어, 키보드 에뮬레이터 등 다양한 보조 기술로 전환을 테스트하여 모든 사용자가 접근할 수 있도록 보장하세요. 테스트는 기능성을 보장합니다.

접근성 모범 사례를 구현하면 능력에 관계없이 모든 사람의 사용자 경험이 향상됩니다. 디자인 및 개발 과정 전반에 걸쳐 접근성을 고려함으로써 더 포용적이고 사용자 친화적인 웹 애플리케이션을 만들 수 있습니다.

고급 사용 사례 및 기법

• 동시성(Concurrency)과의 결합: 동시 렌더링을 포함한 React의 실험적 기능들은 experimental_useTransition과 원활하게 작동합니다. 이를 통해 React가 긴급도에 따라 렌더링 작업을 중단하고 우선순위를 정할 수 있게 하여 더 반응성 있고 효율적인 업데이트가 가능해집니다.
• 전환 그룹(Transition Groups): 여러 동시 전환이 있는 복잡한 애플리케이션에서는 전환의 순서와 동기화를 관리하기 위해 전환 그룹이나 라이브러리 사용을 고려하세요. 이러한 라이브러리들은 여러 요소가 동시에 화면에 들어오거나 나가는 애니메이션과 같은 전환을 조율하여 더 정교한 효과를 만드는 데 도움이 됩니다.
• 디바운싱(Debouncing) 및 스로틀링(Throttling): 전환을 트리거하는 사용자 입력(예: 검색 입력)을 다룰 때, 업데이트 빈도를 제한하기 위해 디바운싱이나 스로틀링 기법을 사용하는 것을 고려하세요. 이는 불필요한 리렌더링을 방지하고 성능을 향상시키는 데 도움이 됩니다. 이러한 기법을 사용하여 성능 문제를 예방하세요.
• 전환을 위한 커스텀 훅(Custom Hooks): 재사용성을 위해 전환 로직을 커스텀 훅으로 캡슐화하세요. 이는 코드 구성을 촉진하고 애플리케이션의 여러 컴포넌트에 걸쳐 전환 관리를 적용하기 쉽게 만듭니다. 캡슐화는 유지보수성을 향상시킵니다.
• 서버 사이드 렌더링 (SSR): SSR을 사용할 때, 초기 렌더링 동안 전환을 관리하는 방법을 신중하게 고려하세요. 초기 서버 렌더링 콘텐츠가 신속하게 표시되고 클라이언트 사이드 자바스크립트가 제어권을 가져간 후 전환이 부드럽게 적용되도록 하세요. SSR은 사용자 경험을 향상시킵니다.
• 라이브러리와의 통합: experimental_useTransition을 Framer Motion이나 React Spring과 같은 애니메이션 라이브러리와 통합하여 더 고급스럽고 시각적으로 매력적인 전환을 만드세요. 이는 복잡한 애니메이션을 만드는 데 도움이 될 것입니다.

결론

experimental_useTransition는 React 애플리케이션에서 전환을 관리하고 전반적인 사용자 경험을 개선하기 위한 강력한 도구입니다. 그 목적을 이해하고, 모범 사례를 적용하며, 글로벌 관점을 고려함으로써 전 세계 사용자를 위해 더 빠르고, 반응성이 뛰어나며, 매력적인 애플리케이션을 만들 수 있습니다. React가 계속 발전함에 따라, 이러한 실험적 기능에 대한 정보를 계속 파악하는 것은 현대적이고 성능이 뛰어난 웹 애플리케이션을 구축하는 데 중요합니다. 전환의 힘을 받아들여 여러분의 웹 애플리케이션을 빛나게 만드세요!

전환을 구현할 때는 항상 사용자 경험과 접근성을 우선시해야 한다는 점을 기억하세요. 전환을 최적화하는 데 투자한 노력은 사용자 만족도와 참여도 증가라는 형태로 보상받을 것입니다.