개발새발 개발자/ReactJS (17) 썸네일형 리스트형 [ReactJS] 4-2. Practicing this.setState() 이번 시간에는 setState()를 더 연습해본다. 1. App.js 에서 movies를 state로 이동 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import React, { Component } from "react"import "./App.css"import Movie from "./Movie" //Movie.js에서 여기로 export한 컴포넌트를 import class App extends Component { /* componentWillMount(){ console.log('will mount'); } componentDidMount(){ .. [ReactJS] 4-1. Thinking in React : Component State state는 리액트 컴포넌트 안에 있는 오브젝트다. 직전에 배운 lifecycle function처럼 이건 모든 리액트 컴포넌트 안에 있다. 1. state의 규칙 state가 바뀔 때마다 컴포넌트는 다시 render한다. = 컴포넌트 안에 state가 바뀔 때마다 render가 발생한다! 2. App.js에 state 추가 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950import React, { Component } from 'react';import './App.css';import Movie from './Movie'; //Movie.js에서 여기로 export한 컴포넌트를 impo.. [ReactJS] 3-1. Lifecycle Events on React 이제는 컴포넌트 라이프 사이클을 배울 차례이다. 컴포넌트는 여러 기능들을 정해진 순서대로 실행한다. 1. Render 우리는 render, 즉 컴포넌트를 띄울 때 이 순서로 진행한다.componentWillMount() -> render() -> componentDidMount() 이 사이클은 우리의 의사와 상관없이 자동으로 발생한다. 12345678910111213141516171819202122232425262728293031323334353637383940414243import React, { Component } from 'react';import './App.css';import Movie from './Movie'; //Movie.js에서 여기로 export한 컴포넌트를 import// 하나로.. [ReactJS] 2-4. Validating Props with PropTypes 2-3에서 만든 페이지는 콘솔에서 오류가 뜬다.array에 있는 각 child는 반드시 고유한 key prop을 가져야 한다." 1. App.js 1234567891011class App extends Component { render() { return ( {movies.map(movie => { })} ); }}Colored by Color Scriptercs 우리는 지난번에 map을 이용해 새로운 array를 만들었다.우리는 앞으로 array 안에 많은 영화를 갖게 될 것이다. 그런데 리액트는 엘리먼트가 많을 경우 unique한 key라는 것을 줘야 한다. 12345678910111213141516171819202122232425262728293031323334353637import React, {.. [ReactJS] 2-3. Lists with .map 지금까지 간략하게 리스트를 만들어보았다.하지만 만약 엄청난 양의 데이터를 불러오고 싶다면, 어떻게 해야할까? 1. App.js에서 배열 만들기 12345678910111213141516171819202122232425262728293031323334import React, { Component } from 'react';import './App.css';import Movie from './Movie'; //Movie.js에서 여기로 export한 컴포넌트를 import // 하나로 합치기const movies=[{ title:"Matrix", poster:"https://m.media-amazon.com/images/M/MV5BNzQzOTk3OTAtNDQ0Zi00ZTVkLWI0MTEtMDllZjNkYz.. [ReactJS] 2-2. Data flow with Props 리액트에는 2개의 주요 컨셉이 있다.하나는 state, 나머지 하나는 props. 이번에는 props를 살펴본다. 저번 시간을 통해 컴포넌트들은 서로 계층을 이루고 있고부모 컴포넌트는 자식 컴포넌트에게 정보를 넘겨준다.이 정보는 props를 통해 전달된다. 1. App.js에 Movie 리스트 배열 만들기 12345678910111213141516171819202122232425import React, { Component } from 'react';import './App.css';import Movie from './Movie'; const movies =["Matrix","Full Metal Jacket","Oldboy","Star Wars"] class App extends Component { .. [ReactJS] 2-1. 리액트 시작하기 ※이 글은 '노마드 코더' 리액트 강의를 필기한 글입니다. 리액트는 component 기반으로 돌아간다.그 중 크고 기본에 해당하는 컴포넌트는 app이라고 부른다. 설치한 movie_app 폴더에는 이미 app이 있음.css 등등 다양한 파일을 미리 셋업해 제공하고 있다. CRA(create-react-app)을 사용하는 이유는 따로 configuration을 하지 않아도 되기 때문.아무 설정 없이 수정한 코드를 저장만 하면 바로 서버를 만들고 컴파일 해준다. 일단 yarn을 시작하고 App.js를 보면 자바스크립트 안에 html이 들어있다.이런 형태를 JSX라고 한다. 리액트 컴포넌트를 만들 때 사용하는 언어다.규직은 심플하다. css의 class를 className이라고 지칭한다던지. 이 프로젝트에서.. [ReactJS] Ubuntu에 ReactJS 사용 환경 설치하기 1. node.js 설치npm 명령어를 사용하려면 node.js를 설치해야 한다.그동안 npm 명령이 안 먹은 이유가 있었구나...이렇게 알아갑니다. https://nodejs.org/en/ 설치하면 npm도 자동으로 설치해주는데,설치가 다 끝난후 npm install npm@latest -g출처 : https://www.npmjs.com/get-npm 2. 웹팩 설치윈도우에서 spawn 에러 나는 거 해결 못하고 결국 vmware에서 우분투로 시작. npm install -g create-react-app3. yarn 설치https://yarnpkg.com/en/ 4. movie_app 폴더 만들기$ create-react-app movie_appsudo로 작업하지 말 것. 괜히 멋 모르고 권한 땜에 .. 이전 1 2 3 다음
