[2주차] 이유라 학습 PR 제출합니다.

week02/이유라/[2주차]이유라.md

@@ -0,0 +1,170 @@
+## React 동작 방식 JSX
+
+### JSX
+
+웹은 HTML, CSS, JavaScript로 구축된다. 초기에는 HTML이 콘텐츠를, CSS가 디자인을, JS가 로직을 각각 담당했다. 하지만 웹이 점점 더 인터랙티브해지면서 JS가 DOM 조작과 UI 렌더링까지 맡게 되었다. JSX는 이러한 변화에 대응하여 등장한 문법으로, HTML과 유사한 문법을 JS 코드 내에서 사용할 수 있도록 설계되었다. 그리고 이와 함께 React도 등장하며, JSX를 사용하여 렌더링 로직과 마크업을 컴포넌트 내에서 함께 처리할 수 있게 되었다.
+
+> #
+>
+> ### JSX 정의:
+>
+> JS 파일 내부에 HTML과 유사한 마크업을 작성할 수 있는 JS의 확장 문법이다.
+>
+> - JavaScript와 XML을 조합해 가독성이 좋은 코드를 작성할 수 있게 해 준다.
+> - Babel이 JSX를 JS로 변환해 주기 때문에 브라우저가 JSX 코드를 이해하고 실행할 수 있다.
+>
+> ### JSX 규칙:
+>
+> **1. 최상위 태그는 오직 하나**
+>
+> - JSX에서 여러 요소를 반환하기 위해서는 단일 부모 태그로 자식 태그들을 하나로 감싸야 한다. 즉, 여러 개의 태그들을 묶는 하나의 상위 요소가 필요하다는 뜻이다.
+> - `<div>`태그나 React.Fragment를 사용해 여러 태그를 감싸는 방식이 일반적이다. `<React.Fragment>`는 `<></>`로 줄여서 쓸 수 있다.
+>
+> ```JSX
+>   const element = (
+>   <React.Fragment>
+>       <div>Hello World</div>
+>       <div>Goodbye World</div>
+>   </React.Fragment>
+>   );
+> ```
+>
+> **2. 모든 태그를 닫아야 한다.**
+>
+> - JSX 내에서 열린 태그를 작성하면 '닫는 태그'가 없다는 에러가 발생한다.
+> - `<input/>`, `<br/>` 와 같은 self-closing tag도 끝에 `/` 를 붙여야 한다.
+>
+> **3. 모든 프로퍼티의 이름은 카멜 케이스(CamelCase)로 작성한다.**
+>
+> - JSX는 JS에 가깝기 때문에 React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
+> - 예시:`className`,`onFocus`,`onMousedown`
+>
+> **4. JSX는 자바스크립트의 표현식을 포함할 수 있다.**
+>
+> - 중괄호 {}를 사용해 JavaScript 코드를 JSX 안에 삽입할 수 있다.
+>
+> ```JSX
+>   const name = "World";
+>   const element = <h1>Hello, {name}!</h1>;
+> ```
+>
+> **5. 인라인 스타일 적용 시 객체를 사용한다.**
+>
+> ```JSX
+>   <div style={{backgroundColor: 'pink'}}>Hello, there ! </div>
+> ```
+>
+> ###### 인라인 스타일: 스타일 속성을 직접 태그의 속성으로 지정하는 방식이다.
+>
+> #
+
+## state와 props
+
+state와 props는 둘 다 컴포넌트의 데이터를 다루는 데 사용되지만, 목적과 사용 방법 등에서 차이점을 지닌다.
+
+> #
+>
+> ### State
+>
+> State(상태)는 컴포넌트에서 변경 가능한 데이터를 다루기 위한 객체이다.
+>
+> - 컴포넌트의 상태를 변경하거나 업데이트할 때 사용된다.
+> - 읽기와 쓰기 모두 가능하다.
+>   - 컴포넌트 내부에서 값의 업데이트가 가능하지만 **불변성을 유지**해 줘야 하기 때문에 `setState()` (클래스형 컴포넌트) `useSate()` (함수형 컴포넌트)를 사용한다. <br>
+>
+> ###### 불변성: 메모리에서 직접 변경하지 않고, 기존값을 수정하지 않으면서 새 값을 만든다.
+>
+> #### 사용 이유:
+>
+> 변수는 값이 변경되더라도 React에서 자동으로 UI가 리렌더링되지 않는다. 반면, state는 값이 변경될 때마다 React가 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트한다. 이를 더 쉽게 이해하기 위해, 일반 변수를 사용하여 계산기를 구현한다고 상상해 보자. 계산기에 `plus`, `minus` 버튼이 있다. 이 버튼들을 누를 때마다 숫자가 증가하거나 감소한다고 가정하자. 버튼을 누를 때마다 콘솔에서는 값이 변화된 것을 확인할 수 있지만, 화면에 그 변화가 반영되지 않는다면 이는 일반 변수를 사용했기 때문이다. React는 변수를 변경하더라도 그 변화가 화면에 반영되지 않는데, 이는 React가 상태 변화를 감지하지 않기 때문이다. 하지만 state는 값이 변경되었을 때 리렌더링이 되도록 구현되어 있기 때문에 UI가 자동으로 리렌더링된다.
+>
+> #### 사용 방법:
+>
+> 클래스형 컴포넌트에서는`this.state`를 통해 상태를 정의하고, `setState()`메서드를 통해 상태를 업데이트한다.
+> 함수형 컴포넌트에서는 useSate라는 Hook으로 상태를 관리한다.
+>
+> ```JSX
+> // useState
+>   const [state, setState] = useState(초기값);
+> ```
+>
+> #
+
+> #
+>
+> ### Props
+>
+> 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용되는 매개변수
+>
+> - props는 읽기 전용이기 때문에,자식 컴포넌트는 props 값을 변경할 수 없다. 따라서 props 값을 변경하고 싶다면 props를 전달한 부모 컴포넌트에서 변경하거나 state를 이용해 변경해야 한다.
+>
+> ```JSX
+>   // 부모 컴포넌트
+> import React from 'react';
+> import ChildComponent from './ChildComponent';
+>
+> const ParentComponent = () => {
+> return (
+>     <div>
+>        <ChildComponent name="유라" />
+>     </div>
+>   );
+> };
+> ```
+>
+> ```JSX
+>   // 자식 컴포넌트
+> import React from 'react';
+>
+> const ChildComponent  = (props) => {
+> return (
+>     <div>
+>        <p>안녕하세요. {props.name} 님 !</p>
+>     </div>
+>   );
+> };
+>
+> export default ParentComponent;
+> //안녕하세요. 유라 님 !
+> ```
+>
+> #
+
+> #
+>
+> ### state와 props 정리
+>
+> 1. state와 props의 차이점 <br>
+>    둘 다 컴포넌트 간의 데이터 전달을 위한 속성이지만 둘의 목적이 다르다. state는 컴포넌트 내부의 상태를 관리하고 변경 시 컴포넌트가 리렌더링되도록 한다. 반면, props는 부모로부터 자식에게 값을 전달하고 이를 기반으로 컴포넌트를 리렌더링한다.
+>    또한 변경 가능 여부에서도 state는 읽기와 쓰기가 모두 허용되지만, props는 읽기 전용이라는 점에서 차이가 있다.
+>
+> 2. state를 직접 변경하지 않고 setState를 사용하는 이유 <br>
+>    그 이유는 불변성과 관련이 있다. **state는 React 내장 객체**이기 때문에 이를 직접 변경할 경우 기존 객체의 참조에서는 변경사항이 반영되지 않는다. React가 변경 사항을 인지하기 위해서는 setState를 통해 state를 변경해야 한다.
+>
+> 3. setSate가 비동기적으로 작동하는 이유 <br>
+>    리렌더링과 관련이 있다. State값이 변경되면 React는 이를 감지하고 기존 Virtual DOM과 비교하여 변경사항을 반영한다. 하지만 State가 변경될 때마다 동기적으로 반영하게 되면 그때마다 리렌더링이 필요하고 이로 인해 애플리케이션 성능 저하가 일어날 수 있다. 따라서 setState는 변경된 state를 일괄 업데이트(batch update)하게끔 동작한다.
+>
+> #
+
+<details>
+<summary>[참고자료]</summary>
+<div markdown="참고자료">
+- 기본 자료 <br>
+1.JSX: <br>
+
+https://ko.legacy.reactjs.org/docs/introducing-jsx.html
+<br>
+
+2.State: <br>
+https://ko.react.dev/learn/updating-objects-in-state
+
+3.Props: <br>
+https://ko.react.dev/learn/passing-props-to-a-component
+
+- 추가 자료
+  State & Props <br>
+  https://valueengine.tistory.com/62 <br>
+  https://kindjjee.tistory.com/102
+
+</div>
+</details>