# hooks
Redux 적용하기 (함수형, Class 형)
React에서 가장 많이 사용 되는 Redux 에 대하여 조금은 바닥 부터 정리를 해봤습니다.물론 저의 글이 읽기가 진 않아서 개념 정리 보다는 코드로 풀어보도록 하겠습니다.먼저 개념 정리는 Velopert 님 께서 아주 잘 정리해주셔서 이를 참고 하도록 하겠습니다.요
[TIL] Hooks(useReducer, useContext)
보통 상태관리를 할 때 useState를 사용했었는데, useReducer를 통해서도 상태관리를 할 수 있고 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 이렇게 함으로써 나중에 context API나 Redux 사용 시 업데이트 로직을 전달해줄 수 있을것 같다
[TIL] Hooks (3) (useMemo, useCallback)
이번에는 useMemo, useCallback에 대해서 배웠다.useMemo는 "memoized" 를 의미하는데 이는, 이전에 계산 한 값을 재사용한다는 의미를 가지고 있다.useMemo의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣어주면 되고 두번째 파라미
[TIL] Hooks (2)(useRef, Custom Hooks)
useRef(useFadeIn) useRef는 함수형 컴포넌트에서 ref를 사용할 수 있게 해준다. src/useFadeIn.js useFadeIn 이란 커스텀 hooks를 만들어봤다. 이 함수를 사용해 ref를 이용하여 해당 요소의 transition, opacit
[TIL]Hooks (1)(useState, useEffect)
드디어 오늘부터 hooks를 배우고 알게 된 내용들을 하나씩 기록해보려 한다. 여기에 기록될 내용들은 노마드코더의 실전형 리액트 Hooks 강의와 React Hooks 공식문서를 바탕으로 나만의 Hooks를 만들어보며 배우게 된 내용들을 적을 예정이다.
Hooks
(수정중) useCallback() const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); 인라인 콜백과 그것의 의존성 값의 배열을 전달하세요. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성...
React Hooks?
Hooks는 class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 리액트 홈페이지에서는 hook을 아래와 같이 설명하고 있습니다. 1. State Hook 위의 코드에서 useState가 hook입니다. 위와 같이 hook은 함수형 컴포넌트에서 state를 사용할 수 있도록 해줍니다. 하나의 함수형 컴포넌트에서 여러...
React Hooks - useState
Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. 함수형 컴포넌트는 클래스형 컴포넌트와는 다르게 인스턴스가 생성되지 않아, 코...
React Hooks API로 Redux Global Store 따라해보기
부스트캠프 4기 과정을 참여중인, Node.js와 Docker를 좋아하는 주니어 개발자입니다. 이 글은 러닝커브가 높은 Redux를 도입하지 않기 위해 hooks로 Redux의 개념을 따라해본 과정을 담고 있습니다. > 이 글 에 저희 프로젝트가 어떤 것을 하고있는지 담고 있습니다. 간단하게 어떤 프로젝트인지 살펴보시려면 위의 글을 읽어보시는 것을 추천합니...
React의 useEffect
useEffect가 단순히 React의 lifecycle을 대체하기 위한 기능의 메소드는 아니지만 단순히 function components에서 lifecycle을 구현하기 위해 useEffect를 사용할 경우를 위해 케이스를 정리한 글입니다. 1. 마운트되었을 때 그리고 리렌더링되었을 때 2. 마운트되었을 때 (=== componentDidMount)...
RecoFashion - 완성 및 시뮬레이션
github url https://github.com/BaekGeunYoung/recofashion-client (client) https://github.com/BaekGeunYoung/recofashion-server (server) 목표 서비스 패션 코디 추천 서비스 기능 매일 데일리 코디를 추천해준다. 배색 조합 관련 이론을 참고해 사용자에게 상...
Custom Hooks - usePending
만들게 된 계기.... - 저는 회사에서 Mobx를 사용해 개발을 하면서 항상 Store에서 isLoading 이라고 변수를 하나 만들어 데이터 get, post 등 비동기 함수를 사용 할 때 썼습니다... 하지만 항상 이렇게 쓸 때 마다 너무 비효율적인거 같고 어쩔때는 작동을 하지 않은적도 꽤 있었습니다. 그래서 계속 고민하고.. 검색해보고.. 하다가 딱...
React를 Hooks 날려보자(1)
react v16.8 부터 추가사항으로 새로운 개념과 실용적인 접근이 가능한 것인데, class없이 componet에서 state와 lifecycle 메소드를 사용할 수 있도록 도와주는 것이다. 이러한 특징은 react 생태계에서 모두 이익이 되게 한다. 프론트 엔드 개발자로 모바일 앱을 react-native를 쓰든 말든 간에, 작업 환경에서 hooks...