[modern-react] 리액트 스터디 파일 추가

modern-react/my-react/src/chap03/SelectStyle.js

@@ -0,0 +1,46 @@
+import './SelectStyle.css';
+import cn from 'classnames';
+
+export default function SelectStyle({ mode }) {
+  return (
+    // mode 속성에 따라 스타일 클래스 전환
+    <div className={`box ${mode === 'light' ? 'light' : 'dark'}`}>
+      Hello World!
+    </div>
+
+    // <div className={mode === 'light' ? 'light' : 'dark'}>
+    //   Hello World!
+    // </div>
+
+    // <div className={(mode !== 'light') && 'dark'}>
+    //   Hello World!
+    // </div>
+
+    // <div className={cn('box', mode === 'light' ? 'light' : 'dark')}>
+    //   Hello World!
+    // </div>
+
+    // <div className={cn(
+    //   'box',
+    //   {
+    //     light: mode === 'light',
+    //     dark: mode === 'dark'
+    //   }
+    // )}>
+    //   Hello World!
+    // </div>
+
+    // <div className={cn(
+    //   'box',
+    //   [
+    //     'panel',
+    //     {
+    //       light: mode === 'light',
+    //       dark: mode === 'dark'
+    //     }
+    //   ]
+    // )}>
+    //   Hello World!
+    // </div>
+  );
+}