2021년 1월 27일

리액트 훅을 사용하기 전에는 부모 컴포넌트에서 자식 컴포넌트로 상태를 전달할 때 props로 넘겨주는데, 리액트 훅에서는 어떻게 넘겨줘야 할 지 몰랐다.

구글링해보니, props와 같이 부모 컴포넌트에서 useState로 전달받을 데이터를 저장할 변수 하나를 선언하고 props로 전달하면 된다고 한다.

// Parent Component
function Parent() {
	const [data, setData] = useState('initial data');

	return (
		<>
			<div>{data}</div>
			<Children setData={setData}/>
		</>
	);
}

// Children Component
function Children(props) {
	const	changeData = () => {
		props.setData('data from child');
	}

	return (
		<>
			<button onClick={changeData}>
				send data to parent
			</button>
		</>
	);
}

실제 프로젝트에서 적용해보기

// Mode.tsx
import React, { Component, useState, ReactElement, ReactNode, FC, ReactChild, useEffect } from 'react';
import { Link, Route, Switch, useHistory } from 'react-router-dom';
import Modal from './Modal'
import CreateRoomForm from './CreateRoomForm';
import JoinRoomForm from './JoinRoomForm';

const Mode = () => {
  ...
  const [isModalOpen, setModalOpen] = useState(false);
  const [modalComponents, setmodalContent] = useState(null);

  const openModal = (**modalComponents: any**) => {
    setmodalContent(modalComponents)
    setModalOpen(true)
  }

  return (
	    ...
      <button
        onClick={() => openModal(<CreateRoomForm setModalOpen={setModalOpen} />)}
      >
        방 생성
      </button>
      <button
        onClick={() => openModal(<JoinRoomForm setModalOpen={setModalOpen} />)}
      >
        방 참가
      </button>

      {isModalOpen &&
          <Modal setModalOpen={setModalOpen}>{modalComponents}</Modal>
      }
  )
}

// CreateRoomForm.tsx
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function CreateRoomForm(**{ setModalOpen }: boolean** ) {
  const history = useHistory();

  const closeModal = () => {
    setModalOpen(false);
    history.push('/mode');
  }

  return (
					...
          <button onClick={closeModal}>닫기</button>
    </div>
  )
}

export default CreateRoomForm

2021년 1월 27일