하위 컴포넌트의 값을 상위(부모)컴포넌트로 전달하기

리액트를 쓰다보면 state, props 개념을 싫더라도 알게 되고 사용하게 되는데,

이 때 자식 컴포넌트에서 props로 넘긴 값을 상위 컴포넌트에서 state로 props로 값을 정해주게 된다.

 

쉽게 예를 들어보면

 

function 부모컴포넌트() {
	return(
    	<>
        <자식컴포넌트 props="안녕"/>
        </>
       )
}

function 자식컴포넌트(props) {
	return(
  		<div>Hello, {props}</div>
    )
}

 

자식 컴포넌트의 props는 상위 부모컴포넌트에서 "안녕" 이라는 값을 넘겨주게 되고, 컴포넌트가 렌더링 되면 Hello, 안녕

이렇게 보이는 것이다.

 

이렇게 state props는 부모 -> 자식 단방향으로 값을 정해주는데, 만약 반대로 자식 -> 부모 방향으로 값을 정해줘야한다면 어떻게 해야할까?

 

일단, 거두절미하고 결론만을 말하면 "함수를 사용한다." 이다.

우선 예시를 보자.

현재 내가 작업 중인 호두 오픈마켓 프로젝트 로그인 화면이다.

로그인 타입은 "구매회원"과 "판매회원" 두 타입이 있고, 로그인 할 때 타입도 api로 전달이 되어야 한다.

위의 탭을 누르면 useState로 로그인 타입이 정해진다. 이것은 하위 컴포넌트에서 일어나는 일이다.

그리고 로그인 버튼을 누르면 아이디, 비밀번호, 로그인 타입이 post 되는데, 이건 상위 컴포넌트에서 일어나는 일이다.

 

그럼 상위 컴포넌트에서 하위 컴포넌트의 로그인 타입을 받아야하는데, 이는 다음과 같이 작성하였다.

 

<하위 컴포넌트>

function AuthBox({ giveType }) {
  
   const [logInType, setLogInType] = useState({
    type: "BUYER",
  });

  function clickBuyerLogIn() {
    setLogInType({
      type: "BUYER",
  });
  }

  function clickSellerLogIn() {
    setLogInType({
      type: "SELLER",
    });
  }

  //로그인 함수 실행함수 상위 컴포넌트에 전달
  function logInSubmit(e) {
    e.preventDefault();
    giveType(logInType.type);
  }

   return (
      <form
        className="flex flex-col justify-between min-h-[292px] py-[34px] px-[34px]  border-[1px] border-t-0 rounded-[10px] rounded-t-none border-disabled
        "
        method="post"
        onSubmit={logInSubmit}
      >
      </form>
   );
}

export default AuthBox;

우선 useState를 사용한 LogInType의 type값이 필요한데, 이를 매개변수로 받는 giveType함수를 작성한다. 그리고 이를 props로 넘겨준다.

 

그런데 바로 giveType(logInType.type) 작성해 버리면 함수가 바로 실행되어버린다. 그래서 logInSubmit 함수를 작성하고 이 안에서 실행되게 했다. logInSubmit 함수는 하위 컴포넌트에 있는 form 태그의 onsubmit으로 연결해주었다.

<form onSubmit={logInSubmit} />

 

 

 

<상위 컴포넌트>

function LogIn() {
  
 //로그인 버튼 클릭했을 때
  function handleSubmit(type) {
       logIn(type);
  }

  //로그인 api 전송
  async function logIn(type) {
    try {
      const res = await axios.post(url + "accounts/login/", {
        username: id,
        password: password,
        login_type: type,
      });
    } catch (err) {
      console.error(err.response.data);
    }
    
    return <AuthBox giveType={handleSubmit} />
  }

상위 컴포넌트에서 로그인 버튼을 클릭하면 handleSubmit 함수가 실행된다. 로그인 버튼의  type은 submit으로 하위 컴포넌트에서 form태그의 submit 함수인 logInSubmit()함수가 handleSubmit이 되는 것이다.

 

그리고 입력한 아이디와 비밀번호가 유효하다면 (유효성 검사 코드는 생략하였다.) login()함수를 실행하게 된다.

logIn() 함수도 매개변수로 type을 받는데, 이는 logInType.type과 같다. 

 

 

이와 같이 <AuthBox>에서의 logInType을 함수를 통해서 상위 컴포넌트인 <LogIn>에 전달해 줄 수 있다.