🥯 애피타이저 처음 리액트 공식문서에서 useId라는 훅을 보았을 때 리액트에서 uuid를 대체하는 훅이 만들어진건가! 라는 생각으로 공부해보게 되었습니다. 하지만 공부해보니 uuid랑은 상관 없는 훅이었습니다. 이제 useId에 대해서 알아보겠습니다. 🍖 메인 const id = useId(); useId 훅은 매개변수는 사용하지 않습니다. 고유 ID 문자열을 반환합니다. useId는 컴포넌트 최상단 혹은 훅에서만 호출이 가능합니다. 리스트의 Key로 사용하면 안됩니다. useId 사용해보기 import { useId } from 'react'; const Input = ({labelText}) => { return ( {labelText} ) } export default function Form()..
🥯 애피타이저 안녕하세요. 이번 글에서는 useMemo를 예제와 함께 소개해보겠습니다. 끝까지 읽어주실것이라 믿고 미리 감사드립니다. 🍖 메인 useMemo가 뭐예요? useMemo는 React에서 컴포넌트의 성능을 최적화하는 데 사용되는 Hook입니다. 함수의 결과를 메모이제이션하여 비용이 많이 드는 계산을 최적화하는데 사용됩니다. 함수를 메모하는 useCallback과는 달리, useMemo는 함수의 결과 값을 메모합니다. const memo = useMemo(calculateValue, dependencies); calculateValue useMemo의 첫 번째 인수로 들어가는 calculateValue는 캐시 하려는 값을 계산하는 함수입니다. 이 함수는 순수 함수여야 하며, 인수를 받지 않아야 ..
🥯 애피타이저 안녕하세요. useReducer에 대해 공부하는 김에 TodoList를 만들어보게 되었읍니다. 매우 간단하고 디자인이라곤 1도 찾아볼 수 없으니 감안하고 봐주세요. 혹여나 코드에 대해 피드백이 있으시다면 댓글로 알려주세요. 그렇다면 제가 무한 감사를 드릴 것입니다. 🍖 메인 TodoList의 얼굴 해야 할 일을 써넣을 input 태그와 등록 버튼을 담은 form, TodoItem 컴포넌트, TodoItem들을 담을 TodoList 컴포넌트, 이렇게 3개의 컴포넌트로 구성된 간단한 앱입니다. reducer // reducer 함수 const reducer = (state, action) => { switch (action.type) { case "INIT": return [...action...
🥯 애피타이저 안녕하세요. 이번 글은 useReducer를 간단하게 알아보겠읍니다. 피드백할 부분이 있다면 댓글로 알려주세요. 그럼 무한 감사를 드립니다. 🍖 메인 간단 소개 useReducer는 React의 훅(Hook) 중 하나로, 컴포넌트의 상태를 관리하기 위해 사용됩니다. useReducer는 Redux와 비슷한 개념으로 동작하지만, Redux보다 더 간단하고 가볍게 사용할 수 있습니다. 문법 useReducer는 세 개의 인자를 받을 수 있습니다. const [state, dispatch] = useReducer(reducer, initialArg, init); 첫 번째 인자로 reducer 함수이고, 두 번째 인자로 initialArg(초기 상태), 세 번째 인자는 초기 상태를 반환해야 하는 ..
