반응형 props3 6. Array.map 한가지만으로 타이틀과 포스터 props하기 이전에는 복붙형식으로 영화수만큼 넣었으나 API에서 많은 양의 영화정보를 불러온경우엔? 어레이사용하면 된다. Array를 통해 리스트를 만들면 Array하나만으로 타이틀과 포스터를 출력할 수 있다. 리스트에는 여러 오브젝트(타이틀, 포스터들)들이 존재한다. 새로운 array. map은 array안의 엘리먼트이다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) App.js import React, { Component } from 'react'; import './App.css'; // Movie.js 컴포넌트 불러오고 // div밑에 해당 컴포넌트 이름쓰기 import Movie from './Movie'; // Array const movi.. 2019. 7. 4. 5. 각 component에서 props를 통해 해당 데이터를 넘겨받아보자 리액트에는 2가지 컨셉이 존재 - state - props 여기서s props에 다룰 것 메인 컴포넌트 app은 모든 영화자료들을 가지고 오고 카드형태로 나타난다. 즉, 메인 컴포넌트는 무비 리스트가 있고, 리스트 안에는 영화의 정보가 담긴다. 다시말해, 부모 컴포넌트가 칠드런 컴포넌트에게 정보를 준다는 의미. 정보를 줄 때, props를 통해서 준다. props를 사용하려면 function이 아닌 class로 컴포넌트가 선언되어야 한다. (이전까진 function으로 잘 작동되었으나 props에서는 막힘. 오류내용과 해결방법) App.js import React, { Component } from 'react'; import './App.css'; // Movie.js 컴포넌트 불러오고 // div밑에.. 2019. 7. 4. 오류내용 / props / function / class 오류내용 ./src/Movie.js Line 15: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. Compiling... Compiled with warnings. 오류화면 이유 class가 아닌 function으로 선언했기 때문 function components do not have this.props, 해결방법 t.. 2019. 7. 4. 이전 1 다음 반응형
