본문 바로가기
React

React map,반복문

by flykimjiwon 2022. 1. 9.
반응형

반복문 쓰는 법

for랑 map2가지가있다.

 

1.for

function으로 만들어주고 아래에서 { 함수명() } 으로 불러와준다.

  // for반복문을 쓰고싶다면?
  // 함수안에서 사용하고 어레이에 HTML추가
  // array를 마지막에 return으로 뱉어냄

function 반복된UI(){
    var 어레이 = [];
    for (var i=0;i<3;i++){
      어레이.push(<div>안녕</div>)
    }
    return 어레이
  }
  
  {
        반복된UI()
      }

2.map

-우선 짧은 map 예제

 // map함수 예제 , map은 유사 반복문
  var array = [2,3,4]
  var newarray = array.map(function(a){
    return a * 2
  })
  console.log(array)
  console.log(newarray)
  // 모든 데이터가 2씩 곱해져서 새로운 데이터 생성됨 이게 map역할임.

-실제로 map사용 예제

useState에 있는 [a,b]중 a를 활용해서 map으로 사용한다.

{
        // for 대신 쓰는 jsx문법
        // map()
        글제목.map(function(글){
          return (
            <div className="list">
            <h4>{ 글 } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉}</h4>
            <p>2월 17일 발행</p>
            <hr/>
            </div>
          )
          // return <HTML>
        })
      }

결론적으로 좀 기괴한 모양이 나왔는데, 좋아요 역시도 같은 갯수만큼 useState로 만들어줘서

 

별도로 작동하게 만들어줘야한다. 해당부분 추후 구현해보도록하자.

 

 let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
 let [따봉,따봉변경] = useState(0)

당연한거지만 같은 갯수로 배열로 만들어줘야 할것이고

 

이것도 배열 전체가 변경되야 하게 하겠지? deepcopy방법써서 변수전달해서 하면 함수 하나로 될거같다.

 

우선은 아래까지만 완성

 

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'

function App() {


  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  let [따봉,따봉변경] = useState(0)
  // 글제목 변경이랑 갯수 똑같이 하면 되겠지
  // 그리고 아마 배열 전체를 바꿔줘야 할거같고... 흠...
  let [modal,modal변경] = useState(false) 
  let posts = "군자 훠궈 맛집" 

  function 제목바꾸기(){
    var newArray = [...글제목]
    newArray[0] = '뉴욕'
    newArray = newArray.sort()    
    글제목변경(newArray)
  }

  // function 따봉바꾸기(index){
  //   var newArray2 = [...따봉]
  //   newArray2[index] = newArray2[index] + 1
  //   따봉변경(newArray2)
  // }

  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>
      <h4><span onClick = { 제목바꾸기 }>제목변경클릭!</span></h4>
     
      <div className="list">
      <h4>{ 글제목[0] } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉} </h4>
      <p>4월 15일 발행</p>
      </div>
      <hr/>
      <div className="list">
      <h4>{ 글제목[1] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[2] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[3] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <button onClick = {()=>{modal변경(!modal)}}>모달창</button>

      {
        modal === true
        ? <Modal></Modal> 
        : null
      }
         
    </div>
  );
}

function Modal(){
  return(
    <div className="modal">
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

export default App;

 

https://flykimjiwon.tistory.com/27 작성하면서 해결완료

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'

function App() {


  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  let [따봉,따봉변경] = useState([0,0,0,0])

  let [modal,modal변경] = useState(false) 
  let posts = "군자 훠궈 맛집" 
  let [누른제목,누른제목변경] = useState(0);

  function 제목바꾸기(){
    var newArray = [...글제목]
    newArray[0] = '뉴욕'
    newArray = newArray.sort()    
    글제목변경(newArray)
  }

  function 따봉바꾸기(index){
    var newArray = [...따봉]
    newArray[index] = newArray[index] + 1
    따봉변경(newArray)
  }


  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>
      <h4><span onClick = { 제목바꾸기 }>제목변경클릭!</span></h4>
     
      

      {
        글제목.map(function(글, i){
          return(
            <div className='list'>
              {/* 반복문이 돌때 안에 0,1,2가 반복되게 적기 map의 두번째 파라미터*/}
              <h3 onClick={ ()=>{ 누른제목변경(i)}} > {글} <span onClick={() => {따봉바꾸기(i)}}>🥰좋아요!</span> {따봉[i]}</h3>
              {/* 따봉 함수로만들어서 파라매터 여기있는 i 전달해줘서 바꾸면 되겟다 체크 딥카피로 ㅇㅇ 해보쟈 */}
              <p>1월 10일 발행</p>
              <hr/>
            </div>
          )
        })
      }

      {/* alt + shift + down키 '행'복사 */}
      {/* <button onClick={ ()=>{ 누른제목변경(0)}}>버튼1</button>
      <button onClick={ ()=>{ 누른제목변경(1)}}>버튼2</button>
      <button onClick={ ()=>{ 누른제목변경(2)}}>버튼3</button>
      <button onClick={ ()=>{ 누른제목변경(3)}}>버튼4</button> */}
    
      <button onClick = {()=>{modal변경(!modal)}}>모달창</button>

      {
        modal === true
        ? <Modal 글제목 = {글제목} 누른제목 = {누른제목}></Modal> 
        // 작명 = {전송할state} 보통 똑같이 쓴다.
        : null
      }
         
    </div>
  );
}

function Modal(props){ //부모에서 전달받은 props는 여기 다 들어있다.
  return(
    <div className="modal">
        <h2>제목 {props.글제목[props.누른제목]}</h2> 
        {/* 내가 방금누륵제목의 숫자를 넣을 수 있게 하자 */}
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

export default App;
반응형

'React' 카테고리의 다른 글

React props 추가  (0) 2022.01.10
React props  (0) 2022.01.09
React Component 문법  (0) 2022.01.09
React state 변경하는법  (0) 2022.01.09
React State  (0) 2022.01.09

관련글

티스토리툴바