반응형 ○ WEB/19.11 NomadCoder_React JS WebService7 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. 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. 3. CRA / npm / yarn / create-react-app 사이트의 설치 내용을 그대로 따라 하면 된다. 그러나 사이트와 달리 npm이 아닌 yarn으로 설치를 진행 (우선, 설치는 yarn을 통해 완료되기에 이전에 yarn이 설치되어있어야한다.) npx create-react-app movie_app cd movie_app yarn start (npx comes with npm 5.2+ and higher, see instructions for older npm versions) 입력을 하면 다음처럼 진행된다. 하나하나 차례대로 설명해보면 1. npx create-react-app movie_app 을 입력하면 다음처럼 4개의 scripts(start,build,test,eject)가 생성된다. 2. cd movie_app yarn start 을 입력했을시엔 .. 2019. 7. 2. 2. 리액트 / 웹팩 / 페이스북 / create react app 이전에 npm node.js Yarn 설치할 것 리액트 코드를 JS로 바꿔주는 툴이 필요 이를 트랜스파일러 / 트랜스포머 라고 부름 웹팩 우린 웹팩이란 트랜스파일러를 사용할것임. 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경해줌 모듈번들러라고 부름 JS 최신버전 es6, ecmascript6 이 버전은 유용하고 편리한 기능이 많지만 모든 브라우저가 이해하진못함. 웹팩은 es6를 브라우저가 이해할 수 있게 변경해줌 그러나 시간이 부족한 경우 페이스북에서 초보자들을 위해 제공해주는 create react app 툴을 이용하여 설정 작업 없이 한번에 리액트 앱 구현 가능 웹팩은 추후 풀스택학습에서 다루기로 하고 여기선 미리 설치된 개발서버(pre-built-development server)로 학습한다. 2019. 7. 1. 1. React란? / 핫한 이유? React가 핫한 이유 1. JS기반이라 JS만 잘하면 됨 (angular,vue js처럼 다른 언어 배우지 않아도 됨) 2. 구조가 깔끔하다. 요소별(컴포넌트별)로 나눠서 작업가능하기에 요소를 다른 곳에도 사용가능 +. JSX란 리액트로 html을 사용하는 방법 3. 단방향 데이터 플로우(Data -> UI)를 가지기에 데이터는 항상 일정 장소에 있고 그 장소에서만 변경가능. 상태가 변했을 시 데이터는 그대로 있고 UI만 업뎃된다. 즉, 데이터가 UI를 변경시키는 것. (Angular의 경우, 데이터는 view나 model로 변한다.) 4. 방대한 커뮤니티, 오픈소스 5. 프레임워크가 아닌 UI 라이브러리이므로 파이썬,루비,nodejs 랑 섞어서 쓸 수 있다. model, view, controller.. 2019. 7. 1. 0. ubuntu bash shell 설정하기 / node.js / npm 설치 ubuntu bash shell 설정 1. 최소 성능 확인 설정 > 시스템 > 정보 2. 개발자모드로 변경 (혹은 MS에서 Ubuntu 앱을 다운받아서 사용하면 된다.) 설정 > 업데이트 및 보안 > '개발자용' 태그 > '개발자 모드' 선택 3. 윈도우용 리눅스 프로그램 설치 (혹은 MS에서 Ubuntu 앱을 다운받아서 사용하면 된다.) 제어판 > 프로그램 > 프로그램 및 기능 > windows 기능 켜기 끄기 > 'Linux용 windows 하위시스템' 체크 > 재부팅하기 4. lxrun 설치 cmd 관리자 권한으로 실행 lxrun /install 입력하기 (윈도우 로그인을 이메일 계정으로 한다. 로컬계정은 PC이름을 영문으로해야한다.) Unix 사용자 생성 후 설치완료 이제 bash 사용가능 우분투.. 2019. 7. 1. 이전 1 다음 반응형
