104%

이 글은 공식문서를 보고 요약, 의역 정리한것입니다. observable은 mobx패키지에서 // wrong import { observable } from "mobx/lib/mobx" // correct import { observable } from "mobx" Use @observer on all components that render @observables. observable을 사용하는 모든 컴포넌트에 observer를 달아라. 그래야 mobx가 최대한 최적화를 해줄 수 있다. observer는 inject보다 먼저 // wrong @observer @inject('store') // correct @inject('store') @observer observable을 받아서 컴포넌트 내부에 한..

이 글은 Mobx 공식문서를 토대로 재해석한 글입니다. 서론 Mobx의 철학은 "애플리케이션의 상태로 부터 파생될수 있는 모든것들은 파생되어야한다" 입니다. 액션 이벤트는 액션을 일으킵니다. 애플리케이션의 state는 오로지 action을 통해서만 변경해야합니다. action은 state를 변경할뿐 아니라, 때로는 Side Effect를 일으킵니다. Side Effect 프로그래밍에서 사이드 이펙트란 함수 내부에서 함수 외부에 접근하여 영향을 주는 행위를 의미합니다. 예를들어 함수 내부에서 Disk I/O가 일어난다던지 네트워크 요청을 한다든지 하는것은 영향 범위가 함수 내부를 벗어났으므로 Side Effect가 발생한것입니다. Mobx가 관리하는 State는 Observable(관찰가능한)하며 최소한으..

클래스형 컴포넌트를 작성해보신분들은 Class의 형태로 리액트 컴포넌트를 정의하고 그것을 인스턴스화해서 화면에 컴포넌트를 렌더링 하는 과정을 알고 있을겁니다. 그럼 Elements는 대체 뭘까요? 지금까지의 UI 라이브러리들은 자식 컴포넌트의 생성과 제거의 책임을 부모 컴포넌트에게 돌렸습니다. 그래서 부모 컴포넌트의 값이 바뀌면 그 부모컴포넌트에서 자식을 새롭게 갱신하는 작업을 해줬어야 했죠. 부모 컴포넌트는 자식 컴포넌트 관리뿐만아니라 본인이 가지고 있는 DOM Node도 관리해야합니다. 부모에게 너무 많은 역할을 맡긴것입니다. state가 늘어날수록 코드는 제곱으로 늘어납니다. 그리고 부모가 자식을 직접적인 참조로 가지고 있기 때문에 부모와 자식이 아주 강하게 묶여 있다는 단점도 있었죠. 리액트는 이..

blog.cloudboost.io/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e 3 Reasons why I stopped using React.setState Since a few months I’ve stopped using React’s setState on all my new React components. Don’t get me wrong, I didn’t stop having local… blog.cloudboost.io 나는 리액트 컴포넌트의 local state 관리 방식을 사용하지 않기로 했다. 리액트 초심자에게 setState는 다소 까다롭다. 아래 상황을 보자.나는 리액트 컴포넌트의 local state 관리 방식을 사용하지 않..

셀의 크기를 화면에서 보이지 않는 방식으로 측정한다음 세팅해주는 HOC이다. width나 height중 하나를 고정시켜야 다른 하나를 잴 수 있다. CellMeasurer는 Grid, List, Table에서 사용할 수 있다. CellMeasurerCache CellMeasurer가 측정한 값을 캐싱하는 용도이다. 그 캐싱된 값은 부모인 Grid와도 공유된다. defaultHeight number 셀이 처음 렌더링 될때 기본 값 defaultWidth number 셀이 처음 렌더링 될때 기본 값 fixedHeight boolean 높이를 고정 시키고 너비를 동적으로 fixedWidth boolean 너비를 고정 시키고 높이를 동적으로 minHeight number 계산된 row Height의 최소값 mi..

AutoSizer 부모 element의 너비와 높이를 자식 컴포넌트에 전달해주는 HOC이다. 이걸 활용하면 부모의 너비와 높이만큼 자식을 꽉 채울 수 있다. 옵션값 children ({ height: number, width: number }) => PropTypes.element 이런 형태여야함. className, style AutoSizer에 추가됨 defaultWidth, defaultHeight SSR시 초기 너비와 높이값. 정확한 값이 계산되면 그 값으로 대체됨. disableWidth, disableHeight 고정된 width와 height nonce Nonce of the inlined stylesheets for Content Security Policy onResize 리사이징될때 호..

{props.items.map((TabComponent, index) => { return ; })} items에 들어있는 컴포넌트들을 순서대로 뿌려주려고 하던 도중 아래와 같은 오류가 발생했다. JSX element type 'TabComponent' does not have any construct or call signatures. 원인 생성자와 인스턴스의 차이때문이다. // 컴포넌트 선언 class Greeter extends React.Component { render() { return Hello, {this.props.whoToGreet}; } } // 올바른 컴포넌트 사용 return ; // 잘못된 컴포넌트 사용 let Greet = new Greeter(); // 인스턴스화된 컴포넌트를..

타입스크립트로 리액트 코드를 작성하다보면 컴포넌트의 타입을 정해줘야하는데 너무 여러가지 타입이 있어서 헷갈려서 정리하고자 합니다. 배경지식 클래스형 컴포넌트는 render메소드에서 ReactNode를 리턴한다. 함수형 컴포넌트는 ReactElement를 리턴한다. JSX는 바벨에 의해서 React.createElement(component, props, ...children) 함수로 트랜스파일된다. html 처럼 생긴 문법을 리액트 라이브러리의 렌더링 함수로 변환하는것이다. 그래서 JSX를 사용하지 않고도 리액트를 사용할 수 있으나(JSX없이 사용하는 React) 이렇게 하면 매우 불편하다. // jsx Hello {this.props.toWhat} JSX는 아래 처럼 변경된다. // transpile ..