[React] props 사용하기

앞의 설명한 사용자정의 Component에 값을 전달하는 방법 중 하나이다.

이 부분을 이해하기 위해서는 다음 글을 이해하는 것을 추천한다.

 

 

React, 사용자정의 Component

 

2023.11.11 - [Web/React] - [React] 사용자 정의 Component 만들기

[React] 사용자 정의 Component 만들기

 

 

JavaScript, Object 이해하기

 

2023.06.01 - [Web/JavaScript] - [JavaScript] Object 만들기

[JavaScript] Object 만들기

 

사용한 Code 정의

import logo from './logo.svg';
import './App.css';



function App() {

  let flag = [{id: 'korea', class: 'Aclass'}, {id:'apple', class:'Bclass'}, {id:'podo', class: 'Sclass'}];


  return (
    <div className="App">
      <Modal top={flag} />
    </div>
  );
}

function Modal(props) {
  let live = []
  for(let i=0; i<props.top.length; i++) {
    let li = props.top[i];
    live.push(<li>{li.id}</li>);
  }
  return <div>
    {live}
  </div>
}

export default App;

 

 

코드 순서 정의

JavaScript가 실행되면서 flag라는 Array를 생성하게 된다.

React가 실행하면서 flag명의 Array를 생성하게 된다.

Array안에는 3개의 Object가 들어있으며, id와 class로 이루어진 key로 각각 다른 Value가 들어있는 것을 확인할 수 있다.

 

 

flag의 값을 Component에 담는다.

여기서 이 flag는 사용자 정의 Component인 Modal에 값을 보내게 되는데 이 과정을 props라고 한다.

 

props 사용방법은 Modal TAG안에 정의된 top을 option이라고 부르는데, 사용자가 정의한 option명으로 React 방식으로 값을 전달하면 된다.

해당 코드에서는 top으로 flag의 Array를 담는 것을 확인할 수 있다.

 

props 사용 방법은 함수 reference를 정의하기만 하면 된다.

사용자 정의 Component에 담긴 값은 임의의 변수선언으로 꺼내 사용할 수 있다.

 

 

flag의 Array에는 3개의 Object가 담겨있다.

여기서 익숙한 top를 확인할 수 있다.

Modal 함수에 flag를 담을 때 사용한 option명 top이 여기서 표현된다.

이를 통해 알 수 있는 것은 props에는 여러개의 값을 저장해서 보낼 수 있다는 것을 알 수 있다.

 

또한 flag의 Array에는 3개의 Object가 들어있으므로, props.top.length는 값 3을 나타낸다.

결과적으로 for문은 0부터 3까지 3번 반복하게 된다.

 

for문을 통해 <li> 테그가 생성된다.

for문 3번이 반복되면서 <li>테그가 생성하게 된다.

생성된 li테그는 live의 배열 안에 push로 진행되는데, 반복적인 TAG사용은 Array를 통해 표현해야 한다.

 

return을 통해 결과값을 다시 Modal Component에 보낸다.

for문을 통해 담긴 flag의 id값은 return을 하게 된다.

여기서 Modal Component의 위치에 해당 HTML TAG가 표현되는 것을 확인할 수 있다.

 

정상적으로 Array값이 HTML에 표현하게 된다.

flag의 Array에 담긴 값들이 출력된 것을 확인!

정상적으로 props가 실행 된 것을 보여준다.