userCallback userCallback 은 불필요한 렌더링을 막을 수 있으므로 하위 컴포넌트의 참조 함수로 사용되는 경우 습관적으로 사용하는 것이 좋다. contextAPI - createContext createContext 로 context 를 생성한다. export const MyContext = createContext({ myData : [], dispatch: () => {} }); 이렇게 한번 Context 로 등록해놓으면 이후에 다른곳에서 import + useContext 로 사용할 수 있다. context 에 dispatch 를 넣어두면 다른곳에서 해당 context 를 불러와서 dispatch 를 할 수 있다. contextAPI - Provider render 에서 컴포넌트를..

일단 Component 로 만들고 불필요한 렌더링이 된다면 PureComponent 로 전환 하는 방식을 이용하자 일반적으로 제일 마지막에 있는 컴포넌트는 PureComponent 일 확률이 높다. 라이프사이클 생성시 라이프 사이클 : constructor -> render -> ref 설정해주는 메소드 -> componentDidMount 리렌더링 라이프 사이클 : shouldComponentUpdate -> render -> componentDidUpdate 소멸시 라이프 사이클 : componentWillUnmount -> 소멸 이외의 라이프 사이클은 deprecated 될 예정이므로 사용하지 않는 것이 좋다. componentDidMount 렌더링이 처음 시도되고 정상적으로 렌더링이 성공했다면 단..

import require : node 의 모듈시스템 import 와 require 는 호환이 되긴한다. import 를 쓰면 babel 이 require 로 변환해준다. export 엄밀히 따지면 export defaut 와 module.export 는 다르다. export 되는게 객체나 배열이면 구조분해하여 import 할 수 있다. export 는 여러개 올수 있으나 export default 는 단 한번만 나올 수 있다. defaultValue value 와 onChange 는 같이 써야된다. 두 조합을 쓰기 싫다면 defaultValue 를 써야한다. map {["A", "B", "C", "D"].map((alphabet) => { return ( {alphabet} ); })} 배열에서 사용할..

다음 강의 내용을 기반으로 정리하고 있습니다. 강의 동영상 강의 깃허브 JSX JSX 가 없는 경우 원래는 아래와 같이 써야한다. 바벨은 자바스크립트의 최신 문법과 JSX 를 사용할 수 있게 도와주는 도구다. const reactElement = React.createElement; render() { reactElement(...); } 태그안에 함수를 직접 입력할 경우 함수가 매번 생기게된다. 가능한 JSX 안의 함수는 클래스안의 메소드로 분리하는 것이 좋다. 프래그먼트 JSX 에서의 렌더의 최상위 컴포넌트는 반드시 하나만 존재해야한다. 일반적으로 ~~ 로 감싸지게 되는데 불필요한 div 태그가 HTML 에 생기므로 불필요한 div 를 원치 않는다면 아래와 같이 빈 태그() 나 프래그먼트() 를사용할..

NodeJS 브라우저가 아닌 환경에서도 자바스크립트를 사용할 수 있도록 하는 자바스크립트 런타임. NodeJS 는 웹서버가 아니다. NodeJS 만으로는 아무것도 하지 않는다. HttpServer 를 직접 작성해야한다. Express NodeJS 기반의 HttpServer Routing, Session, Template 등 기능을 제공 Express 예시 main.js var express = require('express'); var user = require('./routes/user'); var app = express(); app.get('/', function(req, res) { res.send('Hello World'); }); app.use('user', user); app.listen(3..

Redux Facebook 에서 주도하여 개발 Flux 아키텍쳐를 구현한 라이브러리 Flux 와 완전히 같다고 할 수는 없다. MVC 의 문제점과 Flux 아키텍처가 필요한 이유 : http://bestalign.github.io/2015/10/06/cartoon-guide-to-flux/ Redux 가 Flux 를 완전히 따라 할 수 없는 이유 : http://bestalign.github.io/2015/10/26/cartoon-intro-to-redux/ Redux 개념 action : 발생하는 상황. 어떤 작업인지 정보를 가진 객체 action creator : 어떤 값을 업데이트 하기위해 어떤 action 을 발생시킬지 결정한다. dispatcher : 액션을 읽고 어떤 일을 할지 처리한다. 동기..