wip

Author: lumirlumir

src/content/reference/eslint-plugin-react-hooks/lints/immutability.md

@@ -4,85 +4,85 @@ title: immutability
 
 <Intro>
 
-Validates against mutating props, state, and other values that [are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable).
+[불변인](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) props, state 및 기타 값을 변이하는 것을 검증합니다.
 
 </Intro>
 
-## Rule Details {/*rule-details*/}
+## 규칙 세부 사항 {/*rule-details*/}
 
 A component’s props and state are immutable snapshots. Never mutate them directly. Instead, pass new props down, and use the setter function from `useState`.
 
-## Common Violations {/*common-violations*/}
+## 일반적인 위반 사례 {/*common-violations*/}
 
-### Invalid {/*invalid*/}
+### 잘못된 예 {/*invalid*/}
 
 ```js
-// ❌ Array push mutation
+// ❌ 배열 push 변이
 function Component() {
   const [items, setItems] = useState([1, 2, 3]);
 
   const addItem = () => {
-    items.push(4); // Mutating!
-    setItems(items); // Same reference, no re-render
+    items.push(4); // 변이!
+    setItems(items); // 같은 참조, 리렌더링 안 됨
   };
 }
 
-// ❌ Object property assignment
+// ❌ 객체 프로퍼티 할당
 function Component() {
   const [user, setUser] = useState({name: 'Alice'});
 
   const updateName = () => {
-    user.name = 'Bob'; // Mutating!
-    setUser(user); // Same reference
+    user.name = 'Bob'; // 변이!
+    setUser(user); // 같은 참조
   };
 }
 
-// ❌ Sort without spreading
+// ❌ 스프레드 없이 정렬
 function Component() {
   const [items, setItems] = useState([3, 1, 2]);
 
   const sortItems = () => {
-    setItems(items.sort()); // sort mutates!
+    setItems(items.sort()); // sort는 변이함!
   };
 }
 ```
 
-### Valid {/*valid*/}
+### 올바른 예 {/*valid*/}
 
 ```js
-// ✅ Create new array
+// ✅ 새 배열 생성
 function Component() {
   const [items, setItems] = useState([1, 2, 3]);
 
   const addItem = () => {
-    setItems([...items, 4]); // New array
+    setItems([...items, 4]); // 새 배열
   };
 }
 
-// ✅ Create new object
+// ✅ 새 객체 생성
 function Component() {
   const [user, setUser] = useState({name: 'Alice'});
 
   const updateName = () => {
-    setUser({...user, name: 'Bob'}); // New object
+    setUser({...user, name: 'Bob'}); // 새 객체
   };
 }
 ```
 
-## Troubleshooting {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
-### I need to add items to an array {/*add-items-array*/}
+### 배열에 항목을 추가해야 하는 경우 {/*add-items-array*/}
 
-Mutating arrays with methods like `push()` won't trigger re-renders:
+`push()` 같은 메서드로 배열을 변이하면 리렌더링이 트리거되지 않습니다.
 
 ```js
-// ❌ Wrong: Mutating the array
+// ❌ 잘못된 예: 배열 변이
 function TodoList() {
   const [todos, setTodos] = useState([]);
 
   const addTodo = (id, text) => {
     todos.push({id, text});
-    setTodos(todos); // Same array reference!
+    setTodos(todos); // 같은 배열 참조!
   };
 
   return (
@@ -93,16 +93,16 @@ function TodoList() {
 }
 ```
 
-Create a new array instead:
+대신 새 배열을 생성하세요.
 
 ```js
-// ✅ Better: Create a new array
+// ✅ 더 나은 방법: 새 배열 생성
 function TodoList() {
   const [todos, setTodos] = useState([]);
 
   const addTodo = (id, text) => {
     setTodos([...todos, {id, text}]);
-    // Or: setTodos(todos => [...todos, {id: Date.now(), text}])
+    // 또는: setTodos(todos => [...todos, {id: Date.now(), text}])
   };
 
   return (
@@ -113,12 +113,12 @@ function TodoList() {
 }
 ```
 
-### I need to update nested objects {/*update-nested-objects*/}
+### 중첩된 객체를 업데이트해야 하는 경우 {/*update-nested-objects*/}
 
-Mutating nested properties doesn't trigger re-renders:
+중첩된 프로퍼티를 변이하면 리렌더링이 트리거되지 않습니다.
 
 ```js
-// ❌ Wrong: Mutating nested object
+// ❌ 잘못된 예: 중첩된 객체 변이
 function UserProfile() {
   const [user, setUser] = useState({
     name: 'Alice',
@@ -129,16 +129,16 @@ function UserProfile() {
   });
 
   const toggleTheme = () => {
-    user.settings.theme = 'dark'; // Mutation!
-    setUser(user); // Same object reference
+    user.settings.theme = 'dark'; // 변이!
+    setUser(user); // 같은 객체 참조
   };
 }
 ```
 
-Spread at each level that needs updating:
+업데이트가 필요한 각 레벨에서 스프레드하세요.
 
 ```js
-// ✅ Better: Create new objects at each level
+// ✅ 더 나은 방법: 각 레벨에서 새 객체 생성
 function UserProfile() {
   const [user, setUser] = useState({
     name: 'Alice',