# 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 불러오기 출력 화면 
[React] React 중급 - useState를 활용한 문자열 입력 함수 구현하기
1. customized function - useInput > React hooks를 활용하여 input value를 update하는 함수를 구현한다. 문자열 변수인 name에 useInput hook을 호출하고, useState hook을 활용하여 input value를 update 해주는 구조를 만들어본다. 2-1. 함수 구조 >기본적인 input tag를 작성한다. value는 입력부의 값을 받는 문자열 변수를 받아야 하며, 이 경우엔 name.value의 형태로 인자를 입력한다. 해당 value는 name 이라는 변수에서 useInput 함수를 호출하여 객체인자를 전달하는 형식으로 되어있으므로, 이를 고려하여 정확한 value 접근 경로를 작성한다. 
make custom hook by react
front 폴더 아래 hooks 라는 폴더를 생성하고 useInput.ts 파일을 생성합니다. customhook 은 반복되는 상태 관리 코드를 줄이려고 할때 사용합니다. useInput.ts signup/index.tsx 다음과 같은 코드를 커스텀 훅으로 변경하기 다음과 같이 변경할 수 있습니다.
#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