hooks
-
[Redux] Hooks - useSelector, useDispatchFront-End(Web)/React - 라이브러리들 2021. 2. 17. 02:55
😅 서론 react-redux의 connect() 함수와, mapStateToProps, mapDispatchToProps 를 열심히 공부했는데... Dev Ed님 유튜브 영상을 복습하면서, useSelector, useDispatch 라는 간편한 Hooks들을 지원해주는 것을 알았다. (하마터면 connect() 함수로 프로젝트 진행할뻔) 이를 계기로, react-redux에서 지원하는 Hooks 들의 종류와 기능에 대해 한번 공부해보았다. 💜 React-Redux의 Hooks 적용 React-Redux 7버전 이후로, React 에 대한 Redux 관련 Hooks API들을 제공하게 되었다. 이에 따라, 이전의 connect() HOC(Higher-Order Component) 작업이 불필요해진 것이..
-
[React.js] Hooks - useCallback, useMemoFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 27. 17:37
기본 프로젝트의 마지막으로, useCallback 훅에 대한 사용이 주어져서 이 글의 포스팅을 시작하게 되었다. 간단히 검색해보니, 이 훅들은 공통적으로 '최적화'의 역할을 담당한다고 한다. 반대로 말하면 필수적이지는 않다는? 최적화의 원리가 되는 'Memoization' 과 여기에 해당되는 위 훅들에 대해 간단하게 정리한 뒤 프로젝트에 돌입하겠다. 📒 useCallback - Memoization 이 필요한 이유? React 컴포넌트가 렌더링(부모 렌더링, state 변경 등) 될 때마다, 내부의 함수들도 새로 선언한다는 단점이 있다. 여기서 state와 무관한 함수들의 재선언을 최소화하여 메모리 낭비를 줄이는 최적화의 목적으로 이 Hooks 들이 사용되는 것이다. - 문법 useCallback 은 컴..
-
[React.js] Hooks - useReducerFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 26. 04:16
React 미니 프로젝트들을 수행하다보니, useContext, useReducer 사용을 하라는 미션이 주어졌다. 이 개념에 대한 선행학습을 해봤다. 📒 useReducer useContext와 마찬가지로 통합적인 state 관리를 위한 Hooks다. useReducer는 useState의 대체함수로 생각할 수 있다. Redux의 Reducer, Action 과 그 동작성격이 매우 유사하다고 느껴졌다. - 문법 React 공식 사이트의 useReducer 로 카운터를 구현한 예제를 인용했다. const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': return {cou..
-
[React.js] Hooks - useContext (Context API)Front-End(Web)/React - 프레임워크(React, Next) 2020. 12. 25. 20:33
React 미니 프로젝트들을 수행하다보니, useContext, useReducer 사용을 하라는 미션이 주어졌다. 이 개념에 대한 선행학습을 해봤다. 📒 React Context useContext 훅을 공부하기 전에, React의 Context 개념에 대해 우선 이해를 할 필요가 있다. 1. Context 개념 React App은 많은 컴포넌트들로 구성되어있고, 어떤 정보(props 값이나 함수)는 여러 컴포넌트를 거쳐 전달되는 경우가 존재한다. 이러한 정보들을 전역적으로 사용하기 위해 Context에서 이를 관리 및 공유해주며, 이를 사용하기 위한 기능을 Context API라 한다. - 언제 Context를 써야 할까? 전역적(global) 데이터 공유에 특화된 방법으로, 로그인 유저 데이터, 설..
-
[React.js] Hooks - useEffect()Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 28. 16:58
🤷 Rendering 후에 사용되는 코드들 컴포넌트가 렌더링된 후에 사용되는 코드들이 있다. 이러한 코드들이 쓰이는 이유는 다음과 같다. 백앤드 사이드에서 변경된 데이터를 패치 데이터의 변동을 확인하기 위함 Timers(setTimeout 등) 및 Intervals(setInterval) 의 운용 위 조건들에 따라 필요시 DOM에 변화를 주기 위해 useEffect() 역시 렌더링 후의 동작을 위해 사용되는 Hooks로, 클래스형 컴포넌트의 Lifecycle 중 componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 기능을 담당한다고 생각하면 된다. 📒 useEffect() useState와 마찬가지로 React 라이브러리에서 import..
-
[React.js] Hooks - useState()Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 27. 22:54
🤷 state.hooks 함수형 컴포넌트에서도 클래스처럼 state를 사용할 수 있게 해주는 기능이다. (React v16.8에서 추가됨) 클래스형 컴포넌트가 지원기능은 많지만 아래같은 단점들도 분명 존재했다. 매우 난해함(생성자 함수, super(props) 등). 컴포넌트끼리의 연동이 어려움(this 개념). 많은 버그를 유발할 수 있고, 그렇기에 테스팅 시간이 길어진다. 그래서 함수형 컴포넌트에서도 state 등 기존 class 기능을 사용할 수 있도록 지원된 기능이 React Hooks다. useState(), useEffect(), useContext(), useReducer(), useRef() 등이 있다. (Hooks 종류: reactjs.org/docs/hooks-reference.html..
-
[React.js] Component 기본Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 24. 20:54
🤷 Component(컴포넌트)의 이해 React 프로젝트의 UI를 독립적이고 재사용이 가능하도록 나눈 최소 단위를 Component라고 한다. (반복적인 패턴구현 용이) Javascript 함수와 유사하다. 'props'라는 입력을 받은 뒤, React element를 반환한다고 이해하자. * 컴포넌트는 단순한 템플릿이 아님! - 주어진 데이터를 반영한 UI를 구성하며, Lifecycle API로 켤 때, 변할 때, 꺼질 때 각각 구현도 가능! - UI / UX 개념과 차이점 UI(User Interface): 사용자가 App을 사용할 때 마주하는 디자인, 레이아웃, 인터페이스 등 기술적인 부분을 얘기한다. 단순히, 보여지는 화면만을 얘기하는게 아니라, 폰트/칼라/줄간격 같은 세부요소 및 반응형/애니메..