# hooks

devgosunman

이 글은 "리액트를 다루는 기술(김민준, 길벗)"을 요약한 글입니다. 많은 예제 코드들이 이 책에서 인용되었습니다. 자세하고 정확한 내용을 확인하시려면 책을 직접 구매해 읽어보시기를 추천드립니다.

suuhyeony

리액트에 내장된 Hook에 대해 더 알아보자.특정 DOM을 가리킬 때 사용하는 Hook 함수.Ex. 포커스 설정, 특정 엘리먼트의 크기/색상 변경 등..: ref는 JS의 getElementById()처럼, component의 어떤 부분을 선택할 수 있게 해주는 방법이

perfumellim

기업협업이 시작됐다. 우리가 온 기업에서는 사내 인트라넷을 만드는 업무를 줬고, 다행히 그동안 배워온 react를 이용해 개발에 들어갈 수 있었다. 2차 프로젝트 때 함수형 컴포넌트를 써보지 못했던 게 마음에 남아서 이번엔 함수형 컴포넌트 + hooks를 도전해보기로

suuhyeony

클래스를 작성하지 않고도, state와 다른 React의 기능들을 사용할 수 있게 해주는 기능.함수 컴포넌트에서 React state와 생명주기 기능을 연동(hook into)할 수 있게 해주는 함수이다. useState, useEffect와 같은 내장 Hook을 제공

sn9tk

Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다. 이것은 독립적인 테스트와 재사

crazy4u2

react 를 쓰는 이유 중에 하나는 바로 빠른 리렌더링이다. 그 중에 특히 몇가지 상황이 발생하면 빠르게 리렌더링을 하는데 그 중에 하나가 바로 state 가 변할 때 이다. 클래스 형을 사용할 때 setState 가 바로 그것이다.react v16.8 이상부터 함수

ichbinmin2

react에는 기본적으로 내장하고 있는 Hooks가 있다.컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵기 때문 (HOC, render props)에 등장한 것이 바로 hooks이다.React에 존재하는 component 종류 Class component st

cheal3

201023

cheal3

201022

vvvvwvvvv

useReducer 는 useState 보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook 입니다.reducer는 Redux를 공부할 때 도움이 되니 조금 알아보도록 하겠습니다.리듀서는 현재 상태와, 업데이트를

hayyim0626

React에서 컴포넌트를 선언하는 방식에는 2가지가 있다.첫 번째는 1차 프로젝트 때 사용했던 Class형 컴포넌트 방식이고,다른 하나는 이번 2차 프로젝트 때 사용했던 함수형 컴포넌트 방식이다.그러나 우리가 앞서 배웠던 함수의 특징을 생각해보면 이상하다는 생각이 든다

realryankim

React 함수형 컴포넌트(functional component)에서 useEffect를 사용하면, side effect를 수행할 수 있다.side effect: React Component가 화면에 render된 후에, 비동기로 처리되어야하는 효과들useEffect(

realryankim

Hooks 함수 컴포넌트에서 React state의 생명주기 기능(Lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수다. Hook은 class 안에서는 동작하지 않고, class 없이 React를 사용할 수 있게 해준다. Hooks

hyounglee

참고자료 [React] 클래스형 컴포넌트 vs 함수형 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하지만 약간의 차이점이 존재한다. 클래스형 컴포넌트는 state 기능 및 라이프사이클 기능을 사용할 수 있으며, 임의 메서드를 정의할 수 있다. render 함수가 꼭 있어야 하고 그 안에서 jsx를 반환한다. 함수형 컴포넌트...

hyounglee

아직 익숙하지 않은 훅스 개념을 직접 코드로 쳐보면서 익혀보자. 3주 전에 만들었던 Instagram 로그인페이지를 Hooks를 사용해서 functional 컴포넌트로 바꿔보고 styled-component를 적용해서 새로 작성해보았다.

mandarinduk

Hooks - useState, useEffect

hyounglee

참고자료 : React Hooks 공식문서, 함수형 컴포넌트, 클로저, useState함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into) 할 수 있게 해주는 함수이다.

superfly9

useState의 대체 함수로, 하나의 컴포넌트에서 여러 개의 state를 다룰 때 사용(state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환initalState에 넣어준 값 ===

superfly9

다음을 지켜야 리액트가 각 Hook의 상태를 제대로 기억하고 사용규칙 1: 하나의 컴포넌트에서 훅을 사용하는 순서는 항상 같아야 한다,if문 안에서 훅 쓰지 말것 => 실행 안 될수도 있기에for문 안에서 훅 쓰지 말것 => for문 조건 따라 실행 횟수 달라지고 실행

cyheum

숙박 공유 서비스 에어비앤비 클론 프로젝트schemaGeneral info(- Demo(- Technologies(- Features(- Contact(숙박 공유 서비스 에어비앤비 클론 프로젝트개발기간 : 2020.08.31 ~ 2020.09.11팀원 : Front-e