[JavaScript] React - 배열 render

React

배열 rendering

배열을 생성하고 배열을 렌더링 하는 방법을 알아봅시다.

import React, { useRef } from 'react';			   // <App.js>
import UserList from './UserList';

function App() {

  return (
    <div>
      <UserList users={users} />
    </div>
  );
}

export default App;

import React from 'react'				 // <UserList.js>

function User({ user }) {
    return (
        <div>
            <b>{user.username}</b> <span>{user.email}</span>
        </div>
    )
}

function UserList() {
    const users = [
        {
            id: 1,
            username: 'Jongil',
            email: 'sji7532@gmail.com'
        },
        {
            id: 2,
            username: 'Test1',
            email: '1@gmail.com'
        },
        {
            id: 3,
            username: 'Sohn',
            email: '2@gmail.com',
        }
    ]

    return (
        <div>
            {/* 만약에 배열이 늘어난다면? 이렇게 하기는 쉽지 않다
            그렇기 때문에 아래 처럼 map을 사용하여 전체를 묶어 사용한다.
            <User user={users[0]} />       
            <User user={users[1]} />
            <User user={users[2]} /> */}
            {
                users.map(
             /* user => (<User user={user} />)   
             이렇게만 하면 경고가 출력되는데 (key라는 프롭스가 없다는 오류)*/
             // user => (<User user={user} key={user.id} />) 
             // 만약에 객체에 고유 id가 없다면  (id가 있는것이 성능이 좋다)
                    (user, index) => (<User user={user} key={index} />) 
   	      /*경고만 사라지고 성능이 좋아지진 않는다.*/
                )
            }
            {/*  -> 이렇게 만들 수 있지만 User라는 함수를 작성해서 밖으로 빼주었다.
            <div> 
                <b>{users[0].username}</b> <span>{users[0].email}</span>
            </div>
            <div>
                <b>{users[1].username}</b> <span>{users[1].email}</span>
            </div>
            <div>
                <b>{users[2].username}</b> <span>{users[2].email}</span>
            </div> */}
        </div>
    )
}
export default UserList

useRef를 사용해 Component 내부에 변수 생성

컴포넌트 안에 변수를 생성하면 다음 렌더링 될 때마다 변수는 초기화 되는데 이 때, useState를 사용해야되지만 useState를 사용하여 변경하면 컴포넌트가 리렌더링되는데 값을 바꿨을때 리렌더링 할 필요가 없는 값을 관리하게 될 때도 있습니다. 그런 경우에는 useRef를 사용합니다. useRef로 관리하는 값은 값이 바뀌어도 컴포넌트가 리렌더링 되지 않습니다!!!
(scorll 위치, setInterval의 id 등)
위 코드와는 다르게 App 컴포넌트에서 useRef를 관리하는 방법을 알아보도록 합시다.

import React, { useRef } from 'react';			   // <App.js>
import UserList from './UserList';

function App() {
  {/* User라는 배열을 App으로 가져와 props로 UserList에 넘겨준다 */}
  const users = [   
    {
      id: 1,
      username: 'Jongil',
      email: 'sji7532@gmail.com'
    },
    {
      id: 2,
      username: 'Test1',
      email: '1@gmail.com'
    },
    {
      id: 3,
      username: 'Sohn',
      email: '2@gmail.com',
    }
  ]

  const nextID = useRef(4) //초기값을 4로할거다 3개가 등록되어 있고 다음 아이디는 4 
 // useRef는 특정 돔을 선택하고 싶을때 사용할수도 있지만 어떠한 변수를 계속 기억하고 싶을때
 // 사용할 수도 있습니다. 리렌더링 되도 기억됩니다.

  const onCreate = () => {
    console.log(nextID.current)   //4
    nextID.current += 1;	
  }

  return (
    <div>
      <UserList users={users} />
    </div>
  );
}

export default App;

import React from 'react'				 // <UserList.js>

  {/*App으로 User 값을 지정했기 때문에 props로 user값을 받아와 사용한다.*/}
function User({ user }) {	
    return (
        <div>
            <b>{user.username}</b> <span>{user.email}</span>
        </div>
    )
}

function UserList({ users }) {

    return (
        <div>
            {
                users.map(
                    (user, index) => (<User user={user} key={index} />)
                )
            }
        </div>
    )
}
export default UserList

• fastcampus 벨로퍼트님 리액트 강의자료를 공부하며 정리하며 작성하였습니다.