[React] props 사용하기

리액트에서 자주 사용하는 props에 대해 공부를 해보았다.

먼저 props 란 프로퍼티, props(properties의 줄임말)라고 한다.
상위 컴포넌트에서 자식 컴포넌트에 값을 전달할 때 사용한다.

 

import './App.css';

function App() {
  return (
    <div>
     <Name />
    </div>
  );
}

function Name() {
  return (
  <>
  <h1>이름</h1>
  <h1>나이</h1>
  </>
  );
}
export default App;

 

다음과 같은 코드를 작성해 주면 아래의 이미지와 같은 화면이 출력된다.

출력 이미지

그렇다면 props를 사용하여 자식 컴포넌트인 Name으로 한 개의 프로퍼티를 넘겨보겠다.

 

import './App.css';

function App() {
  return (
    <div>
     <Name name="Luka" />
    </div>
  );
}

function Name(props) {
  return (
  <>
  <h1>{props.name}</h1>
  <h1>나이</h1>
  </>
  );
}
export default App;

 

다음과 같이 프로퍼티 이름을 부모 컴포넌트에서 지정해주고 자식 컴포넌트인 Name 안에 props를 매개변수로 받아 

위와 같이 사용을 해주면 쉽게 받아올 수 있다.

 

출력 이미지

 

---

State를 props로 전달하기

그렇다면 이번에는 state를 자식 컴포넌트에 props로 전달하는 방법에 대해 알아보자

방법은 위와 동일하다.

 

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

function App() {
  let [age, setAge] = useState(20);
  return (
    <div>
     <Name name="Luka" age = {age} />
    </div>
  );
}

function Name(props) {
  return (
  <>
  <h1>{props.name}</h1>
  <h1>{props.age}</h1>
  </>
  );
}
export default App;

 

먼저 App 컴포넌트 내부에 state를 만들어 사용한다고 가정을 했다.

마찬가지로 Name을 사용한 컴포넌트 옆에 전송할 이름 = {state 명}을 다음과 같이 작성한다.

후에 이름을 불러왔던 방식과 마찬가지로 age를 props를 이용해 불러와준다면 아래와 같이 출력될 것이다.

 

출력 이미지