2024-03-28 74일차 React

📅2024. 03. 28 74일차

---

React TodoList

목록 삭제

• TodoListItem: 할 일 목록에서 개별 항목을 표시하는 컴포넌트. todo 객체를 받아와서 해당 항목의 제목과 ID를 표시하고, 삭제 버튼을 클릭할 때 removeTodo 함수를 호출하여 해당 항목을 삭제.

• TodoList: 할 일 목록을 표시하는 컴포넌트. todos 배열을 받아와서 배열의 길이에 따라 다른 내용을 표시. 할 일이 없을 경우 "할 일 없음" 메시지를 표시하고, 할 일이 있는 경우 각 할 일 항목을 TodoListItem으로 렌더링. TodoListItem props에 removeTodo 추가

• App: 애플리케이션의 메인 컴포넌트. NewTodoForm 컴포넌트를 통해 새로운 할 일을 추가하고, 그 하단에 TodoList 컴포넌트를 통해 할 일 목록을 표시. 또한, 할 일 항목을 삭제하기 위한 removeTodo 함수를 TodoList 컴포넌트로 전달.

//생략
const TodoListItem = ({ todo, removeTodo: _removeTodo }) => {
	const removeTodo = () => {
		_removeTodo(todo.id);
	};

	return (
		<li className="flex items-center gap-x-3 mb-3">
			<span className="badge badge-primary badge-outline">{todo.id}</span>
			<span>{todo.title}</span>
			<button className="btn btn-primary" onClick={removeTodo}>
				삭제
			</button>
		</li>
	);
};

const TodoList = ({ todos, removeTodo }) => {
	return (
		<>
			{todos.length == 0 ? (
				<h4>할 일 없음</h4>
			) : (
				<>
					<h4>할 일 목록</h4>
					<ul>
						{todos.map((todo) => (
							<TodoListItem key={todo.id} todo={todo} removeTodo={removeTodo} />
						))}
					</ul>
				</>
			)}
		</>
	);
};

const App = () => {
	//생략
	const removeTodo = (id) => {
		const newTodos = todos.filter(todo => todo.id != id);
		setTodos(newTodos);
	};

	return (
		<>
			<NewTodoForm addTodo={addTodo} />
			<hr />
			<TodoList todos={todos} removeTodo={removeTodo} />
		</>
	);
};

//생략

리액트(React), 아이템 삭제 구현

---

목록 수정

• TodoListItem editMode 상태와 newTodoTitle 상태를 사용하여 수정 모드인지 확인하고 수정할 내용을 관리.
  enableEditMode: 수정 모드로 전환하는 함수.
  cancelEdit: 수정을 취소하고 이전 내용으로 되돌리는 함수.
  commitEdit: 수정된 내용을 반영하고 수정 모드를 종료하는 함수.

• 삼항식 사용 readMode가 true면 수정 삭제(일반모드)로 false면 수정완료, 수정취소(수정모드)로 전환

• App 컴포넌트에 modifyTodo 함수 선언 todos 배열에서 특정 id를 가진 항목만 그 제목을 새로운 값으로 수정하고, 나머지 항목들은 그대로 유지. React에서 이렇게 상태를 업데이트하면 해당 컴포넌트는 수정된 todos 배열을 반영하여 리렌더링.

//생략
const TodoListItem = ({
	//생략
	modifyTodo: _modifyTodo
}) => {
	const [editMode, setEditMode] = useState(false);
	const [newTodoTitle, setNewTodoTitle] = useState(todo.title);
	const readMode = !editMode;

	const enableEditMode = () => {
		setEditMode(true);
	};

	//생략

	const cancleEdit = () => {
		setEditMode(false);
		setNewTodoTitle(todo.title);
	};
	const commitEdit = () => {
		if (newTodoTitle.trim().length == 0) return;

		_modifyTodo(todo.id, newTodoTitle.trim());

		setEditMode(false);
	};

	return (
		<li className="flex items-center gap-x-3 mb-3">
			<span className="badge badge-accent badge-outline">{todo.id}</span>
			{readMode ? (
				<>
					<span>{todo.title}</span>
					<button className="btn btn-outline btn-accent" onClick={enableEditMode}>
						수정
					</button>
					<button className="btn btn-accent" onClick={removeTodo}>
						삭제
					</button>
				</>
			) : (
				<>
					<input
						className="input input-bordered"
						type="text"
						placeholder="할 일 써"
						value={newTodoTitle}
						onChange={(e) => setNewTodoTitle(e.target.value)}
					/>
					<button className="btn btn-accent" onClick={commitEdit}>
						수정완료
					</button>
					<button className="btn btn-accent" onClick={cancleEdit}>
						수정취소
					</button>
				</>
			)}
		</li>
	);
};

const TodoList = ({ todos, removeTodo, modifyTodo }) => {
	return (
		<>
			{todos.length == 0 ? (
				<h4>할 일 없음</h4>
			) : (
				<>
					<h4>할 일 목록</h4>
					<ul>
						{todos.map((todo) => (
							<TodoListItem
								key={todo.id}
								todo={todo}
								removeTodo={removeTodo}
								modifyTodo={modifyTodo}
							/>
						))}
					</ul>
				</>
			)}
		</>
	);
};

const App = () => {
	//생략
	const modifyTodo = (id, title) => {
		const newTodos = todos.map((todo) =>
			todo.id != id ? todo : { ...todo, title }
		);
		setTodos(newTodos);
	};

	return (
		<>
			<NewTodoForm addTodo={addTodo} />
			<hr />
			<TodoList todos={todos} removeTodo={removeTodo} modifyTodo={modifyTodo} />
		</>
	);
};
//생략

리액트(React), 아이템 수정시 input 가능하도록, 수정 완료

---

리액트 커스텀 훅

const useTodoStatus  = () => {
	const [todos, setTodos] = useState([]);
	const [lastTodoId, setLastTodoId] = useState(0);

	const addTodo = (title) => {
		const id = lastTodoId + 1;

		const newTodo = {
			id,
			title
		};
		setTodos([...todos, newTodo]);
		setLastTodoId(id);
	};

	const removeTodo = (id) => {
		const newTodos = todos.filter((todo) => todo.id != id);
		setTodos(newTodos);
	};

	const modifyTodo = (id, title) => {
		const newTodos = todos.map((todo) =>
			todo.id != id ? todo : { ...todo, title }
		);
		setTodos(newTodos);
	};

	return{
		todos,
		addTodo,
		removeTodo,
		modifyTodo
	};
}

• useTodoStatus에 App return위에 있는 내용 컴포넌트화

const todoStatus = useTodoStatus();

• App부분에 조립

리액트(React), 관련된 state를 하나로 묶기, 리액트 커스텀 훅

---

immer 적용

//생략
// 기존 방식
		// setTodos([...todos, newTodo]);

		// immer 적용
		setTodos(
			produce(todos, (draft) => {
				draft.push(newTodo);
			})
		);

		setLastTodoId(id);

• 추가

// 기존 방식
		// const newTodos = todos.filter((todo) => todo.id != id);

		// immer 적용
		const newTodos = produce(todos, (draft) => {
			const index = draft.findIndex((todo) => todo.id == id);
			draft.splice(index, 1);
		});
		
		setTodos(newTodos);

• 삭제

	// 기존 방식
		// const newTodos = todos.map((todo) =>
		// 	todo.id != id ? todo : { ...todo, title }
		// );

		// immer 적용
		const newTodos = produce(todos, (draft) => {
			const index = draft.findIndex((todo) => todo.id == id);
			draft[index].title = title;
		});

		setTodos(newTodos);

• 수정

리액트(React), immer 적용

---

useRef 적용

• formInputNoRef: 이 참조는 입력 요소를 참조하는 데 사용.

• input 안에 ref={formInputNoRef} 적용

• formInputNoRef.current.value = '123'; formInputNoRef.current.focus();
  숫자 입력하지 않았을 때 input창 포커싱, input창 벨류 값 '123'으로 설정 current 이용

import React, { useState, useRef } from "https://cdn.skypack.dev/react@18";

const App = () => {
	const formInputNoRef = useRef(null);
	const [number,setNumber] = useState('');
	
	const notice = () => {
		if(!number) {
			alert('숫자 입력해');
			formInputNoRef.current.value = '123';
			formInputNoRef.current.focus();
			return;
		}
		
		alert(`네가 입력한 숫자는 ${number}야.`);
		setNumber('');
	}
	
	return (
		<>
			<form onSubmit={(e) => {
					e.preventDefault();
					notice();
				}}>
				<input
					ref={formInputNoRef}
					className="input input-bordered"
					type="text"
					placeholder="숫자 입력"
					value={number}
					onChange={(e) => setNumber(e.target.value)}
				/>
				&nbsp;
				<button className="btn btn-primary">추가</button>
			</form>
		</>
	);
};

리액트(React), useRef를 사용해서 dom 조작하기

---

useEffect 적용

• useEffect를 쓰면 타이밍이 늦어진다. 나중에 실행 활용

import React, { useState, useEffect } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

let AppCallCount = 0;

const App = () => {
	console.log("시작");
	
	useEffect(() => {
		AppCallCount++;
		console.log(`1App이 ${AppCallCount}번 실행`);
	}, []); // [] : 의존성 배열
	// 1. 빈 배열이 없으면 useEffect 안에 있는 로직은 리랜더링 된다.
	// 2. 빈 배열이 있으면 useEffect 안에 있는 로직은 한번만 실행된다.
	
	useEffect(() => {
		AppCallCount++;
		console.log(`2App이 ${AppCallCount}번 실행`);
	});

	console.log("끝");
	const [no, setNo] = useState(0);

	return (
		<>
			<button onClick={() => setNo(no + 1)}>증가 : {no}</button>
		</>
	);
};

useEffect, useRef, useState 조합 var.

• useEffect 써서 랜더링 될 때 최소 한 번 만 배열 안 넣으면 랜더링 될 때마다 된다.
• useRef 사용해서 증가 버튼 누른 후 나이 input으로 포커싱

import React, {
	useState,
	useRef,
	useEffect
} from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

let AppCallCount = 0;

const App = () => {
	AppCallCount++;
	console.log(`1App이 ${AppCallCount}번 실행`);

	const inputNameRef = useRef(null);
	const inputAgeRef = useRef(null);
	const [no, setNo] = useState(0);

	// setTimeout(() => inputNameRef.current.focus());
	
	useEffect(()=>{
		inputNameRef.current.focus();
	},[]);
	
	return (
		<>
			<input ref={inputNameRef} type="text" placeholder="이름" />
			<hr />
			<input ref={inputAgeRef} type="number" placeholder="나이" />
			<hr />
			<button
				onClick={() => {
					setNo(no + 1);
					inputAgeRef.current.focus();
				}}
			>
				증가 : {no}
			</button>
		</>
	);
	
};

오늘의 개념

immer이란?

• react에서 쉽게 불변성을 유지할 수 있는 코드 작성을 도와주는 라이브러리이다.

immer는 기본적으로 produce 함수를 호출하는 방식으로 사용한다. 파라미터의 개수에 따라 크게 2가지 방식으로 사용할 수 있다.

2개의 파라미터를 사용할 때는 1번째 파라미터에는 수정할 상태, 2번째 파라미터에는 이 상태를 어떻게 업데이트할 건지를 정의하는 recipe 함수이다. 변경된 새로운 상태가 반환된다.

import produce from 'immer';

const nextState = produce(baseState, (draft) => {
  draft[1].done = true;
  draft.push({ title: 'Tweet about it' });
});

파라미터를 하나만 사용하면 상태를 어떻게 업데이트할지 결정하는 recipe 함수만을 넘기며 이때는 해당 상태를 업데이트하는 함수가 반환된다.

import produce from 'immer';

const toggleTodo = produce((draft, id) => {
  const todo = draft.find((todo) => todo.id === id);
  todo.done = !todo.done;
});

const baseState = [ ... ];

const nextState = toggleTodo(baseState, 'Immer');

참고

immer의 원리

• immer는 어떤 원리를 이용했길래 불변성을 유지해 주는 것일까?

immer의 핵심 원리는 Copy-on-write(이하 기록 중 복사)와 Proxy(이하 프록시)에 있다. 기록 중 복사란 자원을 공유하다가도 수정해야 할 경우가 발생하면 자원의 복사본을 쓰게 하는 개념이다. immer는 프록시 객체를 이용해서 원본 객체인 상태 객체 대신 프록시 객체를 대신 조작(변경) 하는 것이다.

immer 사용법

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
import immer, { produce } from "https://cdn.skypack.dev/immer";

const App = () => {
	const [todos, setTodos] = useState([
		{ id: 1, title: "제목1" },
		{ id: 2, title: "제목2" }
	]);

	const addTodo = () => {
		// const newTodos = [...todos, {id:3, title:"제목3"}];
		const newTodos = produce(todos, (draft) => {
			draft.push({ id: 3, title: "제목3" });
		});

		setTodos(newTodos);
	};

	const modifyTodo = () => {
		// const newTodos = todos.map((todo) => todo.id != 1 ? todo : {...todo,title:"zxcv"});
		
		// 실무코드
		setTodos(produce(todos, (draft) => {
			draft[1].title = "zxcv";
		}));
	};

	const removeTodo = () => {
		// const newTodos = todos.filter((todo,index) => index != 1);
		const newTodos = produce(todos, (draft) => {
			draft.splice(1, 1);
		});
		setTodos(newTodos);
	};

	return (
		<>
			todos : {JSON.stringify(todos)}
			<hr />
			<button onClick={addTodo}>추가</button>
			&nbsp;
			<button onClick={modifyTodo}>수정</button>
			&nbsp;
			<button onClick={removeTodo}>삭제</button>
			&nbsp;
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

splice란?

• splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

• 하나도 제거하지 않고, 2번 인덱스에 "drum" 추가

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

• 하나도 제거하지 않고, 2번 인덱스에 "drum"과 "guitar" 추가

var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum", "guitar");

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

• 3번 인덱스에서 한 개 요소 제거

var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

• 2번 인덱스에서 한 개 요소 제거하고 "trumpet" 추가

var myFish = ["angel", "clown", "drum", "sturgeon"];
var removed = myFish.splice(2, 1, "trumpet");

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

• 제거하는 동시에 새 배열

var myFish = ["angel", "clown", "drum", "sturgeon"];
var removed = myFish.splice(2);

// myFish is ["drum", "sturgeon"]

findIndex?

• findIndex() 함수는 배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환하는 함수다.
  배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾는다. 이 함수는 배열에서 특정 요소의 인덱스를 찾는 데 유용하다.

• 예시 (배열에서 findIndex() 함수로 "green"의 인덱스 찾기)

// 배열을 만듭니다.
const colors = ["red", "green", "blue"];

// 개발자가 직접 작성한 콜백 함수
function findGreen(color) {
    return color === "green"; // 배열 요소가 "green"과 같은지 확인합니다.
};

// 배열에서 조건을 만족하는 첫 번째 요소를 찾아 인덱스를 반환합니다.
const green = colors.findIndex(findGreen);

// 결과를 출력합니다.
console.log(green); // 출력: 1

useRef?

• useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다.
  useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있다.

사용법

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
  // ...

공식문서에 따르면 위처럼 가장 최상단에 useRef를 선언해줄 것을 권장하고 있다.

useEffect

• 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.

useEffect는 component가 mount됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다.
즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다.

• useEffect 사용법

기본 형태 : useEffect(functionm deps)

• function : 수행하고자 하는 작업
• deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

import React, {useEffect} from 'react'; 

useEffect 함수 불러오기

useEffect(() => {
  console.log('마운트 될 때만 실행된다.')
}, []);

- 컴포넌트가 화면에 가장 처음 랜더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다.

---

useEffect(() => {
  console.log('랜더링 될 때 마다 실행된다.')
});

- 만약 배열을 생략한다면 리랜더링 될 때마다 실행된다.

useEffect(() => {
  console.log(name)
  console.log('업데이트 될 때 실행된다.')
}, [name]);

- 특정값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.
- 업데이트 될 때만 실행되는 것이 아니라 마운트 될 때도 실행된다. 업데이트 될 때만 실행되게 하고 싶으면

//생략
const mounted = useRef(false);

useEffect(() => {
  if(!mounted.current){
    mounted.current = true;
  }else{
  //ajex
  }
},[바뀌는 값]);
//생략

- 컴포넌트가 마운트 될 때는 if 문에서 아무것도 실행하지 않고 mounted 값만 바꿔주고,
else에서 배열 안에 있는 값이 바뀌면, ajex 서버 통신이라던지 원하는 코드를 실행할 수 있다.

---

useEffect(() => {
  console.log('effect')
  console.log(name)
  return () => {
    console.log('cleanup');
    console.log(name)
  };
}, []);

- cleanup 함수 반환 (return 뒤에 나오는 함수이며, useEffect에 대한 뒷정리 함수)
- 언마운트 될 때만 cleanup 함수를 실행하고 싶을 때 :두 번째 파라미터로 빈 배열을 넣는다.
- 특정값이 업데이트 되기 직전에 cleanup 함수를 실행하고 싶을 때 :deps 배열 안에 검사하고 싶은 값을 넣어준다.

deps에 특정 값 넣기

• deps에 특정 값을 넣게 된다면 컴포넌트가 처음 마운트 될 때, 지정한 값이 바뀔 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출이 된다.

• useEffect 안에서 사용하는 상태나, props가 있다면, useEffect의 deps에 넣어주어야 하는 것이 규칙이다.

• 만약 사용하는 값을 넣어주지 않는다면, useEffect안의 함수가 실행될 때 최신 상태, props를 가리키지 않는다.

• deps 파라미터를 생략한다면, 컴포넌트가 리랜더링 될 때마다 useEffect 함수가 호출된다.