[React] props

 

 

 

 

이전 단계에서 만들었던 모달 짠! 이라는 글자는

state3을 누르면 나타났다가 다시 누르면 사라진다.

 

 

이때 짠 state3 이라고 표현하고 싶으면(클릭한 내용도 같이 나타내고싶으면) 

 

이렇게하면 안된다.

why? function Modal이랑 function App은 같은선상에 있기때문에

App밑에있는 state a를 사용하기위해서는 도구가 필요하다

 

 

Props

<Modal> 컴포넌트를 App의 자식컴포넌트라고 한다.

Modal에서 변수를 전송하는 역할을 하는게 props기능이다

• 먼저 컴포넌트 구현부인 <Modal/> 부분에서 전송할 내용을 입력한다. 보낼 변수명은 새로 만드는 것이며 보통 통일해서 사용한다.
• 그다음 function Modal로 가서 파라미터값을 props로 넣어준다.
• 구현할때는 props.a props.aa props.a[0] 이렇게 하면 된다.

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

function App() {

  let [a, aChange] = useState(['state1', 'state2', 'state3']);
 
  let [b, bChange] = useState(['bstate1', 'bstate2', 'bstate3']);
 
  let [flag, flagChange] = useState(false);

  return (
    <div className="App">
      <div>
        <h1>{ a[0] }</h1>
        <h1>{ a[1] }</h1>
        <h1 onClick={ () => {flagChange(!flag)} }>{ a[2] }</h1>
      </div>    
    <hr/>


    {
      flag==true 
      ? <Modal a={a} aa={b} />
      : null
    }
        

    </div>
  );
}

function Modal(props){
  return(
    <div>
      <h2>짠 { props.a[2] } { props.aa[0] }</h2>
    </div>
  )
}

export default App;

 

위 코드의 결과는 아래와 같다.(모달기능ㅇ)

 

 

 

props 파라미터도 꼭 props라고 안해도 된다.

-> 위의 기능을 이용해서 버튼1, 버튼2, 버튼3을 누르면 각각 다른 내용이 나오는 코드

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

function App() {

  let [a, aChange] = useState(['state1', 'state2', 'state3']);
  let [clickNum, clickNumChange] = useState(0);

  let [flag, flagChange] = useState(true);

  return (
    <div className="App">
      <div>
        <h1>{ a[0] }</h1>
        <h1>{ a[1] }</h1>
        <h1>{ a[2] }</h1>
      </div>

    <hr/>

    <button onClick={ () => { clickNumChange(0) } }>버튼1</button>
    <button onClick={ () => { clickNumChange(1) } }>버튼2</button>
    <button onClick={ () => { clickNumChange(2) } }>버튼3</button>
    
    {
      flag==true 
      ? <Modal a={a} clickNum={clickNum} />
      : null
    }
        

    </div>
  );
}

function Modal(props){
  return(
    <div>
      <h2>짠 { props.a[props.clickNum]} </h2>
    </div>
  )
}

export default App;