관광이 블로그

State를 활용한 라이프 사이클 실습 예제속에 주석으로 달아 놓았습니다. import React,{ Component } from 'react';import './App.css';import Movie from './Movie'; const moviesTitle = [ "Matrix", "Full Metal Jacket", "Oldboy", "Star Wars"] const moviesImage = ["https://d2e111jq13me73.cloudfront.net/sites/default/files/styles/share_link_image_large/public/screenshots/csm-movie/the-hunger-games-ss1.jpg?itok=EFSm-KAL","https://cdn1..

리액트 라이프 사이클 이론 // lifecycle 과정 // Render:componentWillMount->,render ,-> componentDidMount , // update componentWillReceiveProps() -> shouldComponentUpdate() == true -> componentWillUpdate -> render() -> componentDidUpdate // 사이클은 render를 위한 것이고 업데이트의 경우에는 ? 과정이 더 많다. class App extends Component { componentWillMount(){ console.log('will mount') } componentDidMount(){ console.log('did mount') } r..

1. 리액트는 2개의 주요 컨셉이 있음 - state - props : 부모가 자식에게 데이터를 주기 위함 2. 영화를 카드 형태로 만든다음에 movie 리스트로 만들기 위함 3. App.js에서 작성한 것들을 movie 컴포넌트로 보내고 싶을경우? 이런식으로 app.js에서 작성해주고 자식 컴포넌트 Movie.js 에서는 { this.props.title} 이런식으로 작성해 주면 깔끔하게리스트 목록대로 나오는것을 확인할 수 있다.꼭 괄호 " { } " 가 들어 가도록 한다. => JSX의 경우 명령실행시키기 위한 조건 4. 이제 이미지 리스트 만들어보자~ 가장 중요한 개념은 부모컴포넌트의 요소를 자식 컴포넌트로 넘겨줄 수 있음. 이때 강력한 힘이 발휘 된다. App.js import React,{ Co..

1. 첫번째 movie list 만들기 일단 서버 부터 npm start로 열어주자. jsx는 리액트 컴포넌트를 만들때 사용하는 언어 규칙은 상당히 심플하다. jsx 의 예) 자바 스크립트 안의 html Welcome to React KGH To get started, edit src/App.js and save to reload. 2. 이제 세가지 컴포넌트를 만들거다 - movie 리스트- movie 카드- movie 커버 컴포넌트를 각각의 파일에다가 구현할것이다. app.js , app.css 모두 기본 내용들을 지워주도록하자 모든 컴포넌트는 render와 function을 가지고 있음 render는 뭔가를 보여주는 출력하는 기능이 컴포넌트가 나에게 보여주는것이 무엇인가?예) npm start 실행시..

- 노마드코더 1. API yts.ag 클론 코딩을 통해서 만들어 볼 것이다. 2. 트랜스 파일러( 웹 팩 ) 3. 리액트 코드를 브라우저가 이해할수 있는 언어로 바꿔주는것(JS 6 Version)https://webpack.github.io/ 4. 리액트로 작업하려면 웹팩과 같은 모듈번들러를 사용한다 5. 페이스북이 create-react-app 이라는것을 제공해준다. 그러면 모듈번들러 같은걸 사용할 필요가 없다 1. WebStorm Install -> 나는 Bracket을 사용하였다 2. Node.js Install 3. cmd C:\>cd movie_app_reactC:\movie_app_react>npm install -g create-react-app movie_app을 만들기 위함(패키지 설치..

ReactJS (리액트란?) 정의 및 특징 1. 자바스크립트 기반이다 2. angular,vue 처럼 다른언어를 배울 필요가 없다 3. 리액트 모든것은 자바스크립트기반(약간의 html 정도?) 4. 리액트를 배우면 다른곳에선 필요없는 기술을 배울 필요가 없음예) Angular 5. 리액트는 요소별로 쪼개서 작업 할 수 있음 (다른곳으로 가져다가 쓸 수가 있음) 6. 단방향 DataFlow를 가지고 있음 예) Data-> UI (상태가 변하면 데이터가 변하는게 아니라 UI가 변함)데이터가 변화면 -> UI Update 7. 거대한 라이브러리, 커뮤니티,오픈소스가 되게 강점이다 8. 프레임 워크 X , UI 라이브러리 O 9. 리액트는 View 이다! 10. 장고, 루비온레일즈,node.js랑 섞어서 쓰기 가능