단아산보

리액트에서 페이지 로드 후 바로 실행하기 위해서는 useEffect 에 정의해 준다. vue나 일반적인 javascript 라면 mouted, ready 에 선언해야 할 부분을리액트에서는 useEffect 로 함수마다 정의해도 되고 함수를모아서 호출하는 방식도 가능하다. 

아래 예시는 api 호출 후 바로 버튼을 숨김처리 하는 예시다. 사용자 입장에서는 화면에 진입했을때 api 호출 후 나오는 부분이라 페이지에서 바로 확인이 가능하다.   

import React, { useEffect, useState, useCallback } from 'react';

const YourComponent = () => {
  const [isButtonDisabled, setIsButtonDisabled] = useState(true); 

  const user_seq = 'your_user_seq'; // 사용자 시퀀스
  const cont_seq = 'your_cont_seq'; // 콘텐츠 시퀀스

  const checkUserPlay = useCallback(() => {
    get(`/content/userAgeChk?user_seq=${user_seq}`)
      .then((response) => {
        if (response.messageCode === 200) {
          const { cnt } = response.data;
          if (cnt > 0) {
          	setModalReview(true);
          } else {
          	setModalCheck(true);
          }
        }
      })
      .catch((error) => console.error(error));
  }, [user_seq, cont_seq]); // 의존성 배열에 필요한 값 추가

  useEffect(() => {
    checkUserPlay();
  }, [checkUserPlay]); // 의존성 배열에 checkUserPlay 추가

  return (
    <div>
      <button disabled={isButtonDisabled}>버튼 텍스트</button> 
    </div>
  );
};

export default YourComponent;

나이 계산은 은근히 스크립트로 계산 하려면 코드를 많이 써야 한다. sql 쿼리문에서 나이 계산이 되어야 하는 경우도 종종 있어서 쿼리문에서 바로 뽑아서 쓸수 있는 코드 예시를 공유해본다. 

회원코드값으로 user 테이블에서 생년월일 필드로 만나이를 계산하는 공식이다. 

mysql 쿼리문에서 나이 계산하기

SELECT
    DATE_FORMAT(NOW(), '%Y') - DATE_FORMAT(CONCAT(birth_year, '-', birth_month, '-', birth_day), '%Y') - 
    (DATE_FORMAT(NOW(), '00-%m-%d') < DATE_FORMAT(CONCAT(birth_year, '-', birth_month, '-', birth_day), '00-%m-%d')) AS age
FROM
    user
WHERE
    user_seq = #{user_seq};

리액트에서 나이 계산 하기 

import React, { useState } from 'react';

const AgeCalculator = () => {
  const [birthDate, setBirthDate] = useState('');
  const [age, setAge] = useState(null);

  const calculateAge = (dateString) => {
    const birthDate = new Date(dateString); // YYYY-MM-DD 형태의 문자열을 Date 객체로 변환
    const today = new Date();

    // 만 나이 계산
    let calculatedAge = today.getFullYear() - birthDate.getFullYear();
    if (today < new Date(today.getFullYear(), birthDate.getMonth(), birthDate.getDate())) {
      calculatedAge--;
    }
    
    return calculatedAge;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setAge(calculateAge(birthDate));
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="date" // HTML5의 date 입력 형식 사용
          value={birthDate}
          onChange={(e) => setBirthDate(e.target.value)}
        />
        <button type="submit">나이 계산하기</button>
      </form>
      {age !== null && <p>만 나이: {age}세</p>}
    </div>
  );
};

export default AgeCalculator;

정산내역을 작업하다 보면 추가 금액을 입력하는 경우가 종종 생긴다. 전산으로 모두 계산하지만 추가 비용을 지불해야 한다던지 추가 비용을 차감해야 한다던지 하는 예외적인 상황은 별도로 입력해주는 폼을 추가 해주고 db 에 저장해 주는것이 좋다. 

<form action="process.php" method="post">
    <td>
        <select name="operation" id="operation" style="width:60px;">
            <option value="+">+</option>
            <option value="-">-</option>
        </select>
        <input type="number" name="extra_amount" class="w180" required title="금액">원
        <button type="submit">전송</button>
    </td>
</form>

select box 에서 기호를 선택하고 입력하는 방식으로 구현 한다면 태그를 작성하고 post 로 받는 화면은 아래와 같이 floatval 로 변환해 주어야 마이너스로 입력이 된다. db 에 필드도 float 로 잡아 주어야 한다. 

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $operation = $_POST['operation'];
    $amount = $_POST['extra_amount'];

    // 금액에 + 또는 - 기호 붙이기
    $extra_amount = ($operation === '-') ? -floatval($amount) : floatval($amount); // 입력값을 float으로 변환

    // 선생님 정산 테이블 업데이트
    $paramArray = [];   
    $paramArray = compact('extra_amount'); 
    $paramArray["payment"] = $total_amount - $tax + $extra_amount; 

    // 데이터베이스 업데이트
    $rsArry = $this->UpdateData("reservation_settle_teacher", $paramArray, $where_com);
}