props 예제 : React

PROPS 를 사용한 React 예제 :

tag 에서 컴포넌트(component)로 값을 전달할때 사용됨

여기서는 incrementBy 값이 사용이 되어짐

props 라는 변수로 받았지만 aa 나 임의의 변수 이름으로 사용이 가능함.

 

import React, {useState} from "react";

 

const MyButton = (props) => {

    

    const [currentCount, setCurrentCount] = useState(0);

 

    const handleClick = () => {

        setCurrentCount(currentCount+props.incrementBy);

    }

 

    return (

        <div>

            <button onClick={handleClick}>+{props.incrementBy}</button>

            <div>{currentCount}</div>

        </div>

    )

 

}

 

export default MyButton;

 

---

MyButton 이라는 컴포넌트에 값을 전달하는 React 예제 :

컴포넌트 태그 안에 직접 값을 { } 사이에 값어서 사용함.

 

import MyButton from './component/MyButton';

 

function App() {

 

  let subject = 'My React';

 

  return (    

    <div className="App">

      

      {subject}

      

      <MyButton incrementBy={1} />

      <MyButton incrementBy={10} />

      <MyButton incrementBy={20} />

      

      

 

    </div>

    

  );

}

 

export default App;