MobX 최적화

컴포넌트를 최소화하여 사용

리스트 렌더링 시 하나의 컴포넌트 안에 리스트 / 리스트 외 정보가 들어간다면, 리스트는 별도의 컴포넌트로 분리하는 것이 좋음

class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <ul>
                {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
            </ul>
        </div>)
    }
}
// 위와 같은 코드는 별로 좋지 않다. 왜냐하면 user.name이 바뀔때도 컴포넌트가 리렌더링되기 때문이다. 

 

@observer class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (<div>
            {user.name}
            <TodosView todos={todos} />
        </div>)
    }
}

@observer class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return <ul>
            {todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
        </ul>)
    }
}
// 분리시켜 다음과 같이 하는 것이 좋다.

세부참조(역참조)는 최대한 늦게 한다.

세부참조/역참조란?

→ user라는 객체가 있고 그 안에 age, name 등의 property가 있을 때 user.name처럼 객체 내부를 조회하는 것

함수는 미리 바인딩하고, 파라미터는 내부에서 넣자

1. 컴포넌트에 함수를 전달할 때 미리 바인딩하는 것이 좋고, 파라미터가 유동적일 땐 컴포넌트 안에서 하는 것이 좋다.

2. 아래는 onPut에서 미리 item.name, item.price를 넣어주고 있는데,

   const ShopItemList = ({ onPut }) => {
     const itemList = items.map(item => (
       <ShopItem {...item} key={item.name} onPut={() => onPut(item.name, item.price)} />
     ));
     return <div>{itemList}</div>;
   };

3. onPut = {onPut}으로 전달하고 파라미터는 컴포넌트 내부에서 넣어주는 것이 좋다.

   즉, 컴포넌트 밖 ( ShopItemList)에서 미리 onPut을 바인딩하고, 컴포넌트 내부에서 파라미터를 전달하는 방식이어야 한다.

   const ShopItemList = ({ onPut }) => {
     const itemList = items.map(item => (
       <ShopItem {...item} key={item.name} onPut={onPut} />
     ));
     return <div>{itemList}</div>;
   };
   
   const ShopItem = ({ name, price, onPut }) => {
     return (
       <div className="ShopItem" onClick={() => onPut(name, price)}>
         <h4>{name}</h4>
         <div>{price}원</div>
       </div>
     );
   };