[리액트React] onClick 이벤트 파라미터를 자식컴포넌트에서 부모컴포넌트로

리액트 하단 탭바 (네비게이션)

기존에 단일 페이지로 구성되어 있던 Home에 이벤트&할인 페이지가 또 다른 메인페이지로 추가되면서 하단에 내비게이션 바를 만들어야 했고 버튼을 통해 페이지 전환이 이루어 져야했다.

이 것을 처리하기 위해 onClick을 통한 파라미터를 함수에 전달하고 해당 값을 자식 컴포넌트에서 부모 컴포넌트로 옮기는 과정이 필요했다.

리액트를 공부하면서 Button을 만들고 onClick기능을 여러번 사용했는데 그때그때마다 방식이 다르기도 했고 외우는식으로 언어를 공부하지도 않기 때문에 새로운 기능을 만들려면 매번 검색을 통해 다시한번 훑어봤어야 했다.

따라서 앞으로는 이런 불필요한 시간낭비를 줄이고 효율성을 높이기 위해 기록으로 남겨두려고 한다.

일단 리액트에서 버튼의 온클릭으로 발생한 이벤트 파라미터는 아래와 같이 전달된다

리액트 onClick 함수에 파라미터 전달하는 방법 >

자식컴포넌트

const clickHandler = (params, e) => {
  console.log(params); // error
  e.preventDefault();
  // do someting...
}

return (
	<button onClick={(e)=>{clickHandler(params, e)}}> Do Something!</button>
)

onClick을 통해 받은 파라미터를 자식컴포넌트에서 부모컴포넌트로 보내는 방법

자식 컴포넌트

import React from 'react';

import './BottomNavigation.css';

const BottomNavigation = (props) => {
  const sendViewStatus = (params, e) => {
    props.getViewStatus(params);
  };

  return (
    <div className='BottomNavigation'>
      <div className='BottomNavi-wrapper'>
        <button
          className={`BottomNavi-wrapper__ButtonContainer ${
            props.activatedButton === 'home' ? 'active' : null
          }`}
          onClick={(e) => {
            sendViewStatus('home', e);
          }}
        >
          <FiHome
            style={{
              fontSize: '1.2rem',
              marginRight: '0.55rem',
              marginBottom: '0.15rem',
            }}
            className='BottomNavi-ButtonIcon'
          />
          홈
        </button>
        ...

부모 컴포넌트

import React, { useState, useEffect } from 'react';


import BottomNavigation from '../../BottomNavigation/BottomNavigation';
import Loading from '../../Loading';
import './LandingPage.css';

const LandingPage = (history) => {
  const { loading } = useGlobalContext();
  const [viewStatus, setViewStatus] = useState('home');

  const getViewStatus = (value) => {
    setViewStatus(value);
  };

  if (loading) {
    return <Loading />;
  } else {
    if (userInput) {
      return (
        <>
          <SearchBox getUserInput={getUserInput} />
          <SearchResults userInput={userInput} />
          <Footer />
        </>
      );
    } else {
      if (viewStatus === 'home') {
        return (
          <>
            <SearchBox getUserInput={getUserInput} />
            <BottomNavigation
              activatedButton={'home'}
              getViewStatus={getViewStatus}
            />
            <Home history={history} />
            <Footer />
          </>
        );
      }
      if (viewStatus === 'events') {
        return (
          <>
            <SearchBox getUserInput={getUserInput} />
            <BottomNavigation
              activatedButton={'events'}
              getViewStatus={getViewStatus}
            />
            <EventsPage />
            <Footer />
          </>
        );
      }
    }
  }
};

export default LandingPage;