공부 썸네일형 리스트형 class vs function 리액트에서 컴포넌트를 만드는 두 가지 방법 class 스타일 function 스타일 class 리액트의 기능을 100% 활용할 수 있다. 문법알아야 한다. function 간편하다. 기능이 부족했다. 컴포넌트 내부의 state 를 만들어 사용하는 것을 할 수 없었다. 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 하지만 hook 개념이 도입되면서, 위의 부족한 것을 할 수 있게돼었다. shouldComponentUpdate shouldComponentUpdate 컴포넌트의 render 함수가 실행돼야 하는지, 실행되지 않아야 하는지를 결정할 수 있게 해주는 함수 render 는 비용이 많이든다. props, state 의 변경에 따라 호출된다. render 이전에 shouldComponentUpdate 실행된다. shouldComponentUpdate 의 반환값이 true 이면 render가 호출되고, false 이면 render가 호출되지 않는다. shouldComponentUpdate 를 통해 새롭게 바뀐 값과 이전 값에 접근할 수 있다. newProps 로 새롭게 바뀐 값 접근 this.props 를 통해 현재 값 접근 shouldComponentUpdatE(newProps, newState) { return fals.. push & concat 배열에 데이터를 추가하는 방법 push 원본 배열의 값이 변경된다. concat 원본은 그대로지만 원본을 변경한 새로운 배열이 반환된다. 불변성(immutable) 를 유지할 수 있다. push 보다는 concat 을 사용하자!! 불변성을 지키기 위한 방법 immutable.js https://immutable-js.com/ Immutable.js Immutable collections for JavaScript Read the docs and eat your vegetables. Docs are automatically generated from README.md and immutable.d.ts. Please contribute! Also, don't miss the wiki which contain.. props & state props read only 컴포넌트 안에서 외부에서 전달된 props의 값을 바꾸는 것은 금지돼 있다. state 수정 할 때는 setState로 바꾼다. state 가 바뀌면 다시 랜더링된다. 참고 https://velog.io/@jeromecheon?tag=React State and Lifecycle React 컴포넌트 안의 state와 생명주기에 대한 개념을 소개합니다. Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배웁니다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트 할 것입니다. class Clock extends React.Component { render() { return ( Hello, World It is {this.props.date.toLocaleTimeString()}. ); } } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000);render 메소드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 .. Components와 Props 컴포넌트를 통해 UI 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 함수 컴포넌트와 클래스 컴포넌트 함수 컴포넌트 JavaScript 함수로 작성 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 클래스 컴포넌트 ES6 class 사용 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } React 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일합니다. 컴포넌트 렌더링 React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다. const element = ; React가 사용자 .. [APM툴] Pinpoint 설치하기 Pinpoint 설치 1. 자바 환경변수 설정 JAVA_6_HOME : /Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home JAVA_7_HOME : /Library/Java/JavaVirtualMachines/jdk1.7.0_80.jdk/Contents/Home JAVA_8_HOME : /Library/Java/JavaVirtualMachines/jdk1.8.0_152.jdk/Contents/Home JAVA_9_HOME : /Library/Java/JavaVirtualMachines/jdk-9.0.4.jdk/Contents/Home 환경 변수 수정 vi ~/.bash_profile 환경 변수 추가 # JAVA export JAVA_HOME=/Libra.. [LMAX-Exchange/disruptor] ringbuffer 사용하기 LMAX Disruptor A High Performance Inter-Thread Messaging Library Disruptor의 목적 동일 프로세스 내, 스레드 간의 데이터(메시지, 이벤트 등..)를 이동시키는 것 사용법 기본예제 수정하여 테스트 진행 메이븐 디펜던시 com.lmax disruptor 3.2.0 ValueEvent.class @Getter @Setter public class ValueEvent { private String value; public final static EventFactory EVENT_FACTORY = new EventFactory() { @Override public ValueEvent newInstance() { // TODO Auto-generated m.. 이전 1 2 3 4 ··· 7 다음
