React_ Props 사용법, example

React를 사용할때 Components를 나누고
서로 다른 Components File에서 작업을 하면
서로의 값이 필요할 순간이 항상 있다.

이때 React에서는 props를 이용해서 값을 주고 받는데,
props에 대해서 공부해보자.

[[App.js]]

import './App.css';
import {useState} from 'react';
import Components from './components/Components'

function App() {

const [count,setCount] = useState(0);

function onClickHandler () {
  setCount(count + 1);
}

  return <>
    <button onClick={onClickHandler}>+1</button>
    <Components/>
  </>
}

export default App;

[[Components.js]]

function Components() {
    return <input type="text"></input>
  }
  
  export default Components;

App.js에서 버튼을 누르고 이를 클릭하면
count state에서 +1씩 숫자가 올라가는 코드이다.

state인 count는 App.js에서 가지고 있고
이를 표현하는 input은 Components.js에서 가지고 있다.
그렇다면 이 count가 Components.js로 전달이 되어야하는데

이 때 props를 사용하여 간단하게 해결할 수 있다.

먼저 App.js에서 count를 보내보자.

<Components count={count}/>

너무 간단해서 이 부분만 보면 되겠다.
Components.js를 가져오는 부분에 필요한 값을
전달 될 변수이름={전달 할 변수이름} 이렇게만 작성하면 된다.
그럼 받는 것도 마저 보자.

function Components(props) {
    return <input type="text" value={props.count}>
	</input>
  }
  
  export default Components;

너무 간단하게 받는 Components함수에서 props를 인자로 받고
필요한 부분에서 props로 받은 것 중 count를 사용할게요!
이렇게 적은것 뿐이다.
결과를 확인하자.

아주 잘 동작하는 것을 볼 수 있다.

어렵지 않지만 매우 중요하니 잊지말고 사용해보자.