[React x 함수] 부모컴포넌트 ↔ 자식 컴포넌트

최근 프로젝트를 하면서 컴포넌트로 박스를 만들었고, 이 컴포넌트로 두개의 박스를 만들었다. 이 두가지 박스 중에 하나만 클릭되게 해야하는 조건이 있었는데 이를 어떻게 해결해야할지 고민하던 와중에 자식 컴포넌트에서 부모 컴포넌트로 함수를 넘겨줄 수있다는 글을 보았고, 이를 정리해보려고 한다.

1.🧑‍🍼 부모 컴포넌트 → 자식 컴포넌트

App.js

import React, { useState } from "react";
import Child from "./components/Child";

function App() {
  const [data, setData] = useState(1);

  return <Child data={data}></Child>;
}

export default App;

Child.js

import React from "react";

function Child({ data }) {
  console.log(data);
  return <div>Child</div>;
}

export default Child;

👶 자식 컴포넌트 → 부모 컴포넌트

App.js

import React, { useState } from "react";
import Child from "./components/Child";

function App() {
  const parentFunction = (x) => {
    console.log(x);
  };

  return <Child parentFunction={parentFunction}></Child>;
}

export default App;

Child

import React, { useState } from "react";

function Child({ parentFunction }) {
  const [data, setData] = useState(2);

  parentFunction(data);

  return <div>Child</div>;
}

export default Child;	

프로젝트에 사용된 코드

BoxMode.js (자식 컴포넌트)

const BoxMode = (props) => {

    const ChangeBox = () => {
        props.mode === '코디네이터 모드' ? props.choose(1) : props.choose(2)
    }
    return(
        <Box mode={props.mode}
            active={props.selected}
            onClick={ChangeBox}>
            <div>
                <ModeName>{props.mode}</ModeName>
                <ModeDescribe>{props.describe}</ModeDescribe>
            </div>
            <img src={props.mode === '코디네이터 모드'? coordinate : user}/>
        </Box>
        
    )
}

ModeChoice.js (부모 컴포넌트)

const ModeChoice = () => {
const choose = (x) => {
	if(x === 1){
    	setUser(false);
        setCoordinate(true);
        }else{
            setUser(true);
            setCoordinate(false);
        }
    }
}
return(
  <BoxMode
      mode={'코디네이터 모드'} 
      choose={choose}
      selected={coordinate}
      describe={'나만의 코디를 업로드 하고 다른 사용자의 코디도 진행해보세요'}/>
  <BoxMode
      mode={'사용자 모드'} 
      choose={choose}
      selected={user}
      describe={'옷 고르기 힘들때 코디네이터에게 도움을 요청해보세요'}/>
    )
}