[리액트] map 반복문으로 만든 자식 컴포넌트의 함수 작동 (useRef 배열)

map을 이용하여 여러 개의 자식 컴포넌트를 만들었지만, 특정 자식 컴포넌트만 변화를 주고 싶을 때가 있습니다.

예를 들어, map을 이용하여 10개의 자식 컴포넌트를 만들었지만, 2번째에 해당하는 자식 컴포넌트만 뷰를 바꾸거나 해당 자식의 함수를 바꾸고 싶을 때 useRef를 이용하면 됩니다.

하지만 단일 컴포넌트를 사용하는 것처럼 했다가는, 원하는 자식만 골라 작동하지 못할 겁니다.

이를 해결하기 위하여 useRef({})에 배열을 만들고

map 반복문에 ref={(element) => myRefs.current[i] = element}를 설정하면 됩니다.

파일 구조

 

App.js 코드

import "./styles.css";
import Child from "./child.js";
import { useState, useRef } from "react";

export default function App() {
  const myRefs = useRef({});
  let [Items, setItems] = useState([0,1,2,3,4,5]);
  let [value, setvalue] = useState();

  let ChangeChild = (Idx) =>{
    myRefs.current[value].ChangeChild(value);
  }
  const onChange = (e) => {
    const { value } = e.target  
    setvalue(value);   
  }

  return (
    <div className="App" >
      <h1>반복문 자식 컴포넌트 함수 작동</h1>

      <div >
        {Items.map((data11,i) => (
                <div style={{display:'flex', justifyContent:"center"}}>
                  <Child Idx={i} ref={(element) => myRefs.current[i] = element}/>
                </div>
              ))}
      </div>
      <div style={{display:'flex', justifyContent:"center"}}>
        <input style={{margin:"20px"}} onChange={onChange} placeholder="바꾸고 싶은 자식 번호를 입력해주세요.." value={value}></input>
        <button onClick={(event) =>{ChangeChild()}} style={{margin:"20px"}}>Child Function Call</button>
      </div>
    </div>
  );
}

child.js 코드

import { useState,forwardRef,useImperativeHandle } from "react";

const child = forwardRef((props, ref) =>{
  let [TextValue,setTextValue] = useState(props.Idx);

  useImperativeHandle(ref, () => ({
    ChangeChild
  }));

  let ChangeChild = (Idx) =>{
    setTextValue(Idx+'번 자식 컴포넌트 바뀜!!!');
  }
  return (
    <div style={{width:'150px', height:'50px', border:"1px solid"}}>
     <p>{TextValue}</p>
    </div>
  );

});

export default child;