안녕하세요. 개인 프로젝트 진행 중 react의 리렌더링 흐름이 궁금하여 질문 남기게 되었습니다.
현재 Home이라는 부모 컴포넌트의 자식으로 Card와 BottomSheet가 있습니다.
1. 구현 의도
Card 를 클릭하면 BottomSheet가 올라와서 선택되어 있는 기존의 값이 radio checked로 선택되어 있습니다.
만약 목록 중 다른 값을 선택하면 BottomSheet가 닫히면서 Card값이 업데이트 됩니다.
(Card의 최초값은 선택되어 있습니다.)
여기서 BottomSheet가 선택되어 업데이트가 진행될 때 Card가 어떻게 상태변경이 이루어질 수 있나요?
동일한 부모 컴포넌트인 Home에 의해 Card, BottomSheet 모두 recoil 및 props가 리렌더링 되는 거라 이해했는데 정확한 흐름이 궁금합니다.
2. 현재 구현 상태 참고용
import data from './data.json'; //배열 data
import Card from './components/Card';
import BottomSheet from './components/BottomSheet';
const [selectedValue, setSelectedValue] = useRecoilState(selectState); //Card, BottomSheet에서 쓰이는 '선택된 값'을 recoil로 전역 사용
useEffect(() => {
//data값 가공처리
setSelectedValue(data값 가공);
},[setSelectedValue]);
<div>
//카드는 총 4개가 있습니다.
{item.map((value, idx) => (
<div>
<Card key={idx} value={value} selectedValue={selectedValue[idx]} 그외 필요 props들 /> //data값을 가공하여 props로 넘기고 있습니다.
</div>
))}
{카드 선택 시 바텀시트 열리는 조건식 &&(
//카드마다 바텀시트의 데이터 목록이 다릅니다.
<BottomSheet items={items} selectedValue={selectedValue[값]} 그외 필요 props들 /> //data값을 가공하여 props로 넘기고 있습니다.
)}
</div>
//Card.js
function Card({ items, selectedValue, onSelected }) {
return(
<div>
<button onClick={onSelected}>
<img src={require(`../icon/${selectedValue.icon}`)} alt={selectedValue.label} />
{selectedValue.label}
</button>
</div>
);
}
//BottomSheet.js
function BottomSheet({ currentSelection, label, items, handleCardClick, selectedValue, onClose }) {
const handleRadioChange = (currentSelection, item) => {
//새로 선택한 값으로 변경하는 함수
}
return(
<div>
{onClose && (
<h3>{label}</h3>
{items.map((item) => (
<OptionLabel key={item.key}>
<RadioInput type="radio" value={item.key} onChange={() => handleRadioChange(currentSelection, item)} checked={selectedValue.key === item.key} />
{item.label}
</OptionLabel>
))}
<div onClick={onClose}></div>
)}
</div>
);
}
