[#. React] parent에서 버튼 클릭할 때마다 children에서 div 영역 생성하기

 

 

 

 

 

추가 버튼을 클릭하면 input, textarea 영역이 생겼으면 좋겠다

근데 react에서 return문 안에서 for문은 사용하지 못 하기 때문에

어떤 방법을 사용할지 고민하다가 버튼 onClick 이벤트가 발생할 때마다 counter에서 숫자가 1씩 증가하도록 하고

그걸 state에 배열로 담을 것이다

그리고 배열에 담긴 Item 개수만큼 div를 생성할 것이다

 

 

 

 

① 프로젝트명/src/components/CreateListPage/CreateList.js

 

import React, { useState } from "react"
import styled from "styled-components"
import { Button } from "antd"
import { Link } from "react-router-dom"
import Axios from "axios"
import { PlusCircleOutlined } from "@ant-design/icons"
import DetailList from "./Sections/DetailList"

const CreateListDiv = styled.div`
  padding: 3rem;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
`

const CreateList = () => {
  const [countList, setCountList] = useState([0])

  const onAddDetailDiv = () => {
    let countArr = [...countList]
    let counter = countArr.slice(-1)[0]
    counter += 1
    countArr.push(counter)	// index 사용 X
    // countArr[counter] = counter	// index 사용 시 윗줄 대신 사용	
    setCountList(countArr)
  }

  return (
    <CreateListDiv>
      <DetailList countList={countList} />
      <Button onClick={onAddDetailDiv}>
        <PlusCircleOutlined />추가
      </Button>
    </CreateListDiv>
  )
}
export default CreateList

 

 

 

 

 

② 프로젝트명/src/components/CreateListPage/Sections/DetailList.js

 

import React from "react"
import { Input } from "antd"
import styled from "styled-components"

const DetailDiv = styled.div`
  div {
    margin-bottom: 2rem;
    width: 320px;
  }
`

const { TextArea } = Input

const DetailList = (props) => {

  return (
    <DetailDiv>
      {props.countList && props.countList.map((item, i) => (
        <div key={i}>
            <label>내용</label>
            <div>
              <TextArea
                autoSize={{ minRows: 6, maxRows: 6 }}
              />
            </div>
        </div>
      ))}
    </DetailDiv>
  )
}

export default DetailList

 

 

 

 

 

 

 

 

추가 버튼 클릭할 때마다 영역이 잘 추가된다