전체 글 (123) 썸네일형 리스트형 DATA TYPES 자바스크립트의 데이터타입은 크게 두가지로 분류된다. 기본형(Primitive Type) : Number, String, Boolean, null, undefined 등 참조형(Reference Type) : Object (Array, Function, RegExp) 등 기본형은 값을 그대로 할당하고 참조형은 값이 저장된 주소값을 할당(참조)한다. - 기본형 var a; a = 10; var b = 'abc';변수명 a b ... ... 주소 @313 @314 주소 ... 313 314 ... 데이터 10 'abc' - 참조형 var obj = { a: 1, b: 'b' }; var obj2 = obj; obj2.a = 10; // 같은주소를 참조하고 있는 obj.a 의 값도 바뀌게된다 변수명 obj ob.. Redux Redux 리액트를 위한 state management 툴 global state container store : React 프로젝트에서 사용하는 모든 동적 데이터들을 담아두는 곳 action : 어떤 변화가 일어나야 할 지 나타내는 객체 reducer : action 객체를 받았을 때 데이터를 어떻게 바꿀지, 어떻게 처리할지 정의하는 객체 의존 모듈 redux react-redux npm install --save redux react-redux 앱은 많은 컴포넌트를 기반으로 지어졌는데 또한 동시에 global state를 갖고 있다 유저의 로그인 여부를 global state의 예시로 들면 global state는 모든 컴포넌트가 영향을 받는다 유저가 로그인을 했느냐, 안했느냐에 따라 앱이 어떻게 보.. Async Await - asynchronous function _getMovies = async () => { const movies = await this._callApi() this.setState({ movies } } await으로 하는 것은 _callAPi 기능이 '끝나는 것'을 기다리고(성공여부가 아님) setState는 _callApi 작업이 완료되기 전 까지는 실행되지 않음 AJAX (promise) fetch API 사용 fetch('url') .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log(err)) fetch('url', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }) promise = asynchronous 계속 다른 작업을 스케쥴해놓을 수 있음. 다른 작업이 끝나기를 기다릴 필요 없음 fetch, p.. Smart vs Dumb return 만 필요한 컴포넌트의 경우 class 컴포넌트 대신 functional 컴포넌트를 사용 functional 컴포넌트는 state, render, 라이프사이클이 없음 function MoviePoster({poster}){ return ( ) } class 컴포넌트 = smart component functional 컴포넌트 = dumb component state 컴포넌트 안에 state가 바뀔 때 마다, render()가 발생 Life Cycle 출처 : http://velopert.com RendercomponentWillMount() -> render() -> componentDidMount() UpdatecomponentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> componentDidUpdate() componentWillReceiveProps() : 컴포넌트가 새로운 props를 받음shouldComponentUpdate() : old props, 새로운 props를 살펴본 다음에 이전과 새로운 props가 다르면 리액트는 '업데이트 = true' 라고 생각함. 그래서 이전 props가 새로운 props들과 다르면 업데이트가 발생.. Introduction to React MVC 의 View 에 해당하는 UI 라이브러리데이터가 UI를 컨트롤UI가 데이터를 컨트롤하지 않음 create react app (페이스북 제공) : https://github.com/facebookincubator/create-react-appCRA(create react app) 에 웹팩이 포함 (웹팩 : 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경하는 역할) 패키지 매니저 : yarn(선호), npm React = 라이브러리ReactDOM = 라이브러리를 웹사이트에 출력해줌ReactDOM은 1개의 컴포넌트를 출력(render) render > return > JSX 이전 1 2 3 4 5 6 7 ··· 16 다음
