반응형 render2 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. 4. JSX / render / reactDOM / index.html / index.js JSX 이렇게 JS안에 html이 있는데 이를 JSX라고 부른다. JSX는 리액트 컴포넌트를 만들 때 사용하는 언어. JSX의 규칙은 간단하다. 예를 들어 css의 class가 아닌 className 이라고 사용한다. 소스는 logo를 사용하며 위에 logo가 정의되어 있다. 리액트는 컴포넌트 기반이기에 리액트의 출발점은 바로 컨포넌트 디자인! 제작할 컴포넌트는 3가지 1. 무비 컴포넌트 (앱 컴포넌트) 2. 무비 카드 3. 무비 커버 컴포넌트는 다른 파일에 작성한다. App.js, App.css 안에 있는 샘플내용들은 삭제! +. 모든 컴포넌트는 render function을 가짐. render의 기능은 컴포넌트가 나에게 보여주는 것. +. 하단의 나의 코드에선 class가 아닌 function으로 작.. 2019. 7. 3. 이전 1 다음 반응형
