Context API 활용법

Context API 활용법 정리

context 생성하는 방법

export const TermsContext = createContext({
  essentialCheck: false,
  handleEssentialCheck: () => {},
})

const BusinessRegistration = () => {

  
  // 필수 약관 체크 여부
  const [essentialCheck, setEssentialCheck] = useState(false)


  const clickFunc = () => {
    console.log(essentialCheck)
  }

  const handleEssentialCheck = () => {
    setEssentialCheck((prev) => !prev)
  }

  return (
    <TermsContext.Provider value={{essentialCheck, handleEssentialCheck}}>
      <div className={styles.container}>
        <span className={styles.title}>아인잡에서 채용을 시작하세요!</span>
        <div className={styles.registrationDiv}>
          {/* 사업자등록 번호 */}
          <div className={styles.registrationNumDiv}>
            <div className={styles.numTop}>
              <span className={styles.numTitle}>사업자등록번호</span>
              <span className={styles.noNum}>사업자번호가없어요</span>
            </div>
            <input
              className={styles.numInput}
              type={'text'}
              placeholder={'사업자 등록번호 직접입력'}
            />
          </div>
          {/* 약관 */}
          <BusinessTerms/>
          <button onClick={clickFunc}>완료</button>
        </div>
      </div>
    </TermsContext.Provider>
  )
}

export default BusinessRegistration;

context 변경하는 부분

const { handleEssentialCheck } = useContext(TermsContext)

  const handleChecked = (callback: SetStateCallback) => {
    callback((prev) => !prev)
  }

  useEffect(() => {

    if(essential1 && essential2 && essential3){
      handleEssentialCheck()
    }else{
      handleEssentialCheck()
    }

  }, [essential1, essential2, essential3])