Lv1_junior_dev
자라나라실력실력
Lv1_junior_dev
전체 방문자
오늘
어제

주인장 GitHub 바로가기

    • 분류 전체보기 (111)
      • 주절주절 (6)
      • 프로젝트 회고록 (3)
      • 꿀팁 (3)
      • 알고리즘 풀이 (26)
      • 이것 저것 (1)
      • 자바스크립트 - Vanilla JS (25)
      • 자바스크립트 - React.js (37)
      • 자바스크립트 - Next.js (4)
      • 자바스크립트 - TypeScript (5)
      • HTML (0)
      • CSS (1)

    인기 글

    hELLO · Designed By 정상우.
    Lv1_junior_dev

    자라나라실력실력

    [React.js] React.js의 map() 반복문
    자바스크립트 - React.js

    [React.js] React.js의 map() 반복문

    2022. 10. 13. 21:27

    ** 중괄호 안에서 if문을 쓸 때는 삼항연산자를 사용할 것.

    ** 중괄호 안에서 for문을 쓸 때는 map()를 사용할 것.

     

    ❗ map()

    map() 함수는 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 

     

    1. array 자료 갯수만큼 함수안의 코드를 실행 해준다.

      [1,2,3].map(function(){
        console.log("1")
      })
      
      // 1
      // 1
      // 1

    2. 함수의 파라미터는 array안에 있던 자료이다.

      [1,2,3].map(function(a){
        console.log(a)
      })
      
      //1
      //2
      //3

    3. return에 무언갈 적으면 array로 담아준다.

      [1,2,3].map(function(){
        return "test"
      })
      
      //["test", "test", "test"]

     

    ✔ 예제 1. 만약 포함된 제목 갯수만큼 div를 찍어내고 싶다면 ? 

    import { useState } from 'react';
    import './App.css';
    
    function App() {
    
      let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']);
    
      let [logo, setlogo] = useState('React Blog');
    
      return (
        <div className="App">
          <div className="black-nav"> 
            <h4>{logo}</h4>
          </div>
    
        {
          제목1.map(function(value, index){
            return(
              <div className='list'>
              <h4>글 제목, {value} {제목1[index]}</h4>
              <p>2월 17일 발행</p>
            </div>
            )
          })
        }
        </div>
      );
      
    }
    
    export default App;

    이렇게 하면 된다.

    map 안에서 첫 번째 매개변수는 배열 안의 값들을 출력해주고 두 번째 매개변수는 배열의 인덱스를 순차적으로 출력해준다.

    위 <h4>글 제목, {value} {제목1[index]}</h4> 태그 안에서의 {value}와 {제목1[index]}는 같은 결과물을 출력한다.

    '자바스크립트 - React.js' 카테고리의 다른 글

    [React.js] CSS-in-JS (Styled-components)에 대하여  (0) 2022.11.10
    [코딩애플/React.js] input 태그를 활용한 글 생성, 수정 예제 풀이  (1) 2022.10.25
    [React.js] props()에 대하여  (0) 2022.10.17
    [React.js] JSX, useState에 대하여  (1) 2022.10.13
    [React.js] React 학습을 시작하기에 앞서 주절주절  (0) 2022.10.12
      '자바스크립트 - React.js' 카테고리의 다른 글
      • [코딩애플/React.js] input 태그를 활용한 글 생성, 수정 예제 풀이
      • [React.js] props()에 대하여
      • [React.js] JSX, useState에 대하여
      • [React.js] React 학습을 시작하기에 앞서 주절주절
      Lv1_junior_dev
      Lv1_junior_dev
      나는 성장이 고프다. 자라나라 개발 실력 !

      티스토리툴바