Map으로 뿌리고 onClick, onChange에 따라 변화 주기

 

{Data.slice(0, 4).map((d: any, idx: any) => (
          <Box          
			key={`line_${d.name}`}       
            allData={d}           
            onChange={handleBtnClick}            
            onClick={handleIDX}            
            idx={idx}            
            isSelected={isBoxSelect[idx]}            
          />          
))}

<Box>는 대략 이렇게 돼있음-------------------

const handleBtnClick = (idx: any) => {
    onChange(allData);
    onClick(idx);
  };
const Box = () => {
<div> 등등등 솰라솰라
onClick={() => handleBtnClick(idx)}

---------------------------------------------------

 

------------------------------------------------

이런식으로 데이터를 맵으로 뿌려줄 때. (key는 map이라서 넣어주는 것. allData는 데이터. onChange는 자식 컴포넌트에서 클릭했을 때 받아오는 데이터, onClick은 자식 컴포넌트에서 클릭했을 때 받아오는 index값(idx), isSelected는 클릭에 따른 true와 false값을 받아오는 역할입니다.)

 

const [isBoxSelect, setBoxSelect] = useState<any>([false, false]);
const handleBtnClick = (data: any) => {
    onChange(data);
  };

const handleIDX = (IDX: any) => {
    console.log(IDX);
    const newArr = Array(Data.length).fill(false);
    newArr[IDX] = true;
    setBoxSelect(newArr);
  };

 

배열 newArr를 만들어서, 부모단에서 map을 통해 Box페이지로 보내준 idx값을 다시 부모단으로 올려보내서 newArr에 저장합니다. 그리고 index값에 따라 각각의 컴포넌트? 박스에 전송. 

<Box> 쪽에서는 아래와 같이 값을 받습니다. isSelected가 true 혹은 false이기에, 삼항연산자에 대입.

 

className={isSelected ? myStyle.background_click : myStyle.background}

 

이런 식으로요. true일때는 click에 따른 css값을 적용.

false는 뒤의 그냥 background 적용.

 

css를 통해 hover나 active로 그냥 적용하면 좋겠지만

react로 만들어놔야 하는 부분이 있기에.. 이렇게 만들었습니다.

 

그런 부분이 없었다면 그냥 background:active 새로 만들어두면 바로 끝