# hooks

128개의 포스트
post-thumbnail

💙 React 활용법 핵심 요약

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

2일 전
·
0개의 댓글

[리액트] useRef, useEffect

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

2020년 11월 23일
·
0개의 댓글
post-thumbnail

TIL : Hooks 도전기 -1

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

2020년 11월 19일
·
0개의 댓글
post-thumbnail

[리액트] Hook 개념, useState

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

2020년 11월 13일
·
0개의 댓글
post-thumbnail

[React] Hooks

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

2020년 11월 10일
·
0개의 댓글

useState

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

2020년 11월 9일
·
0개의 댓글

[ react : hooks ]

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

2020년 11월 8일
·
0개의 댓글

[React] 10. react-hooks(useReducer)

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

2020년 10월 20일
·
0개의 댓글
post-thumbnail

TIL - React Hooks

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

2020년 10월 18일
·
0개의 댓글
post-thumbnail

[React] Hooks (useEffect)

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

2020년 10월 10일
·
1개의 댓글
post-thumbnail

[React] Hooks (useState)

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

2020년 10월 8일
·
2개의 댓글
post-thumbnail

TIL 63 | 클래스형 컴포넌트 vs 함수형 컴포넌트

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

2020년 10월 4일
·
0개의 댓글
post-thumbnail

TIL 62 | 클래스형 컴포넌트인 로그인 페이지를 함수형 컴포넌트로 바꿔보자 ( Hooks & styled-component)

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

2020년 10월 4일
·
2개의 댓글

[React] useState, useEffect

Hooks - useState, useEffect

2020년 10월 3일
·
0개의 댓글
post-thumbnail

TIL 59 | Hooks (useState, useEffect)

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

2020년 10월 2일
·
0개의 댓글

useReducer

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

2020년 10월 2일
·
0개의 댓글

훅의 사용

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

2020년 9월 28일
·
0개의 댓글
post-thumbnail

[Project] Air BnB clone

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

2020년 9월 27일
·
0개의 댓글