반응 UI에서 객체 배열을 탐색하는 방법!!!

완료할 주제

객체의 배열이란 무엇입니까

객체 배열을 트래버스하는 방법

DOM에서 값을 전달하는 방법.

한 구성 요소에서 다른 구성 요소로 값을 전달하는 방법(props/destructuring)

객체 배열이란 무엇입니까?

배열과 객체를 넣는 가장 간단한 방법은 데이터를 나중에 탐색할 목록으로 저장하는 것입니다.

배열은 -- ['string1', 'string2', 1, 5, true]로 나타낼 수 있습니다.

객체는 -- {height: 10, width: 10, structure: 'box'}로 표현할 수 있습니다.

객체와 배열의 기본적인 차이점은 배열에는 인덱스가 있고 객체에는 "키/값"쌍이 있다는 것입니다. 그러나 결국 배열은 후드 아래의 객체이기도 합니다.

우리는 서로의 속성을 동시에 사용할 수 있습니다.
개체의 배열 -> {바나나: [노란색, 달콤한], 사과: [빨간색, 달콤한]}

배열의 객체(객체 배열이라고도 함)
-> [{키1: 값, 키2: 값}, {키1: 값, 키2: 값}]

객체 배열을 트래버스하는 방법은 무엇입니까?

다른 옵션으로 배열을 통과하려면 이 링크를 확인하십시오Traverse methods.

DOM에서 값을 전달하는 방법

기본적으로 여기서는 javascript/jsx를 통해 개체 값을 html로 전달하는 방법을 설명하려고 합니다.
map을 사용하여 객체를 반복하고 jsx를 사용하여 html에 값을 전달할 것입니다.

코드 아래 체크아웃 --

##MovieList.js  component
const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<li key={movie.id)> //we have to pass the id so 
that js will know which element 
it should render else it will throw an error.
<h3>{movie.name}</h3>
<p>{movie.releaseDate}</p>
)
}

// In the above code we are traversing list of object using map to html <li> tag.

한 구성 요소에서 값을 전달하는 방법

another(props/destructuring)

나는 당신이 반응의 기본과 반응이 어떻게 작동하는지 알고 있다고 가정합니다. 기본적으로 반응에서 모놀리식 구조는 구성 요소로 나뉩니다.
이러한 구성 요소에서 우리는 사물을 렌더링하기 위해 상태(변수)의 소품(속성/인수)을 전달합니다.

아래 코드를 확인하세요.

## Suppose I've a component that 
we defined above but I want to pass
 those <li> values to the other js
 file(component) which will render
 the information on user screen in
 more beautiful way design by css.
 So How we do that.

Step 1

##MovieList.js  component
const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<li key={movie.id)>
<h3>{movie.name}</h3>
<p>{movie.releaseDate}</p>
)
}

Step 2

// I have a MovieListUI component in 
which <li> values gonna be pass. And it designed using material UI.

import React from 'react'
import { Paper } from '@material-ui/core'
export default function MovielistUI({ movie }) {
    return (
        <Paper>
         hELLO
        </Paper>

    )
}

Now we are gonna pass props or
 we can destructure the values
 for passing arguments

Step 3

1. By Passing Props
const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<MovieListUI key={movie.id} movie={movie}/> 
//here we are passing props  to 
pass the whole value of movies 
object to MovieListUI component
 //Not need to mention as we remove the whole
 list list which has the values
)
}


......

import React from 'react'
import { Paper } from '@material-ui/core'
export default function MovielistUI(props) {
    return (
        <Paper>
            <li key={props.movie.id}>
                <h3>{props.movie.name}</h3>
                <p>{props.movie.releaseDate}</p>
                <p>{props.movie.imbdRating}
                </p>
            </li>
        </Paper>

    )
}


2. By destructuring method

const movies = [
    {
        id: 1,
        name: 'Jurrasic Park',
        releaseDate: '12-10-2005',
        imbdRating: 4.8,
    },
    {

        id: 2,
        name: 'Avengers',
        releaseDate: '12-10-2009',
        imbdRating: 4.9,
    }
]

function movielist(){
return(
<div>
<ul>
{movies.map(movie) =>(
<MovieListUI key={movie.id} movie={movie}/> 
//here we are passing destructured property
 to pass the whole value of movies object 
to MovieListUI component
 //Not need to mention as we remove
 the whole list list which has the values
)
}


......

import React from 'react'
import { Paper } from '@material-ui/core'
export default function MovielistUI({movie}) {
    return (
        <Paper>
            <li key={movie.id}>
                <h3>{movie.name}</h3>
                <p>{movie.releaseDate}</p>
                <p>{movie.imbdRating}
                </p>
            </li>
        </Paper>

    )
}


//As you can see there's not much difference 
between props and destructuring. 
Props are used when you have so many arguments 
to pass or you want to like it that way. 
Same goes for destructuring.