update post

Author: lazy-dinosaur

content/posts/resource/React/Props Drilling 이란 무엇인가.md renamed to content/posts/자원/React/Props Drilling 이란 무엇인가.md

@@ -4,7 +4,7 @@ tags:
   - react
 createdAt: 2025-04-20 10:03:21
 modifiedAt: 2025-04-20 23:26:54
-publish: resource/React
+publish: 자원/React
 related: ""
 series: ""
 ---

content/posts/resource/React/React.md renamed to content/posts/자원/React/React.md

@@ -4,7 +4,7 @@ tags:
   - react
 createdAt: 2025-04-11 18:37:48
 modifiedAt: 2025-04-20 10:03:17
-publish: resource/React
+publish: 자원/React
 related: ""
 series: ""
 ---

content/posts/resource/React/flux 패턴이란.md renamed to content/posts/자원/React/flux 패턴이란.md

@@ -4,7 +4,7 @@ tags:
   - react
 createdAt: 2025-04-19 22:48:15
 modifiedAt: 2025-04-20 09:23:43
-publish: resource/React
+publish: 자원/React
 related: ""
 series: ""
 ---

content/posts/resource/React/props와 state.md renamed to content/posts/자원/React/props와 state.md

@@ -3,14 +3,16 @@ tags:
   - resource
   - react
 createdAt: 2025-04-20 09:40:39
-modifiedAt: 2025-04-20 12:44:48
-publish: resource/React
+modifiedAt: 2025-04-21 07:22:55
+publish: 자원/React
 related: ""
 series: ""
 ---
 
 # props와 state
 
+![1745187761-propsAndState.png](_assets/attachments/1745187761-propsAndState.png)
+
 props 와 state 둘다 데이터를 관리하기 위한 값이다.
 
 ## State(상태)

content/posts/resource/React/엘리먼트와 컴포넌트의 차이.md renamed to content/posts/자원/React/엘리먼트와 컴포넌트의 차이.md

@@ -4,7 +4,7 @@ tags:
   - react
 createdAt: 2025-04-20 08:41:50
 modifiedAt: 2025-04-20 09:44:34
-publish: resource/React
+publish: 자원/React
 related: ""
 series: ""
 ---

public/link-map.json

@@ -1,5 +1,4 @@
 {
-  "0.inbox/Props Drilling 이란 무엇인가.md": "resource/React/Props Drilling 이란 무엇인가",
   "3.resource/SWEA강의/SWEA 강의 정리노트.md": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
   "3.resource/Javascript/변수의 선언,초기화,할당의 차이점은 무엇인가.md": "자원/JavaScript/변수의 선언,초기화,할당의 차이점은 무엇인가",
   "3.resource/Javascript/호이스팅(Hoisting)이란 무엇인가.md": "자원/JavaScript/호이스팅(Hoisting)이란 무엇인가",
@@ -16,10 +15,11 @@
   "3.resource/Javascript/프로토타입(Prototype)과 프로토타입 상속.md": "자원/JavaScript/프로토타입(Prototype)과 프로토타입 상속",
   "3.resource/Javascript/Javascript에서의 비동기 함수.md": "자원/JavaScript/Javascript에서의 비동기 함수",
   "3.resource/Javascript/Javascript는 어떻게 비동기 처리가 가능한 것인가.md": "자원/JavaScript/Javascript는 어떻게 비동기 처리가 가능한 것인가",
-  "3.resource/React/React.md": "resource/React/React",
-  "3.resource/React/엘리먼트와 컴포넌트의 차이.md": "resource/React/엘리먼트와 컴포넌트의 차이",
-  "3.resource/React/flux 패턴이란.md": "resource/React/flux 패턴이란",
-  "3.resource/React/props와 state.md": "resource/React/props와 state",
+  "3.resource/React/React.md": "자원/React/React",
+  "3.resource/React/엘리먼트와 컴포넌트의 차이.md": "자원/React/엘리먼트와 컴포넌트의 차이",
+  "3.resource/React/flux 패턴이란.md": "자원/React/flux 패턴이란",
+  "3.resource/React/props와 state.md": "자원/React/props와 state",
+  "3.resource/React/Props Drilling 이란 무엇인가.md": "자원/React/Props Drilling 이란 무엇인가",
   "3.resource/Web/동적 사이트 vs 정적사이트.md": "자원/웹개발/동적 사이트 vs 정적사이트",
   "3.resource/Web/HTTP(Hypertext Transfer Protocol).md": "자원/웹개발/HTTP(Hypertext Transfer Protocol)",
   "3.resource/Web/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md": "자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링",

public/meta-data.json

@@ -1,15 +1,4 @@
 [
-  {
-                            "urlPath": "resource/React/Props Drilling 이란 무엇인가",
-                            "title": "Props Drilling 이란 무엇인가",
-                            "summary": "",
-                            "image": "",
-                            "tags": ["resource", "react"],
-                            "series": "",
-                            "createdAt": "2025-04-20 10:03:21",
-                            "modifiedAt": "2025-04-20 23:26:54",
-                            "publish": "resource/React"
-                        },
   {
                             "urlPath": "자원/SWEA 강의 정리노트/SWEA 강의 정리노트",
                             "title": "SWEA 강의 정리노트",
@@ -187,48 +176,59 @@
                             "publish": "자원/JavaScript"
                         },
   {
-                            "urlPath": "resource/React/React",
+                            "urlPath": "자원/React/React",
                             "title": "React",
                             "summary": "",
                             "image": "",
                             "tags": ["resource", "react"],
                             "series": "",
                             "createdAt": "2025-04-11 18:37:48",
                             "modifiedAt": "2025-04-20 10:03:17",
-                            "publish": "resource/React"
+                            "publish": "자원/React"
                         },
   {
-                            "urlPath": "resource/React/엘리먼트와 컴포넌트의 차이",
+                            "urlPath": "자원/React/엘리먼트와 컴포넌트의 차이",
                             "title": "엘리먼트와 컴포넌트의 차이",
                             "summary": "",
                             "image": "",
                             "tags": ["resource", "react"],
                             "series": "",
                             "createdAt": "2025-04-20 08:41:50",
                             "modifiedAt": "2025-04-20 09:44:34",
-                            "publish": "resource/React"
+                            "publish": "자원/React"
                         },
   {
-                            "urlPath": "resource/React/flux 패턴이란",
+                            "urlPath": "자원/React/flux 패턴이란",
                             "title": "flux 패턴이란",
                             "summary": "",
                             "image": "",
                             "tags": ["resource", "react"],
                             "series": "",
                             "createdAt": "2025-04-19 22:48:15",
                             "modifiedAt": "2025-04-20 09:23:43",
-                            "publish": "resource/React"
+                            "publish": "자원/React"
                         },
   {
-                            "urlPath": "resource/React/props와 state",
+                            "urlPath": "자원/React/props와 state",
                             "title": "props와 state",
                             "summary": "",
                             "image": "",
                             "tags": ["resource", "react"],
                             "series": "",
                             "createdAt": "2025-04-20 09:40:39",
-                            "modifiedAt": "2025-04-20 12:44:48",
-                            "publish": "resource/React"
+                            "modifiedAt": "2025-04-21 07:22:55",
+                            "publish": "자원/React"
+                        },
+  {
+                            "urlPath": "자원/React/Props Drilling 이란 무엇인가",
+                            "title": "Props Drilling 이란 무엇인가",
+                            "summary": "",
+                            "image": "",
+                            "tags": ["resource", "react"],
+                            "series": "",
+                            "createdAt": "2025-04-20 10:03:21",
+                            "modifiedAt": "2025-04-20 23:26:54",
+                            "publish": "자원/React"
                         },
   {
                             "urlPath": "자원/웹개발/동적 사이트 vs 정적사이트",

public/post-contents/resource/React/props와 state.json

@@ -0,0 +1,4 @@
+{
+  "content": "\n# props와 state\n\n![1745187761-propsAndState.png](_assets/attachments/1745187761-propsAndState.png)\n\nprops 와 state 둘다 데이터를 관리하기 위한 값이다.\n\n## State(상태)\n\nState는[[엘리먼트와 컴포넌트의 차이|컴포넌트]] 내부에서 관리되는 데이터로, 컴포넌트의 렌더링에 영향을 주는 동적인 값이다.\n\n### 주요 특징\n\n- 컴포넌트 내부에서 생성되고 관리된다.\n- 변경 가능(mutable)아며, 상태가 변경되면 컴포넌트가 다시 렌더링된다.\n- 컴포넌트의 생명주기 동안 유지된다.\n- 비동기적으로 업데이트될 수 있다.\n\n> [!important]\n>\n> - `setState()`나 `setState`의 업데이트 함수는 상태를 즉시 변경하지 않고 업데이트를 예약한다.(비동기적)\n> - 이전 상태에 의존하는 업데이트트는 함수형 업데이트를 사용해야 한다.\n>   ```js\n>   setCount((prevCount) => prevCount + 1);\n>   ```\n\n## Props(속성)\n\nProps는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터 이다.\n\n### 주요 특징\n\n- 외부(부모 컴포넌트)에서 전달받는다.\n- 읽기 전용(read-only)이며 컴포넌트 내부에서 변경할 수 없다.\n- 부모 컴포넌트가 리렌더링되면 자식 컴포넌트의 props도 업데이트될 수 있다.\n- 컴포넌트 간의 데이터 흐름을 형성한다.\n\n> [!important]\n>\n> - Props는 단방향 데이터 흐름을 구현한다(부모->자식)\n> - Props는 불변성(immutability)을 가진다.\n> - 기본값 설정이 가능하다.\n> - Props를 통해 함수도 전달할 수 있어 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 수 있다.\n\n| 특성          | State                                           | Props                         |\n| ------------- | ----------------------------------------------- | ----------------------------- |\n| 출처          | 컴포넌트 내부                                   | 부모 컴포넌트                 |\n| 변경 가능성   | 변경 가능(mutable)                              | 읽기 전용(immutable)          |\n| 업데이트 방법 | `setState()` 또는 `useState` 훅의 업데이트 함수 | 부모 컴포넌트에서만 변경 가능 |\n| 데이터 흐름   | 컴포넌트 내부 흐름                              | 하향식(top-down)흐름          |\n| 사용 용도     | 컴포넌트의 내부 상태 관리                       | 컴포넌트 간 데이터 전달       |\n",
+  "plainContent": "props 와 state 둘다 데이터를 관리하기 위한 값이다.\nState는컴포넌트 내부에서 관리되는 데이터로, 컴포넌트의 렌더링에 영향을 주는 동적인 값이다.\n컴포넌트 내부에서 생성되고 관리된다.\n변경 가능(mutable)아며, 상태가 변경되면 컴포넌트가 다시 렌더링된다.\n컴포넌트의 생명주기 동안 유지된다.\n비동기적으로 업데이트될 수 있다.\n> [!important]\n>\n> - setState()나 setState의 업데이트 함수는 상태를 즉시 변경하지 않고 업데이트를 예약한다.(비동기적)\n> - 이전 상태에 의존하는 업데이트트는 함수형 업데이트를 사용해야 한다.\n>   \nProps는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터 이다.\n외부(부모 컴포넌트)에서 전달받는다.\n읽기 전용(read-only)이며 컴포넌트 내부에서 변경할 수 없다.\n부모 컴포넌트가 리렌더링되면 자식 컴포넌트의 props도 업데이트될 수 있다.\n컴포넌트 간의 데이터 흐름을 형성한다.\n> [!important]\n>\n> - Props는 단방향 데이터 흐름을 구현한다(부모->자식)\n> - Props는 불변성(immutability)을 가진다.\n> - 기본값 설정이 가능하다.\n> - Props를 통해 함수도 전달할 수 있어 자식 컴포넌트가 부모 컴포넌트의 상태를 변경할 수 있다.\n| 특성          | State                                           | Props                         |\n| ------------- | ----------------------------------------------- | ----------------------------- |\n| 출처          | 컴포넌트 내부                                   | 부모 컴포넌트                 |\n| 변경 가능성   | 변경 가능(mutable)                              | 읽기 전용(immutable)          |\n| 업데이트 방법 | setState() 또는 useState 훅의 업데이트 함수 | 부모 컴포넌트에서만 변경 가능 |\n| 데이터 흐름   | 컴포넌트 내부 흐름                              | 하향식(top-down)흐름          |\n| 사용 용도     | 컴포넌트의 내부 상태 관리                       | 컴포넌트 간 데이터 전달       |"
+}