2024.07.22 프로그래머스 - React 동적 UI 개발 7

React 기반 동적 UI 개발 - 7

navigate 와 Location을 통한 Router간 state 전송

현재 진행중인 프로젝트에서

/cart 에서 주문을 완료 했을 때, /order 화면으로 navigate 전환을 수행하도록 되어 있는데

이때 해당 주문건에 대한 정보를 useState나 다른 방법으로 들고 가는 것 보다

React-Router에 포함된 기능인 useNavigate 객체를 사용하여 원하는 데이터를 갖고 navaigation 동작을 수행할 수 있다.

• /cart 에서 데이터를 넘겨주는 부분

    function Cart() { 
    //...
    const navigate = useNavigate()
      
     const handleOrder = () => {
        if (checkedItems.length === 0) {
          showAlert("주문할 상품을 선택해 주세요.");
          return;
        } else {
          // 주문 액션 -> 주문서 작성으로 데이터 전달
      
          const firstBookTitle = carts.find(
            (item) => item.book_id === checkedItems[0]
          )!.title;
      
          const orderData: Omit<OrderSheet, "delivery"> = {
            items: checkedItems,
            totalPrice: totalCartItemPrice,
            totalQuantity: totalCartItemQuantity,
            firstBookTitle,
          };
      			
    			// state 옵션에 원하는데이터를 입력하여 navigate 되는 페이지 간 정보를 전송할 수 있다.
          navigate("/order", { state: orderData });
        }
      };
      
    }
  

• /order 에서 데이터를 수신 하는 부분

    function Order() {
    	//...
    	const location = useLocation() // import from React-router
    	const orderDateFromCart = location.state
      	
    }
  

  위와 같이 React-Router의 기능중 useNavigate 와 useLocation 을 사용하여 페이지 전환 시

  유지해야할 데이터를 전송,수신 할 수 있다.

  해당 방법은 전역 상태를 업데이트하기에는 부담스러울 때 충분히 좋아 보인다.

React-Hook-Form 으로 폼 관련 로직 작성

• page / Order.tsx

우선 React-hook-form 에 대한 설치를 했다는 전제하에 진행!

useForm 을 통해서 react-hook-form 의 hook 을 사용할 수 있다.

 const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
  } = useForm<DeliveryForm>();

• register 는 form data 가 전달 될 때, 식별할 수 있게 해주는 key 역할을 한다.
• handlesubmit 은 이름 그대로 submit 작업이 수행 되었을 때 실행 되는 함수
• fortState 는 내부에 여러 옵션을 가지고 있는데, 그중 errors 를 통해 form data 전달 중 발생하는 error 에 대해 알 수 있다.
• setValue는 우리가 register를 통해 등록한 식별자에 값을 할당할 할수 있다.

register 사용

• form 의 data 요소 (input 등) 에 register를 통해 식별 시킨다.

    <form className="delivery">
      <fieldset>
        <label>주소</label>
        <div className="input">
          <InputText
            inputType="text"
            {...register("address", { required: true })}
          />
        </div>
        <FindAddressButton
          onCompleted={(address) => {
            setValue("address", address);
          }}
        />
      </fieldset>
      </form>
  

  • 내부에 required 와 같은 옵션 속성을 사용할 수 있다.

setValue 사용

• register로 식별된 식별자 엘리먼트의 value를 설정 한다.

     <FindAddressButton
        onCompleted={(address) => {
          setValue("address", address);
        }}
      />