# useInput
useInput custom hook
import { useState } from 'react'; function useInput(validateValue) { const [enteredValue, setEnteredValue] = useState(''); const [isTouched, setIsTouched] = useState(false); //이거는 props로 받기 // const valueIsValid = enteredValue.trim() !== ''; const valueIsValid = validateValue(enteredValue); const hasError = !valueIsValid && isTouched; const valueInputChangeHandler = (event) => { setEnteredValue(event.target.value); }; const valueInputBlurHandler = (event) => { setI
원티드 프리온보딩 과제 - 3일차
useInput 학원에서 포폴 만들 때 사용했던 custom hook을 개선했습니다. 이전과 다르게 typesafe하게 사용할 수 있게 되었습니다. 다시 자동완성 뽕맛에 취할 수 있습니다. 여전히 아쉽습니다. 대입하는 인자로 알아서 타입 추론이 되게 만들고 싶었습니다. {id: "", pw: ""}만 대입해도 inputValues에 알아서 inputValues.id, inputValues.pw로 접근가능하게 작성하고 싶습니다. 호출하는 사람이 제네릭을 지정해야 한다는 점이 치명적인 단점입니다. 지금도 타입스크립트 기초가 너무 안 되어 있습니다. 조건부 타입 input에 의존성 props를 만들고 싶었습니다. 일단 못찾았습니다. 원래는 이렇게 label을 지정 id도 같이 입력하게 만들고 싶었습니다. 이거에 오늘 3 ~ 4시간을 들였습니다. 그냥 이렇게 해결할 수 있었습니다. @example 함수 `ho

React useInput hook으로 유효성 검사하기
사용자의 입력을 받고, 유효성 검사를 해야된다면 작성해야하는 코드량이 엄청 늘어난다. 만약 여기서 비밀번호도 입력받으면 어떻게 될까? 말해 뭐해? 코드가 2배가 된다. Input Component 일단 iuput 태그를 컴포넌트로 만들자! React.memo를 사용했는데, props가 변경되지 않으면 컴포넌트를 재렌더링 하지 않도록 최적화를 한 것이다. useInput hook 이제 state와 유효성 검사 관련 로직을 hook으로 분리해보자. Input + useInput 이제 Input 컴포넌트와 useInput hook을 사용해서 코드를 간결하게 작성해보자. input이 여러 개가 생겨도 코드가 2배로 늘어날 일은 없어졌다.

[To Do App] json-server 이용한 CRUD 구현
추가 구현할 것 Redux-Toolkit useAxios 훅 만들기 캘린더 (React-calendar, moment) uuid? React Hook Form > ### 2차 추가구현 Redux-Persist (새로고침 해도 유지되는 상태 데이터) https://tooo1.tistory.com/572 > #### json-server 이용해서 서버로 데이터(상태) 관리하기 ✅ Read (GET 요청) To Do 데이터 받아오기 useFetch 훅 사용 > #### src > Hooks > useFetch.js js import React from 'react'; import styled from 'styled-components'; import { useNavigate } from 'react-router-dom'; import useFetch from '../Hooks/useFetch'; ... > export
[React] 커스텀 훅 사용하기 (useFetch, useInput)
🤔Hook? 공식 문서 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능 (= class를 작성하지 않고도 state와 다른 react의 기능들을 사용할 수 있게 해주었다.) ⚠️Hook 규칙 1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. ⇒ 이래야 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. 2. 오직 React 함수 내에서 Hook을 호출해야 한다. Hook을 일반적인 JavaScript 함수에서 호출하면 안된다. ⇒ 이래야 컴포넌트의 모든 상태 관련 로직을 소스코드에 명확하게 보이도록 할 수 있다.
[CustomHook]useInput
useInput variable shadowing 참고 전개연산자 참고 value = {name.value} onChange = {name.onChange} {...value} 위 두 코드가 동일하게 작동되는 원리에 대해 설명. 1. input에 입력된 값을 value에 할당하

React Hooks -(useState, useInput)
useState > useState는 Top level에서는 호출할 수 없다. useState는 배열을 반환한다. 첫 번째는 값, 두 번째는 값을 변경해주는 함수. 두 파라미터의 이름은 아무렇게나 지어도 상관없으나, 보통은 아이템 이름과 set아이템이름으로 짓는다. useInput > ... 용법 체크(닷 세 개) > 배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있습니다. 이럴 때는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있습니다. > 구조분해 할당 참고 > https://ko.javascript.info/destructuring-assignment

フックマスターになりたい (1): 커스텀 훅!
리액트 컴포넌트를 처음 학습할 때, 컴포넌트란 "나만의 태그"라고 정의했던 기억이 난다. 좀 더 명확하게 컴포넌트란 props를 인풋으로 받아 DOM을 렌더하는, JSX를 리턴하는 단위(함수, 혹은 클래스)이다. 조금 오해의 소지는 있지만 단순하게는 (자바스크립트가 가미된) 재사용이 가능한 html 태그 더미라고 할 수도 있지 않을까? 컴포넌트의 제1 장점으로는 언제나 "재사용성"이 꼽히니까. 그런데 우리가 html 태그 더미를 재사용할 수 있다면, 컴포넌트 내에서 반복되는 함수 로직도 분리해서 여러 차례 재사용할 수도 있지 않을까? 이게 내가 이해한 커스텀 훅이다. 커스텀 훅은 주로 인풋 태그를 관리하거나 fetch를 실행하는 데서 사용한다. (확실히 같은 로직이 여러 차례 반복되는 경우들이다.) 오늘은 직접 작성해 본 Custom Hook들을 기록해두려고 한다. useInput 🤳🏻 우리가 리액트에서 인풋을 관리한다고 하면 그 로직은 대체로 비슷하다. 1)

Hook 사용예제: useInput
1. 동일한 파일에서 useInput 구현 hook을 이용하여 input창에 값을 입력했을 때 state를 변경해주고 동시에 validator를 이용하여 검증기능을 하는 것을 구현하였다. length가 10을 넘어가면 입력이 안되는 것을 알 수 있다. 2. 다른 파일에서 useInput 구현 후 불러오기(간단 예제) useInput.js에서 useInput hook 구현 항상 강의 영상에서 이렇게 구현하길래 이것이 곧 임은 알고 있지만 시각적으로 쉽게 이해하기 위해 다른 state의 변수명을 다르게 해보았다. 이해가 팍팍된다! App함수에서 import로 useInput hook 불러오기 출력 화면 
#5 Today I Learned - 21.01.10
Today I Learned 📝 classnames react : custom hooks 기본 사용법 classnames > 조건에 따라 * class를 추가 / 삭제 * 할 수 있는 react package이다. 사용법은 간단하다. Container의 기본 class는 "sidebar"이며 sidebar가 true일 경우 key의 대한 value값이 true이기에 key 값인 "open"을 toggleClass로 달아줄 수 있다. > classnames는 다양한 방법으로 표현할 수 있다. 문자열일 경우 true로 인식해 기본으로 보여지며, object는 key에 대한 value가 true일 경우 key값을 class로 return한다. 또한 동적으로 class를 주입할 수도 있다. 객체, 배열 및 인수를 함께 혼합할 수 있다. r