배열반복(map함수)

11. 배열반복

    import logo from './logo.svg';
    import './App.css';

    function App() {

    ///////////////////////////////////////////////////////////////////
    const userList =
        [{ username: "홍길동1", age: 20, address: "서울1" },
        { username: "홍길동2", age: 50, address: "서울2" },
        { username: "홍길동3", age: 60, address: "서울3" }
        ];

    // js
    var result = userList.map(function (data, idx) {
        console.log(data, idx);

        return data;
    });
    console.log(result);

    // arrow
    var result2 = userList.map((data, idx) => {
        return data;
    });
    console.log(result2);

    var result3 = userList.map((data, idx) => data);
    console.log(result3);

    ///////////////////////////////////////////////////////////////////


    return (
        <div className="App">
        <h2>1. 배열의 첨자이용해서 개별접근</h2>
        회원1: 이름:{userList[0].username}, 나이:{userList[0].age}, 주소:{userList[0].address}<br></br>
        회원2: 이름:{userList[1].username}, 나이:{userList[1].age}, 주소:{userList[1].address}<br></br>
        회원3: 이름:{userList[2].username}, 나이:{userList[2].age}, 주소:{userList[2].address}<br></br>

        <h2>2. Avatar 컴포넌트 이용</h2>
        회원1: <Avatar {...userList[0]} /><br></br>
        회원2: <Avatar {...userList[1]} /><br></br>
        회원3: <Avatar {...userList[2]} /><br></br>

        <h2>3. 배열첨자 반복</h2>
        {/* 
            // js
            var result = userList.map(function (data, idx) {
                return data;
            });

            // arrow
            var result2 = userList.map((data, idx) => {
                return data;
            });
            console.log(result2);

            var result3 = userList.map((data, idx) => data);
            console.log(result3);          
        */}
        {
            /*
            `;` 부여하면 안됨. 주의할것
            */
        }
        {

            userList.map((data, idx) => {
            return <div key={idx}>회원{idx + 1}: 이름: {data.username}, 나이: {data.age}, 주소: {data.address}</div>
            {/* 
                가상DOM 과 DOM 을 비교할때 뭐가 변경됬는지 파악이 안되기에 key 를 부여해서 고유하게 만들어줘야함.
                일반적으로 idx 를 사용하는데 유일하게 사용중인 값이면 뭐든 상관없다.
                */ }
            })

        }

        <h2>Avatar 반복1</h2>
        {
            userList.map((data, idx) => {
            return <>
                회원{idx + 1}: <Avatar key={idx} username={data.username} age={data.age} address={data.address} /><br></br>
            </>
            })
        }

        <h2>Avatar 반복2</h2>
        {
            userList.map((data, idx) => {
            return <>
                회원{idx + 1}: <Avatar key={idx} {...data} /><br></br>
            </>
            })
        }

        </div>
    );
    }


    // 컴포넌트
    function Avatar({ username, age, address }) {
        return (
            <span className="Avatar">
            이름:{username}, 나이:{age}, 주소:{address}
            </span>
        );
    }

    export default App;

 

# App.js

import logo from './logo.svg';
import './App.css';

function App() {

  ///////////////////////////////////////////////////////////////////
  const userList =
    [{ username: "홍길동1", age: 20, address: "서울1" },
    { username: "홍길동2", age: 50, address: "서울2" },
    { username: "홍길동3", age: 60, address: "서울3" }
    ];

  // js
  var result = userList.map(function (data, idx) {
    console.log(data, idx);

    return data;
  });
  console.log(result);

  // arrow
  var result2 = userList.map((data, idx) => {
    return data;
  });
  console.log(result2);

  var result3 = userList.map((data, idx) => data);
  console.log(result3);

  ///////////////////////////////////////////////////////////////////


  return (
    <div className="App">
      <h2>1. 배열의 첨자이용해서 개별접근</h2>
      회원1: 이름:{userList[0].username}, 나이:{userList[0].age}, 
      주소:{userList[0].address}<br></br>
      회원2: 이름:{userList[1].username}, 나이:{userList[1].age}, 
      주소:{userList[1].address}<br></br>
      회원3: 이름:{userList[2].username}, 나이:{userList[2].age}, 
      주소:{userList[2].address}<br></br>

      <h2>2. Avatar 컴포넌트 이용</h2>
      회원1: <Avatar {...userList[0]} /><br></br>
      회원2: <Avatar {...userList[1]} /><br></br>
      회원3: <Avatar {...userList[2]} /><br></br>

      <h2>3. 배열첨자 반복</h2>
      {/* 
          // js
          var result = userList.map(function (data, idx) {
            return data;
          });

          // arrow
          var result2 = userList.map((data, idx) => {
            return data;
          });
          console.log(result2);

          var result3 = userList.map((data, idx) => data);
          console.log(result3);          
      */}
      {
        /*
          `;` 부여하면 안됨. 주의할것
        */
      }
      {

        userList.map((data, idx) => {
          return <div key={idx}>회원{idx + 1}: 이름: {data.username}, 
          나이: {data.age}, 주소: {data.address}</div>
          {/* 
            가상DOM 과 DOM 을 비교할때 뭐가 변경됬는지 파악이 안되기에 key 를 부여해서 
            고유하게 만들어줘야함. 일반적으로 idx 를 사용하는데 유일하게 
            사용중인 값이면 뭐든 상관없다.
            */ }
        })

      }

      <h2>Avatar 반복1</h2>
      {
        userList.map((data, idx) => {
          return <>
            회원{idx + 1}: <Avatar key={idx} username={data.username} 
            age={data.age} address={data.address} /><br></br>
          </>
        })
      }

      <h2>Avatar 반복2</h2>
      {
        userList.map((data, idx) => {
          return <>
            회원{idx + 1}: <Avatar key={idx} {...data} /><br></br>
          </>
        })
      }

    </div>
  );
}


// 컴포넌트
function Avatar({ username, age, address }) {
  return (
    <span className="Avatar">
      이름:{username}, 나이:{age}, 주소:{address}
    </span>
  );
}

export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}