하위컴포넌트에서 상위컴포넌트로 state 보내는 법

const onClick = (e) => {
    console.log('click ', e.key);
    if (e.key === 'tab2') {
      setShowMenu(false);
      onClickFunc('2');
    } else if (e.key === 'cowinfo') {
      ZsetNavigateValue('menucowinfo');
      navigate('/menucowinfo/' + inSeq);
    } else if (e.key === 'milkInfo') {
      ZsetNavigateValue('menu10');
      navigate('/menu10/' + inSeq);
    } else if (e.key === 'Feedmilk') {
      ZsetNavigateValue('report400');
      navigate('/report400/' + inOwnerNumber);
    } else if (e.key === 'Exit') {
      setShowMenu(false);
    }
  };

return(

{show === true && (
        <Menu
          className='daily_menu'
          style={{
            zIndex: 9999,
            position: 'fixed',
            left: posi.x + 30,
            top: posi.y - 60,
            color: 'green',
            fontSize: '13px',
          }}
          onClick={onClick}
          items={items}
        />
      )}
      )

컴포넌트

 

  const handleExit = (key) => {
    console.log('key', key);
    setShowMenu(key);
  };
 
 <ShortcutMenu
        show={showMenu}
        setShowMenu={(key) => handleExit(key)}
        posi={posi}
        inSeq={inSeq}
        inOwnerNumber={inOwnerNumber}
        title={props.title}
        onClickFunc={(key) => {
          props?.onChangeFunc(key);
        }}
      />

상위컴포넌트

 

상위에서 props로 key를 받을 수 있게 함수(useState(setState)를 인자로 보내준다.

하위에서는 그 함수를 사용하여 setState값을 상위 컴포넌트에 전달해 줄 수가 있다.