# React Hooks

28개의 포스트
post-thumbnail

useImperativeHandle in Typescript

Todo 기본 뼈대는 다 잡았고, 뭘 추가해볼까 생각하고 있던 와중에 이 글의 useImperativeHandle 항목을 보고 괜찮은 거 같아서 적용해보았다. 그리고 타입 정의에서 막혀서 한참 헤메다가 겨우 해결하고 (...) 정리. 왜 이런 식으로 구현하는가에 대한

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

React Hooks의 이해

React는 v16.8부터 컴포넌트 상태와 컴포넌트 생명주기를 관리할 수 있는 API인 Hook을 제공하고 있다. Hook을 사용하면 함수 컴포넌트에서도 클래스 컴포넌트처럼 상태를 저장할 수 있고 컴포넌트 생명주기에 관여할 수 있다.

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

React Hooks

기존 함수형 컴포넌트에서는 상태(state)를 저장과 라이프사이클 등을 사용할 수 없었다..함수가 실행되고 나면 메모리 상에서 사라지기 때문!!그래서 상태를 저장하고 라이프사이클 메소드들은 클래스형에서 지원을 했었는데 함수형 컴포넌트에서 Hooks가 생기고 그것들을 흉

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

useEffect

official useEffect(https://ko.reactjs.org/docs/hooks-reference.html

2020년 8월 24일
·
0개의 댓글
post-thumbnail

리액트, 제대로 알고 개발하기 pt.2 ( Hooks는 쓰레기? )

엥, 그럼 훅스는 완전 쓰레기 아니야??" 여러분, 궁금한게 있는데요 " 동아리에서 함께 React를 공부 했던 사람들이 모여 있는 톡방에서 오랜만에 말을 꺼냈다. 앞선 포스팅을 작성 한 뒤로, 개발을 하는 데 있어 사소하지만 전반적인 변화가 생기기 시작했다. R

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

react hooks(useState, useEffect, uesRef, useContext, useMemo, useCallback, customHook)

react 에서 사용되는 hooks 내용 정리(useState, useEffect, uesRef, useContext, useMemo, useCallback, customHook)

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

React Hooks (6) - useConfirm & usePreventLeave

useConfirm은 사용자가 무엇인가를 하기전에 확인하는 것입니다. 사용자가 버튼을 클릭하는 작업을 하면 이벤트 실행전에 메세지를 보여주고 싶은 경우라고 이해하시면 됩니다. 정말 클릭하시겠습니까? 이런 거 같이 시작하기전에 한번 더 확인하는 것입니다. 이런 메시지는

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

D3.js + React.js (Hooks) 함께 사용하기 -3. 그래프 축 만들기

The Muratorium 유튜브 채널의 Using React (Hooks) with D3 튜토리얼을 우리말로 요점 정리한 포스팅입니다. 튜토리얼 영상을 꼭 보고 와주세요! 영어 튜토리얼이 익숙치 않으셔도 한번 쭉 보시고 와서 본 포스팅을 보시면 이해가 되실 거예요.

2020년 7월 26일
·
0개의 댓글
post-thumbnail

D3.js + React.js (Hooks) 함께 사용하기 -2. 곡선 그래프 만들기

이번 게시글에서는 데이터 시각화 라이브러리인 D3.js와 React.js의 Hooks를 이용하여 곡선 그래프를 간단하게 만들어보겠습니다. D3.js를 처음 접하신다면, 전편인 D3.js + React.js (Hooks) 함께 사용하기 -1 를 간단히 훑고 돌아와주

2020년 7월 24일
·
0개의 댓글

useCallback

메모이제이션된 콜백을 반환합니다.인라인 콜백과 그것의 의존성 값의 배열을 전달하세요. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해

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

useReducer, useContext in React Hooks(기능과 역할) - 1. useContext

useContext를 useReducer와 같이 쓰는 이유

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

20200313 TIL

20200313 TIL

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

부트캠프를 마치고 3개월간 프론트-엔드 개발자로 일하면서 느낀점들

간만에 포스팅인것 같다. 일을 시작하고 개인 블로그 따위는 저 멀리 내팽겨쳐놓고 원없이 개발만 한 것 같다. 짧으면 짧고 길면 긴 시간인데 이 시간동안 넥스트-리액트 프론트 엔드 개발을 하면서 가장 크게 느꼈던 점을 적으려고 한다. 본 내용은 지극히 개인적인 느낌이므로

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

Reack.Hook(ToDoList(2));

어제부로 공식적인 백수가 되었습니다. 개발 공부를 위하여 과감하게 퇴직하였습니다. 꿈은 back-end 개발자라 Node.js, Rust, C#.net-core에 관심이 있습니다. 그런데 React를 하는 이유는 Pug같은 템플릿 뷰를 쓰기 싫어서 배우고 있습니다! 더

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

Apollo Client (React)로 GraphQL 클라이언트 개발하기 (2)

이번 글에선 회원가입/로그인/로그아웃 기능을 구현한 서버와 클라이언트를 연결하려고 한다. 클라이언트 개발에 새로 사용하는 개념은 아래와 같다. - React Hooks - Apollo Client Hooks - Apollo Client Local State

2020년 2월 18일
·
7개의 댓글

TIL - React Hooks

Today What I Learned Javascript를 배우고 있습니다. 매일 배운 것을 이해한만큼 정리해봅니다. * 지난 2주 프로젝트에서 React만을 이용해서 채팅 서비스를 구현했다. 처음에는 상태 관리가 그렇게 많이 필요할까 했는데 메인 채팅창을 구현해보고 나니 앱 전체에 20개 가까이 되는 상태가 발생했고, 형제 컴포넌트들에 영향을 주는 경우...

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

[React] Custom-hook 공식문서 번역

React 공식문서를 번역한 내용입니다. 번역에 오역이 있을 수 있으며 모든 내용을 번역한 것은 아닙니다. 커스텀 Hook 만들기 커스텀 hook을 만들면 컴포넌트 로직을 재사용 가능한 함수로 뽑아낼 수 있다. 이 코드는 팔로워의 online상태 여부를 알려준다. 여기에 온라인 상태인 팔로워는 초록 색으로 표시하고 싶을 때, 이 코드를 복붙해서 또다른 ...

2019년 12월 25일
·
0개의 댓글
post-thumbnail

blog - useQuery & useMutation

Backend에서 구성한 query와 mutation을 react에서 사용하는 방식은 크게 두 가지이다. 1. Query, Mutation 태그 이용 2. useQuery, useMutation Hook 이용 2번은 apollo/react-hook에서 제공하는 custom hook인데, 나는 이 프로젝트에서 hook을 적극적으로 활용할 것을 하나의 주안점...

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

Custom Hooks - usePending

만들게 된 계기.... - 저는 회사에서 Mobx를 사용해 개발을 하면서 항상 Store에서 isLoading 이라고 변수를 하나 만들어 데이터 get, post 등 비동기 함수를 사용 할 때 썼습니다... 하지만 항상 이렇게 쓸 때 마다 너무 비효율적인거 같고 어쩔때는 작동을 하지 않은적도 꽤 있었습니다. 그래서 계속 고민하고.. 검색해보고.. 하다가 딱...

2019년 11월 12일
·
4개의 댓글