React - props

props

어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.

예를 들어, App이라는 컴포넌트에서 다른 컴포넌트에게 값을 전달해야 할 때

App.js

function App() {
  return (
    <>
      <User name="JYS" age="26"/>
    </>
  );
}

User.js

function User(props) {
  return (
  <>
    <div>이름 : {props.name}</div>
    <div>나이 : {props.age}</div>
  </>
  )
}

결과

App에서 name과 age를 User 컴포넌트에게 props로 전달했다. props는 객체 형태로 전달된다.

꼭 props가 아니라 name, age를 객체로 받아 바로 사용이 가능하다.

User.js

function User({name, age}) {
  return (
  <>
    <div>이름 : {name}</div>
    <div>나이 : {age}</div>
  </>
  )
}

관련 링크
https://react.vlpt.us/basic/05-props.html 벨로퍼트님
정리가 너무 잘 되어 있다...