map & props 응용편

before

after

Q. 위 코드의 h1 결과값은, "오늘은 짜장면짬뽕울면 먹는 날" 이다.
"짜장면짬뽕울면"이라는 메뉴는 중국집에 없으므로, 디폴트는 "짜장면"이되, 메뉴 버튼 클릭시, 누른 버튼의 메뉴만 h1에 삽입되도록 변경해보자. 

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

function App() {
  let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']);
  return (
    <div className="App">
      {
        menuTit.map( ( menu, i )=>{
          return (
            <button onClick={ ()=>{} }>{ menu }</button>
          )
        })
      }
      <Today menuTit={menuTit} />
    </div>
  )
}

function Today(props){
  return ( 
    <h1>오늘은 { props.menuTit } 먹는 날</h1>
  )
}

export default App;

1. 메뉴 상태 값을 생성한다.

let [menuNum, menuNumFunc] = useState(0); // "짜장면"이 첫번째 이므로, 0

2. button 클릭시, 메뉴 상태 값을 변경한다.

menuTit.map( ( menu, i )=>{
   return (
      <button onClick={ ()=>{ menuNumFunc(i) } }>{ menu }</button>
   )
})

파라미터 menu 옆 i는 맵핑시 index number를 의미한다(0,1,2,3...).

menuNumFunc가 이해가지 않으면: 2021.10.29 - [react - 공부중] - [v2021] state를 이용한 데이터 바인딩

map이 이해가지 않으면: 2021.10.29 - [react - 공부중] - [v2021] 반복문은 map을! (중괄호 { } 안 for 역시 인식하지 못해)

3. props에 메뉴 상태값을 자식 컴포넌트에 넘긴다.

<Today menuTit={menuTit} num={menuNum} />

function Today(props){
  return ( 
    <h1>오늘은 { props.menuTit[props.num] } 먹는 날</h1>
  )
}

prps가 이해가지 않으면: 2021.10.30 - [react - 공부중] - [v2021] props, 부모의 state를 가져와 보자.

---

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

function App() {
  let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']);
  let [menuNum, menuNumFunc] = useState(0);
  return (
    <div className="App">
      {
        menuTit.map( ( menu, i )=>{
          return (
            <button onClick={ ()=>{ menuNumFunc(i) } }>{ menu }</button>
          )
        })
      }
      <Today menuTit={menuTit} num={menuNum} />
    </div>
  );
}

function Today(props){
  return ( 
    <h1>오늘은 { props.menuTit[props.num] } 먹는 날</h1>
  )
}

export default App;

---

4. 메뉴 추가하기

[v2021] input 입력값을 가져와, 기존 state에 추가해보자.