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

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

@@ -0,0 +1,170 @@
+# [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
+
+function App() {
+  return (
+    <div className="content">
+	    <div>
+	    </div>
+    </div>
+  );
+}
+```
+
+1. **JSX에서 JS문법을 사용할 때는 항상 중괄호 {} 로 감싸주어야 한다.**
+
+    ```jsx
+    function App() {
+      let mju = 명지대
+      return (
+        <div className="content">
+           <div>
+            <p>**{mju}**</p>
+           </div>
+        </div>
+      );
+    }
+
+    export default App;
+
+    ```
+
+2. **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;
+    ```
+
+1. **JSX는 반드시 하나의 부모태그가 감싸는 형식이어야 한다**.
+    - React 내에서 Virtual DOM이 내부의 요소들의 변화를 감지할 때, 효율적인 비교를 위해 DOM 트리를 구성해야 한다. 따라서 코드를 작성할 때 **<div>** 로 감싸주어야 한다.
+
+2.  **모든 프로퍼티의 표기는 CamelCase로 작성한다.**
+    - JSX에서는 데이터가 객체로 전달되기 때문에 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 자리에 들어가는 함수를 이용해서 값을 변경해 줘야 한다.
+
+    ```jsx
+    let [a,b] = useState('명지대 국제 통상학과'); 
+    {/* a 는 설정한 변수 데이터 b 는 데이터를 변경할 수 있는 함수 */}
+    ```
+
+
+### state를 사용하는 이유
+
+- state 도 변수 선언과 마찬가지로 정보를 담는 객체이지만 변수와 달리, state는  stat값이 변경될 때 state가 포함된 html을 자동으로 렌더링을 리액트가 해준다.
+- 따라서 변경이 자주 일어나는 데이터는 state에 저장할 후 변경하는 것이 좋다.
+
+### props 특징
+
+- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.
+- state와 다르게 컴포넌트 내에서  데이터를 변경할 수 없고 읽기 전용 데이터이다.
+
+### props 사용법
+
+1. props 를 사용하기 위해선 상위 컴포넌트에서 연결할 하위 컴포넌트를 import 해서 연결한다.
+2. 자녀 컴포넌트에서 props를 변수로 선언한다.
+3. 원하는 위치에 선언한 변수를 사용한다.
+
+```jsx
+import React from 'react';
+import lee from './leesj'
+
+function lsj() {
+    return <div className="lsj">
+        <lee name="이성진" school="명지대" />
+    </div>
+}
+
+export default lee;
+```
+
+```jsx
+import React from "react"
+function lee() {
+
+    const name = props.name //부모 컴포넌트 (lee 에서 받은 정보를 사용하겠다//
+    const school = props.school
+
+    return(
+        <div>
+            <p>내 이름은 {name} 입니다.</p> 
+            <p>나는 {school}다.</p>
+        </div>
+    )
+}
+// 내 이름은 이성진 입니다.
+// 나는 명지대다.
+```
+
+### 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)