Front-End(Web)/React - 프레임워크(React, Next)
-
[React.js] Event Handling(이벤트 처리)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:25
React에서 컴포넌트를 만들면서, 다양한 이벤트와 연계해야되는 경우가 많이 발생한다. (클릭, input change 등) 특히, 이번 3차 프로젝트를 하면서, Navbar 메뉴들의 마우스 오버가 바뀔때마다 표현되는 서브메뉴가 달라지도록 만들어야했고, 여기에 하강 애니메이션까지 추가되야했다. 이를 구현하기 위해, React의 mouse 이벤트 종류와 차이점을 제대로 공부하는 기회가 되었고, 이벤트에 관한 포스팅 필요성을 느꼈다. 📒 이벤트 처리하기 React 요소의 이벤트 핸들링은 DOM에 대한 이벤트 핸들링과 매우 유사하다. 하지만, 아래와 같은 차이점은 있다. 이벤트 명을 소문자가 아닌 cammelCase로 작성한다. onclick(x) => onClick(o) 이벤트 핸들러를 문자열이 아닌 함수로..
-
[React.js] Custom Hooks (Rules of Hooks)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 11. 05:09
이전에, 미니 프로젝트나 다른 함수형 코드들을 참고하다보면, useOOOO 형태의 몰랐던 Hooks 들이 가끔 보일 때가 있다. 이는, React에서 제공하는 Hooks API가 아닌, 개발자가 임의로 만든 Custom Hook 이라는 사실을 알게 되었다. 이 Custom Hook 의 개념과 의의(주는 반복의 최소화), 각종 사례를 공부하고, 3차 프로젝트가 스프린트보다 빨리 끝나게 되어 일부 반복기능을 커스텀 훅으로 수정해보려고 한다! 📒 Custom Hooks 소개 - Custom Hooks 를 왜 사용하는가? React의 Hooks 개념은 16.8버전(2019년 초) 에서 새로 추가되었다. 함수형 컴포넌트가 클래스형을 대체하도록 많은 기능을 지원하기 위해 등장했으며 아래와 같은 장점들을 뽐내며 소위..
-
[React.js/Side Lib.] React-RouterFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 29. 00:52
미니 프로젝트에서 네비게이션 메뉴에 React-Router를 적용해서 페이지를 변경해보았다. 범용적인 라이브러리기에 기술 포스팅을 하였다. 🧑💻 Routing - SPA(Single Page Application) React-Router 에 대해 공부하기 전에, 그 사용목적에 대해 얘기하려면 SPA 방식의 학습이 선행되어야 한다. SPA는 말 그대로, 페이지가 1개인 어플리케이션을 의미한다. 여기에서 페이지라 함은 HTML 파일을 의미한다. 그래서, 리액트같은 라이브러리(혹은 프레임워크)가 브라우저에서 뷰 렌더링을 담당하게 하고, 필요한 데이터만 전달받아 표현하게 된다. 기존의 MPA 와 가장 큰 차이는, 각 주소가 HTML 페이지가 아닌 JS파일(컴포넌트)을 불러와서 뷰를 수정하는 'Routing' ..
-
[React.js] React 소개(wecode)Front-End(Web)/React - 프레임워크(React, Next) 2020. 12. 28. 16:29
3주차 foundation 주차이다. 드디어, React 라이브러리 세션이 시작되었고, 첫 개념에 대한 정립을 해주는 유용한 시간을 마련해주셨다. 🧑💻Session : React 1. Why React? - Web Application의 발전 HTML/CSS/Javascript(DOM, Event) -> jQuery(Method 모음) -> React/Vue/Angular(Framework & Libarary) - Angular, Vue (Framework) Angular : 2010년 Google이 개발한 Framework. Typescript 기반으로 안정적이고 기능이 많으나, 러닝커브가 높다. Vue : 2014년 중국 Evan You 개인이 개발한 Framework. 코드가 깔끔해고 배우기가 쉬..
-
[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] React FormsFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 22:55
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 4 지난 포스팅에서는, PropTypes라는 props의 type을 검증하는 라이브러리에 대해 공부했다. 이번에는 React Form에 관해 공부한 내용이다. 기존 React를 쓰지 않은 환경에서는, HTML에 태그내 , 등 태그에 정보를 입력하였다. 또한, 이 정보를 을 통해 Submit하여 업데이트 처리했지만, 이는 React에서 선호하는 방법이 아니다. 하지만, React Form에선 매 입력/삭제의 순간순간을 서버에서 확인에서 확인하고 스크린을 업데이트 해야하며, 그렇기에 Form과 rest App들이 실시간 연동되어있는게 이상적이다. 📒 Event Listener : onChange 지금까지 에 종종 적용해온 onChange이다. rende..