[React] if/for 기능

if문 

• 클릭 토글기능구현
• if함수 대신에 삼항연산자를 쓴다. flag 불리언을 이용해서 on/off를 사용한다
• (on/off가 디자인패턴중에 뭐였지)

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

function App() {

  let [a, aChange] = useState(['state1', 'state2', 'state3']);
 
  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/>
      : null
    }
        

    </div>
  );
}

function Modal(){
  return(
    <div>
      <h2>짠</h2>
    </div>
  )
}

export default App;

 

결과 : state3클릭하면 Modal 함수부분이 나왔다가 한번더 누르면 사라짐

 

반복문

• for함수 사용 안되니 .map(function(){   })함수를 사용한다(map함수는 for each랑 비슷)
• 함수안에 배열을 하나 만들어서 for문 안에다 배열.push(<div></div>)해서 만들수도 있음

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

function App() {

  let [a, aChange] = useState(['state1', 'state2', 'state3']);
  let [num, numChange] = useState(0);
  
  return (
    <div className="App">
      <div>
        <h1>{ a }</h1>
      </div>    
    <hr/>

    {
      a.map(function(value){
       return <div> { value } </div>
      })
    }
        
    </div>
  );
}


export default App;

 

결과는 아래와 같이 나온다.

 

 

 

하트를 누르면 옆의 숫자가 하나씩 늘어나는 코드(map함수 이용)

---

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

function App() {

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

  function change(clickNum){
    var tmp=[...num];
    tmp[clickNum]++;
    numChange(tmp);

  }
  return (
    <div className="App">
      {
        a.map(function(i, n){
          return <h1> { i } <span onClick={ ()=>{change(n)} }>❤</span> { num[n] } </h1>
        })

      }
    
    <hr/>
    

    </div>
  );
}


export default App;

 

 

• map 함수의 리턴값을 받을때 div key값을 설정해주어야 한다.

      {
        a.map(function(i, n){
          return <div className="list" key={n}>
            <h1> { i } <span onClick={ ()=>{change(n)} }>❤</span> { num[n] } </h1>
            </div>
        })

      }

 

 

 

+) 추가 내용~!~!

 

map 파라미터 순서에 따라 표현방식이 달라짐

  return (
    <div className="App">
        {
          a.map(function(i, num, dd, ){
            return <h1> { i } { a[num] } </h1>
          })
        }
    <hr/>
    

위의 코드작성하면

 

 

결과는 이렇게 나온다.