[react] 하위 컴포넌트별로 특정 요소 on/off 설정

[react] 하위 컴포넌트별로 특정 요소 on/off 설정

 

하위 컴포넌트별로 버튼과 같은 특정 요소

on/off 설정입니다. 

 

화면구현

 

구현내용 

• 상위와 하위 컴포넌트(oneday card)로 구성된다.
• 더보기 아이콘 클릭시 해당 카드의 팝업 버튼이 오픈된다
•  토글 기능으로 한번 클릭시 버튼이 없어진다
• 클릭한 날짜의 버튼만 나오고, 다른 날짜의 버튼들은 사라진다.

 

자식 컴포넌트에서만 버튼 on/off 기능을 구현하였더니, 4번 기능이 작동하지 않았습니다.
결국 상위와의 코드 연결을 통해 4번을 구현하였습니다. 

 

구현코드

부모요소

 const [chosenDay, setChosenDay] = useState(null) //누른 카드의 날짜
 const onMatchCardDay = (day) => setChosenDay(day) //하위에 전달할 함수

return ...
<div className='space-y-4 p-4'>
	{filteredLits && filteredLits.length > 0 ? filteredLits.map((data, idx) =>
       <div key={idx}>
       		<OnedayCard data={data} chosenDay={chosenDay} onMatchCardDay={onMatchCardDay} />
       </div>
		) : '해당 날짜의 데이터가 없습니다.'}
</div>

 

자식요소

자식 요소 안에서만 on/off 연결을 하면 해당 카드 동작만 가능하고,
다른 날짜의 카드의 상태를 알수가 없어,
상위에서 chosenDay를 통해 클릭한 카드 날짜를 저장하여 하위에서 받고,
하위의 카드 날짜가 chosenDay와 일치할 경우에만 버튼을 on, 나머지는  off 처리를 하였습니다.

 const [openBtn, setOpenBtn] = useState(false)
 const onOpenEditBtn = (no) => onMatchCardDay(no)
 const onCloseEditBtn = () => onMatchCardDay(null) //off 기능-chosenDay 없애주기

    useEffect(() => {
        if (chosenDay === data.day) setOpenBtn(true)
        else setOpenBtn(false)
    }, [openBtn, chosenDay])
    
return ...
<ul onClick={openBtn ? onCloseEditBtn : null} className='flex justify-between mb-4'>
               ...
                <img onClick={() => onOpenEditBtn(data.day)} src='./images/mobile/icon/three_dot_vertical.svg' alt='더보기 아이콘' />
                {openBtn && (data.day === chosenDay) && <EditableBtn onActionUp={onEdit} onActionDown={onDelete} titleUp={'수정하기'} titleDown={'삭제하기'} location={'absolute'} />}
            </ul>