[2주차] 이성진 학습 PR 제출합니다.

week02/이성진/[2주차] 이성진.md

@@ -0,0 +1,177 @@
+# [2주차] JSX와 state , props
+
+## JSX
+
+### JSX 의 개념
+
+- JSX는 Javascript와 XML이 합쳐진 문법이다 .
+
+    <aside>
+    💡
+
+    > "XML (eXtensible Markup Language) “ 이란? HTML과 같은 마크업 언어이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다.
+    > 
+    </aside>
+
+- JSX 는 리액트로 프로젝트를 개발할 때 사용되는 문법이므로 공식적인 Javascript 문법은 아니다.
+
+### JSX를 사용하면 좋은 점
+
+- JSX 는 javascript와 HTML 문법을 동시에 작성할 수 있기 때문에 편리하다.
+- 또한 HTML 코드와 비슷하기 때문에 일반 Javascript 코드 보다 가독성이 높다.
+
+### JSX 문법 특징
+
+1. **class 를 지정할 때 class 가 아닌 className을 사용해야 한다.**
+
+- JSX에서는 class가 javascript에서 예약어이기 때문에 에러가 발생할 수 있다. 
+- 따라서 클래스를 지정해 주기 위해서는 className을 사용한다.
+
+```jsx
+
+function App() {
+  return (
+    <div className="content">
+	    <div>
+	    </div>
+    </div>
+  );
+}
+```
+
+2. **JSX에서 JS문법을 사용할 때는 항상 중괄호 {} 로 감싸주어야 한다.**
+
+    ```jsx
+    function App() {
+      let mju = 명지대
+      return (
+        <div className="content">
+           <div>
+            <p>**{mju}**</p>
+           </div>
+        </div>
+      );
+    }
+
+    export default App;
+
+    ```
+
+3. **JSX는 스타일을 지정할 때에도 {}로 감싸 주어 표현한다.** 
+- 이때, {key : value} 형태로 감싸주고 style = { { color : blue } } 이런식으로 표현한다.
+
+    ```jsx
+    function App() {
+      let mju = 명지대
+      return (
+        <div className="content">
+           <div>
+            **<p stlye = { { color : 'blue' } }>{mju}</p>**
+
+           </div>
+        </div>
+      );
+    }
+
+    export default App;
+    ```
+
+4. **JSX는 반드시 하나의 부모태그가 감싸는 형식이어야 한다**.
+    - React 내에서 Virtual DOM이 내부의 요소들의 변화를 감지할 때, 효율적인 비교를 위해 DOM 트리를 구성해야 한다. 따라서 코드를 작성할 때 **<div>** 로 감싸주어야 한다.
+
+5.  **모든 프로퍼티의 표기는 CamelCase로 작성한다.**
+    - JSX에서는 js를 확장시킨 문법이기 때문에 HTML 대신 **카멜 케이스** 네이밍 규칙을 사용한다. ex) **classname (x) className**
+
+## state , props
+
+- **state** 와 **props**는 둘 다 javascript의 일반 객체 이면서 컴포넌트를 구성하는 정보를 가지고 있지만 사용 용도에 따른 차이가 존재한다.
+
+### **state** 특징
+
+- state는 컴포넌트 내에서 변경 가능한 데이터를 보관 및 활용할 수 있는 객체이다.
+- state 는 props와 다르게 컴포넌트 내에서 데이터를 변경할 수 있으나, 직접적으로 변경하는 것이 아닌 함수를 이용해서 변경해야 한다.
+- 읽기 쓰기 둘 다 가능하다.
+
+### **state 사용법**
+
+- state를 사용하려면 먼저 Import 를 해주어야 한다. 그후에 useState() 함수를 사용할 수 있게 된다.
+
+    `import React, { useState } from 'react';`
+
+- useState를 사용하면 데이터가 [a, b] 형식의 array로 2개가 생성된다.
+- a 에는 실제 저장되는 데이터가 들어있고, b 에는 저장할 데이터를 변경해주는 함수가 들어있다. **state는 직접적으로 값을 변경할 수 없기에** 데이터2 자리에 들어가는 함수를 이용해서 값을 변경해 줘야 한다.
+
+- ex
+  ```let [value, setValue] = useState("데이터");
+  setValue("변경된 데이터");
+  ```
+
+
+
+### state를 사용하는 이유
+
+- state 도 변수선언과 마찬가지로 정보를 담는 객체이지만 변수와 달리, state값이 변경될 때 state가 포함된 html을 자동으로 렌더링을 리액트가 해준다.
+- 따라서 변경이 자주 일어나는 데이터는 state에 저장할 후 변경하는 것이 좋다.
+
+### props 특징
+
+- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.
+- state와 다르게 컴포넌트 내에서  데이터를 변경할 수 없고 읽기 전용 데이터이다.
+
+### props 사용법
+
+1. 부모 컴포넌트에서 자녀 컴포넌트에 건네줄 데이터를 설정하고 자식 컴포넌트를 호출한다.
+
+2. 자녀 컴포넌트에서 props를 변수로 선언하고 부모 컴포넌트에 연결 된 데이터를 받는다.
+
+3. 원하는 위치에 선언한 변수를 사용한다.
+
+``` 
+{// 자식 컴포넌트 //}
+
+function Tool(props) {
+  const name = props.name; // 부모 컴포넌트에서 받은 데이터를 사용하겠다
+  const food = props.food;
+  return (
+    <div>
+      <h1> 내 이름은 {name} 이다.</h1> // 데이터 사용
+      <p> 내가 제일 좋아하는 음식은 {tool} 이다.</p>
+    </div>
+  );
+}
+
+export default Tool;
+```
+
+``` 
+{//부모 컴포넌트//}
+
+import Tool from './Tool';
+
+function App() {
+  return (
+    <div className="App">
+      <Tool name="이성진" tool="치킨" /> //props 데이터 값 지정
+    </div>
+  );
+}
+
+export default App;
+```
+### props를 사용하는 이유
+
+- props 를 사용하면 데이터를 쉽게 공유하고 재사용할 수 있어 코드의 재사용성이 높아진다.
+- 단방향 데이터 흐름으로 인해 데이터 추적이 쉬워지고 디버깅이 쉬워진다.
+- 컴포넌트 간의 의존성이 낮아져 코드 수정이나 유지 보수가 쉬워진다.
+
+- **참고자료**
+    - JSX : [https://goddaehee.tistory.com/296](https://goddaehee.tistory.com/296)
+
+               [https://velog.io/@day_1226/알아보자-JSX-작성-규칙-7가지](https://velog.io/@day_1226/%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-JSX-%EC%9E%91%EC%84%B1-%EA%B7%9C%EC%B9%99-7%EA%B0%80%EC%A7%80)
+
+               [https://velog.io/@haizel/JSX는-무엇인가-정의-장점-규칙-컴파일](https://velog.io/@haizel/JSX%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%EC%A0%95%EC%9D%98-%EC%9E%A5%EC%A0%90-%EA%B7%9C%EC%B9%99-%EC%BB%B4%ED%8C%8C%EC%9D%BC)
+
+    - props : [https://minseok0123.github.io/리액트props/](https://minseok0123.github.io/%EB%A6%AC%EC%95%A1%ED%8A%B8props/)
+    - state : [https://kindjjee.tistory.com/102](https://kindjjee.tistory.com/102)
+
+                   [https://velog.io/@s2s2hyun/React.state-props-하는일과-차이점](https://velog.io/@s2s2hyun/React.state-props-%ED%95%98%EB%8A%94%EC%9D%BC%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90)

week02/이성진/todo/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

week02/이성진/todo/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

week02/이성진/todo/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

week02/이성진/todo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>