docs: 제어 컴포넌트와 비제어 컴포넌트 문서 작성

Author: HyunJinNo

_posts/2024-01-06-dynamic-programming.md

@@ -26,7 +26,7 @@ Algorithm</p></blockquote>
   - **메모이제이션(Memoization)**
     - **메모이제이션(Memoization)** 이란 함수의 결과를 저장하는 장소를 마련해 두고, 한 번 계산한 값을 저장해 두었다가 재활용하는 최적화 기법을 말한다.
     - 메모이제이션은 **참조적 투명 함수(Referential transparent function)** 의 경우에만 적용할 수 있다.
-      > **참조적 투명성(Referential transparency)**: 함수의 반환 값이 입력 값만으로 결정되는지의 여부를 말한다.  
+      > **참조적 투명성(Referential transparency)**: 함수의 반환 값이 입력값만으로 결정되는지의 여부를 말한다.  
       > **참조적 투명 함수(Referential transparent function)**: 입력이 고정되어 있을 때 그 결과가 항상 같은 함수들을 말한다.
 - **Time Complexity**
   - 동적 계획법의 시간 복잡도는 다음 식을 계산하여 간단하게 계산할 수 있다. 단, 아래 식은 수행 시간의 상한을 간단히 계산할 수 있는 방법일 뿐이며, 항상 정확하지는 않는다는 점을 주의할 것.

_posts/2024-07-24-challenge-day8.md

@@ -51,7 +51,7 @@ comments: true
 
 ### 순수 함수(Pure Function)
 
-순수 함수는 입력 값이 동일하면 결과가 동일하게 리턴되는 수학 함수와 마찬가지로 함수형 프로그래밍 언어에서는 함수를 `순수 함수`라고 말한다. 순수 함수는 부수 효과를 제거한 함수에 해당합니다.
+순수 함수는 입력값이 동일하면 결과가 동일하게 리턴되는 수학 함수와 마찬가지로 함수형 프로그래밍 언어에서는 함수를 `순수 함수`라고 말한다. 순수 함수는 부수 효과를 제거한 함수에 해당합니다.
 
 - Memory or I/O의 관점에서 Side Effect가 없는 함수
 - 함수의 실행이 외부에 영향을 끼치지 않는 함수
@@ -64,7 +64,7 @@ comments: true
 
 참조 투명성이란 컴퓨터 프로그램의 특성 중 하나로, 프로그램 동작의 변경없이 관련 값을 대채할 수 있다면 표현식을 참조 상 투명하다고 말할 수 있다. 즉, 프로그램의 행동에 영향을 받지 않고 직접적인 값으로 대체 가능한 것을 말한다.
 
-순수 함수로 만들면 함수 외부의 값이나 객체를 참조할 때 의존적으로 동작하지 않기 때문에 참조 투명성을 가지고 부작용이 없다. 반대로 말하면 부작용이 있는 함수는 입력 값이 동일해도 함수 외부의 값에 따라서 다른 값이 리턴된다.
+순수 함수로 만들면 함수 외부의 값이나 객체를 참조할 때 의존적으로 동작하지 않기 때문에 참조 투명성을 가지고 부작용이 없다. 반대로 말하면 부작용이 있는 함수는 입력값이 동일해도 함수 외부의 값에 따라서 다른 값이 리턴된다.
 
 ### 불변성
 

_posts/2025-03-04-controlled-and-uncontrolled-component.md

@@ -1,5 +1,5 @@
 ---
-title: 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)
+title: 제어 컴포넌트 vs 비제어 컴포넌트
 description: 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)에 대해 정리한 페이지입니다.
 date: 2025-03-04 23:28:00 +/-TTTT
 categories: [Front-end]
@@ -21,15 +21,106 @@ Front-end, React, TypeScript</p></blockquote>
 
 ## 제어 컴포넌트 (Controlled Component)
 
-`제어 컴포넌트(Controlled Component)`는 폼 입력 요소의 값이 <b>React의 `상태(State)`에 의해 제어</b>되는 컴포넌트입니다.
+### 개념
+
+`제어 컴포넌트(Controlled Component)`는 폼 입력 요소의 값이 <b>React의 `상태(State)`에 의해 제어</b>되는 컴포넌트입니다. 입력값에 따른 실시간 피드백(Ex. 검색어 자동 완성), 조건부 렌더링, 유효성 검사가 필요한 경우 사용하는 것이 좋습니다.
+
+### 동작 방식
+
+제어 컴포넌트는 사용자 입력이 발생할 때마다 `onChange` 이벤트 핸들러를 통해 상태를 업데이트합니다. 입력값은 항상 React 상태와 동기화되며, `value` prop으로 직접 할당됩니다.
+
+### 장점
+
+- `실시간 유효성 검증`
+
+  사용자 입력마다 상태가 업데이트되므로 실시간으로 유효성 검증이 가능합니다.
+
+- `중앙 집중식 관리`
+
+  모든 데이터가 React 상태로 관리되어 예측 가능합니다.
+
+### 단점
+
+- `잦은 리렌더링`
+
+  매 입력마다 리렌더링이 발생할 수 있어 성능 저하가 발생할 수 있습니다.
+
+  <blockquote class="prompt-tip"><p><strong><u>Tips</u></strong><br>
+  폼 입력값이 변경될 때마다 불필요한 리렌더링, 잦은 API 요청이 일어날 수 있으므로 Debounce나 Throttle 같은 방법을 사용하는 것이 좋습니다.</p></blockquote>
+
+### 예시
+
+```tsx
+import { useState } from "react";
+
+const ControlledComponent = () => {
+  const [value, setValue] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return <input type="text" value={value} onChange={handleChange} />;
+};
+
+export default ControlledComponent;
+```
 
 ## 비제어 컴포넌트 (Uncontrolled Component)
 
-`비제어 컴포넌트(Uncontrolled Component)`는 폼 입력 요소의 값이 React 상태가 아닌 <b>DOM 자체에서 관리</b>되는 컴포넌트입니다.
+### 개념
+
+`비제어 컴포넌트(Uncontrolled Component)`는 폼 입력 요소의 값이 React 상태가 아닌 <b>DOM 내부에서 자체적으로 관리</b>되는 컴포넌트입니다. 대규모 폼에서 성능 최적화가 필요하거나, 파일 입력, 또는 서드파티 라이브러리와의 통합이 필요한 경우 사용하는 것이 좋습니다.
+
+### 동작 방식
+
+비제어 컴포넌트는 `ref`를 사용해 DOM 요소에 직접 접근하여 값을 가져옵니다. 초기 값은 `defaultValue`나 `defaultChecked`로 설정합니다.
+
+### 장점
+
+- `성능 최적화`
+
+  폼 입력 요소의 값이 변경되더다도 리렌더링이 발생하지 않아 대규모 폼에 적합합니다.
+
+- `간결성`
+
+  간단한 폼에서 코드량이 줄어듭니다.
+
+### 단점
+
+- `폼 입력 요소 값 추적`
+
+  실시간 유효성 검증이 어렵고, 값 추적이 제한적입니다.
+
+### 예시
+
+```tsx
+import { useRef } from "react";
+
+const UncontrolledComponent = () => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (inputRef.current) {
+      console.log(inputRef.current.value);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="text" defaultValue="" ref={inputRef} />
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
+
+export default UncontrolledComponent;
+```
 
 ## 차이점 비교
 
-제어 컴포넌트와 비제어 컴포넌트의 차이점을 표로 요약하면 다음과 같습니다.
+<b>제어 컴포넌트와 비제어 컴포넌트는 주로 폼 데이터를 어떻게 관리하느냐에 따라 구분됩니다.</b> 제어 컴포넌트와 비제어 컴포넌트의 차이점을 표로 요약하면 다음과 같습니다.
 
 | 특징          | 제어 컴포넌트                 | 비제어 컴포넌트                          |
 | ------------- | ----------------------------- | ---------------------------------------- |
@@ -44,3 +135,4 @@ Front-end, React, TypeScript</p></blockquote>
 - <a href="https://ko.legacy.reactjs.org/docs/forms.html#controlled-components" target="_blank">제어 컴포넌트 (Controlled Component)</a>
 - <a href="https://ko.legacy.reactjs.org/docs/uncontrolled-components.html" target="_blank">비제어 컴포넌트 - React</a>
 - <a href="https://ko.react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components" target="_blank">컴포넌트 간 State 공유하기 – React</a>
+- <a href="https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/" target="_blank">Controlled and uncontrolled form inputs in React don't have to be complicated</a>