[ 리액트(React) ] props, onClick, handleClick 자세하게 이해하기

📍 props, onClick, handleClick 자세하게 이해하기

1. Button 컴포넌트를 모듈화(module)시킬 때 이름을 바로 정하지 말고 props를 사용하여 위에서 값을 설정해서 바꿀 수 있게 끔 설정하자. 다음은 Button 컴포넌트를 외부에서 사용할 때 props로 button의 이름을 변경하는 간단한 기능이다.

// components/App.js
const App = () => {
    return <Button text="IT IS BUTTON"></Button>;
};

// components/Button/index.js
const Button = (props) => {
  return <button>{props.text}</button>;
};

 

2. Button 컴포넌트에 handleClick 기능을 달아주고 싶을 때는 마찬가지로 handleClick 컴포넌트를 props로 내려주면 된다. 다만 props로 받고나서 props.onClick()처럼 괄호(())를 사용해야 클릭했을 때 함수를 바로 실행할 수 있다. 괄호(())를 넣지 않으면 오류가 난다.

728x90

 

// src/components/Button/index.js
const Button = (props) => {
  return (
    <button
      onClick={() => {
        console.log(" i'm button. ");
        props.onClick();
      }}
    >
      {props.text}
    </button>
  );
};

// src/components/App.js
const App = () => {
    const handleClick = () => {
        console.log(" i'm handleClick!. ")
    }
  return <Button text="IT IS BUTTON" onClick={handleClick}></Button>;
};

 

 

3. handleClick을 다른 함수에 넣어두고 그 함수를 적용하고 싶다면 다음과 같이 작성하면 된다. 이때에도 괄호(())를 넣어주는것을 잊지 말자!

// src/components/Button/index.js
const Button = (props) => {
  return (
    <button
      onClick={() => {
        console.log(" i'm button. ");
        props.onClick();
      }}
    >
      {props.text}
    </button>
  );
};

// src/components/App.js
const App = () => {
    const handleClick = () => {
        console.log(" i'm handleClick!. ")
    }

    const handleClick2 = () => {
        handleClick();
    }

  return <Button text="IT IS BUTTON" onClick={handleClick2}></Button>;
};