# hooks

lwoody

개발 참고 자료

seob

React에서는 한 함수 안에서 setState를 하고 console.log를 하면 console에는 한 박자씩 느리게 찍혀 나오는 경우가 생긴다.Class형 Component에서는 다음과 같이 callback 함수로 해결할 수 있다.👇🏻해결법하지만 Hooks에서는

seob

구현하기는 쉬웠지만 반응이 좋았던 슬라이더이다.React의 장점중 하나인 Component에 props를 내려주면서 간단하게 구현이 가능했다.이미지는 모두 36장으로 이루어져있으며 이미지 아래의 가로 스크롤은 무려 input 태그이다..!ScrollSlider.js코드

skyosk123

🚨Hooks는 마법이 아닙니다! 그저 함수입니다!개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가

samiosae

본 문서는 학습을 위해서 https://usehooks.com/useAuth/ 를 번역한 글 입니다.본인은 개발 뉴비로 오역이나 직역이 많을 수 있습니다. 매우 보편적인 시나리오는 당신은 현재 user(사용자)가 로그인 했는지 여부에 따라 다르게 렌더링되야하는

zoeyul

함수형 컴포넌트에서도 상태를 관리하기 위해서 hooks를 사용한다.컴포넌트에서 동적인 값을 상태(state)라고 하는데, 이것을 사용하면 컴포넌트에서 상태를 관리할 수 있다.useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주

inhyejeong59

reducer란 무엇인가요?Re(act State Pro)ducer => Reducerreducer의 정의 정리다시말해, 리듀서라고 불리는 이유는 리듀서가 reduce()함수에서 사용하는 콜백함수이기때문에 리듀서라고 불립니다.(state, action) => newSt

zoeyul

✔️ 여기서는 MobX를 클래스형이 아닌 함수형 컴포넌트에서 Hooks, 그리고 Context API와 함께 사용하는 방법을 정리한다. 먼저 MobX와 함께 사용될 Context API에 대하여 알아보도록 하자. Context 주로 어플리케이션으로 전역적으로 데이

inhyejeong59

React에서 nested한 Children Component에게 props를 전달해야할 경우, props를 계속해서 넘겨줘야하고, 변경 점이 생기면 모두 수정해줘야하는 상황이 발생한다.이때, React Context를 통해 global로 state를 관리할 수 있다.

choidy180

가장 기본적인 Hook이며,함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다.

inhyejeong59

react의 Component Class 방식을 사용하다가 react hook을 알게 되니 신세계이다.state의 변경사항을 구독하고, 해제하는 code가 예를 들면 componentDidMount, componentDidUpdate 등.. 으로 파편화 되어 있고, 확

hurima90

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.

rud285

성능최적화 1. useMemo

devgosunman

# 😁 useState # 😃 useEffect # 🙄 useReducer # 😏 useMemo # 😙 useCallback # 😋 useRef # 😜 Custom Hooks

sbinha

input reset with antd

katanazero86

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

syj9484

위 사진은 클론코딩을 진행한 클래스101의 클래스 상세페이지이다. 각각의 탭을 클릭하면 해당하는 위치로 이동을 하는데 처음에는 바로 화면이 바뀌길래 active tab인줄 알았다. 클론코딩을 진행하면서 이 부분이 조금 불편하다고 생각되어서 스크롤 이동을 부드럽게 만들어주었다. 각 탭에 해당하는 element는 각자 ref를 가지고 있었고 이동을 하려면 하...

alskt0419

해당 포스트에서는 제가 최근에 알게된 새로운 기술들과 더 효과적인 프로젝트 설계 방법에 대한 내용을 다룹니다. 저는 올해 초 들어와서 React를 시작했으며 초기 당시에는 좋은 코드를 짜지 못했습니다. 예를 들어 presentational component 구현 방식

choidy180

useNotification는 알림이 실행되는 함수입니다.웹 콘솔에 Notification을 사용했을때 위의 사진처럼 알림을 주는 것입니다.해당 코드를 한번 봅시다. 우선 App을 볼텐데triggerNotif가 useNotification함수를 가지고 있고 본문의 버튼

choidy180

useFullscreen은 어떤 요소를 풀스크린으로 보여주는 hooks입니다.코드는 다음과 같고웹 페이지는 다음과 같이 만들어집니다. 물론 이미지는 다른 걸 사용해도 됩니다. 먼저 App 부분을 보겠습니다.우선 onFulls 함수를 보면 isFull의 true, fal