Merge pull request #60 from nhn/fix/props-deep-compare

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
       jsx: true
     }
   },
-  extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended'],
+  extends: ['tui/es6', 'plugin:react/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
   plugins: ['react', 'prettier'],
   rules: {
     'react/prop-types': 0
@@ -17,4 +17,4 @@ module.exports = {
       version: 'detect'
     }
   }
-};
+};

.storybook/main.js

@@ -0,0 +1,9 @@
+module.exports = {
+  "stories": [
+    "../stories/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+  ],
+  "framework": "@storybook/react"
+}

.storybook/preview.js

@@ -0,0 +1,4 @@
+import 'tui-time-picker/dist/tui-time-picker.css';
+import 'tui-date-picker/dist/tui-date-picker.css';
+import 'tui-calendar/dist/tui-calendar.css';
+import '../stories/app.css';

README.md

@@ -189,8 +189,62 @@ const MyComponent = () => (
 );
 ```
 
+
 #### Theme
-Write own theme object. [Link - See "themeConfig"](https://nhn.github.io/tui.calendar/latest/themeConfig)
+
+You can write your own theme object. [Link - See "themeConfig"](https://nhn.github.io/tui.calendar/latest/themeConfig)
+
+#### ⚠️ Note for passing props
+
+For performance reason and to avoid unnecessary re-rendering, it's recommended to extract props to the outside of the component or memoize them with `useMemo` when props don't have to be affected by component state changes.  
+The calendar component check props equality with the `react-fast-compare` library though, the `template` props are not comparable, so it will always invoke re-render if you pass the `template` prop as an object literal.
+
+For more information, check [this issue](https://github.com/nhn/toast-ui.react-calendar/issues/26#issuecomment-906929298).
+
+```jsx
+const calendars = [
+  {
+    id: '0',
+    name: 'Private',
+    bgColor: '#9e5fff',
+    borderColor: '#9e5fff'
+  },
+  {
+    id: '1',
+    name: 'Company',
+    bgColor: '#00a9ff',
+    borderColor: '#00a9ff'
+  }
+];
+const template = {
+  milestone(schedule) {
+    return `<span style="color:#fff;background-color: ${schedule.bgColor};">${
+            schedule.title
+    }</span>`;
+  },
+  milestoneTitle() {
+    return 'Milestone';
+  },
+  allday(schedule) {
+    return `${schedule.title}<i class="fa fa-refresh"></i>`;
+  },
+  alldayTitle() {
+    return 'All Day';
+  }
+};
+
+function MyCalendar() {
+  // ...
+
+  return (
+    <Calendar
+      // ...
+      calendars={calendars}
+      template={template}
+    />
+  )
+}
+```
 
 ### Instance Methods