# hook
[React] 16. React-Redux-hooks 예제
오늘은 React-Redux에서 hooks를 사용하는 방법을 알아보도록 하겠습니다.hook은 클래스형 컴포넌트에서 state관리를 함수형 컴포넌트에서 state관리를 할 수 있게 해준 아주 좋은 애입니다.우리가 전 시간에 react-redux를 배웠을 때 redux에
[React] 9. react-hooks(useMemo, useCallback, useContext)
이어서 hooks API를 보도록 하겠습니다.useMemo는 하나의 상태값을 변경하였을 때 해당 컴포넌트가 다시 랜더링이 될때 불필요한 작업들을 하는경우가 발생합니다.전에 했던 Hooks를 사용한 예제를 통해 설명드리겠습니다.Hedaer.jsxcount 함수에 log
[React] 8. react-hooks(useState, useEffect, useRef)
Hooks 는 React 16.8 에서 추가 되었습니다.기존에는 함수형 컴포넌트에서 상태를 관리하기 위해서는 클래스 컴포넌트 다시 작성해야 했던 반면에, Hooks가 나오면서 함수형 컴포넌트에서도 상태를 가질 수 있게 되었습니다. Hooks는 이것 외에도 다양한 기능들
[React] Hook - useForm
React Hook Form 으로 간단하게 폼의 유효성을 검사하기React Hook Form 으로 간단하게 폼의 유효성을 검사하기
react-hook-form이란?
공식 홈페이지에 접속하면 첫번째로 강조하는 것이 '유연하고 확장 가능한 사용하기 쉬운 고성능 폼 검증 라이브러리'라고 정의되어 있다.react-hook-form은 hook 기반의 인기있는 유효성 검사 라이브러리이다.사용해보고 직접 느낀 생각을 간단하게 정리해보겠다.렌더
[React] 함수형 컴포넌트 사이에서 props 전달하기
2차 프로젝트를 하는 도중에, props 전달을 부모에서 자식으로, 자식에서 부모로, 부모에서 다른 자식으로 전달해야하는 경우를 만났다. 이 흐름(flow)을 한번에 이해하는게 어려워서 프로젝트 도중이지만, 기록을 해본다.
React - State Hook
React Hook을 이용하면 Class를 작성할 필요없이 state와 여러 React의 기능을 사용할 수 있다.그중에서 state hook은 Functional Component속에서 state를 사용할 수 있도록 해주는 hook이다.state hook은 useSta
React Hooks
hook은 컴포넌트에서 state와 생명주기 기능? 을 연동 해주는 함수이다.class안에서 동작 하지않고 class없이 리액트를 사용할 수 있게 해준다(이미 짜놓은 코드 재작성하는 것 권장X)useState는 Hook이 제공하는 하나의 라이브러리 입니다.count라는
[React] Context API (4) - Hook, static contextType
Context에 있는 값을 사용할 때 Consumer대신 다른 방식을 사용할 수도 있습니다.리액트 내장 Hooks 중에서 useContext라는 Hook을 사용하면, 함수형 컴포넌트에서 Context를 아주 편하게 사용할 수 있습니다.ColorBox 컴포넌트의 코드를
React의 useState Hook 만들어보기
회사에 신입으로 입사한지도 대략 3주가 지났습니다. 학교에서는 백엔드 개발만 공부했던지라 사실상 React를 접한지도 오래되지 않았습니다.그렇게 회사에서 많은 삽질을 하면서 너무나도 궁
React hook, OAuth) Social Login : Kakaotalk (라이브러리 없이 카카오톡 로그인 구현하기)
카카오개발자 사이트에서 js key를 발급받고,카카오로그인-동의항목 에서 받고자 하는 정보를 (필수동의 or 선택동의) 선택해서 저장한다.(백엔드에서 필요한 정보와 맞춰봐야한다. email만 필요한지, 생일도 필요한지 등등)(kakaotalk login을 쉽게 구현하기
2차 프로젝트 - React Hook으로 구글 소셜 로그인 구현하기
DataUSA에는 제대로 된 로그인 페이지도, 더불어 소셜 로그인 기능도 없지만 DataWeSA에는 멋진 로그인 페이지와 소셜 로그인 기능까지 갖춰져있다^^레이아웃 짜주신 효식님께 박수10번..👏👏👏소셜 로그인 기능 구현을 경험해보기 위해 우리 팀은 각자 하나씩
13. <Hook : useRef> useRef로 컴포넌트 안의 변수 만들기
이번에는 이전 시간에 배운 useRef를 활용해 컴포넌트 안에 변수를 만드는 법에 대해 설명만약 컴포넌트 안에서 let 키워드를 사용하여 변수를 선언하면, 해당 컴포넌트가 생성될 때마다 해당 변수는 해당 값으로 계속 선언됨. (다음에 리렌더링되어도 값이 초기화 됨)
11. <Hook : useRef> useRef로 특정 DOM 선택하기
HTML과 JS를 사용할때, DOM에 접근하거나 선택할 일이 있으면, getElementById나 querySelector 등의 DOM selector 함수를 사용함.React를 사용하는 경우에서도 특정 DOM에 접근할 일이 있다. 특정 엘리먼트의 크기/위치를 알아
10. <Hook: setState> React에서 여러개의 input 상태 관리하기
저번 예시와 다르게 이번엔 인풋을 여러개 관리해야 하는 상황이다!이때 처음 드는 생각은 \*\*useSate 함수\*\*와 onChange 함수를 여러번 정의하고 쓰면 되는거 아닌가 하는 생각인데 그것은 가장 최선의 방법은 아니다!가장 좋은 방법은 input에 name
09. <Hook: useState> Rect에서 input 상태 관리하기
이번에는 숫자 값이 아닌 input을 통해 입력받은 문자열의 상태를 관리.input 태그에 문자열을 입력하면, 바로 아래 실시간으로 입력한 문자열이 표시되고, 초기화 버튼을 누르면 입력한 문자열이 삭제되는 예제.이번엔, 문자열을 관리하니 useState 함수를 이렇게