# React Hooks

92개의 포스트
post-thumbnail

(React) Trendy React : useReducer

useReducer는 State를 다루는 관점과 방법 정도이고, useState로 작성할때에 비해 작성해야 하는 코드의 양이 많으므로 어떻게 활용하면 좋을지 감을 잡기 어렵다

2021년 9월 10일
·
0개의 댓글

[React] React 실무 - hooks를 응용한 axios(url 요청)함수 구현하기 / 실무적용이 가능한 useEffect 활용방안 학습

외부 url 및 data를 요청하는 axios API를 customized한 함수로 구성하며, API요청 시 error 및 data를 log로 출력하는 기능을 제공한다.axios를 통해 url을 요청하고, API를 받아와 log에 data를 출력하는 구조를 구현한다.u

2021년 8월 25일
·
0개의 댓글

[React] React 중급 - 시스템 알람 함수 구현하기

시스템 알람을 실행하는 함수Notification 지원 여부를 사전에 확인한다.보통 window에 접근하여 특정 함수나 logic을 실행하는 경우, 내장되어있는 API를 사용하는 경우가 많다.이러한 API를 사용할 때는 공식문서를 참조하여 사용하는 것이 가장 효율적임을

2021년 8월 25일
·
0개의 댓글

[React] React 중급 - 실무에서 활용할 수 있는 scroll 함수 / full screen 함수 구현하기

scroll을 하면서 특정 범위에 도달하였을 때 글자색 등을 바꾸는 함수vh, viewport height수직(화면에서의 상하)으로 표현하는 전체 스크린을 상대적 크기로 반환하는 인자이다.전체화면의 기준은 100vh이다.height : '1000vh' 일 경우 전체 스

2021년 8월 25일
·
0개의 댓글

[React] React 중급 - 실무에서 활용할 수 있는 hooks 애니메이션 / 네트워크 상태감지 함수 구현하기 (*useEffect 활용)

요소가 화면에서 서서히 나타나도록 하는 함수 (style opacity를 이용)tag 내부의 style option에 opacity를 넣어 투명도를 조절할 수 있다.CSS이므로 이중괄호({{}})를 넣어야 구현할 수 있다.투명도는 낮을 수록 투명하고, 높을 수록 불투명

2021년 8월 24일
·
0개의 댓글

[React] React 중급 - 실무에서 활용할 수 있는 경고/확인창 함수 구현하기 2 (*useEffect 활용)

마우스 커서가 특정 탭, 범위를 벗어났을 때 메시지를 전달하는 함수화면이 rendering 되었을 때 Window에 mouse가 페이지 범위를 벗어났을 떄의 이벤트를 add하고, 해당 이벤트가 발생하면 log를 출력하는 함수를 먼저 구현한다.useEffect를 사용한다

2021년 8월 24일
·
0개의 댓글

[React] React 중급 - 실무에서 활용할 수 있는 경고/확인창 함수 구현하기 1

사용자가 특정 이벤트 및 작업을 실행하기 전에 경고 메시지를 발생시키는 함수Check What happens 버튼을 클릭하였을때 confirm 창이 팝업되는 구조를 구현한다.App function에 기본적인 버튼과 logic을 구현한다.위 코드에서의 confrimRes

2021년 8월 24일
·
0개의 댓글

[React] React 중급 - useEffect를 활용한 event log 함수 구현하기

특정 요소를 클릭하면 해당 요소와 연결된 함수나 event를 실행하는 함수모든 element, component, 객체 등의 reference element가 존재하는데,이 ref element를 DOM과 연결하여 해당 DOM에 접근하고 사용할 수 있도록 하는 hook

2021년 8월 24일
·
0개의 댓글

[React] React 중급 - useState를 활용한 Tab 제목 함수 구현하기

useEffect를 활용하여 문서 제목을 업데이트하는 함수를 구현한다.본 함수는 화면구현이 완료된 상태에서 진행하며, 화면을 구현하기보다는 함수를 구현하는데 집중한다.App function에서 최초 rendering 되면서, useTitle 함수를 실행하고 문서제목을

2021년 8월 24일
·
0개의 댓글

[React] React 중급 - useEffect

useState와 함께 가장 대표적인 hook 중 하나이다.Class에서 제공하는 method 중 ComponentDidMount, ComponentDidUpdate, ComponentWillUnmountlifecycle method 기능을 제공한다.ComponentD

2021년 8월 23일
·
0개의 댓글

[React] React 중급 - useState를 활용한 배열 내 데이터 선별 함수 구현하기

React hooks를 활용하여 주어진 데이터(배열) 중 특정 데이터만 선별하여 표현하는 함수를 구현한다.선별할 데이터 및 관련 내용을 담을 객체를 배열변수에 구성한다.content로 선언된 배열에 객체 데이터들을 저장한다.기본적인 render 구조를 구성한다.먼저 최

2021년 8월 23일
·
0개의 댓글

[React] React 중급 - useState를 활용한 문자열 입력 함수 구현하기

React hooks를 활용하여 input value를 update하는 함수를 구현한다.문자열 변수인 name에 useInput hook을 호출하고, useState hook을 활용하여input value를 update 해주는 구조를 만들어본다.기본적인 input ta

2021년 8월 23일
·
0개의 댓글

[React] React 중급 - hooks 기본 개념

쉽게 말하면 function component나 class를 따로 사용할 필요없이 function component에 class 기능을 구현하여일관된 React component programming을 가능하게 해주는 기능을 말한다.기존 Component (functi

2021년 8월 22일
·
0개의 댓글

[React] Component Pattern(class), hook

React는 data 표현과 전달이 모두 이루어지는 문법이 핵심이다.React는 기본적으로 프론트엔드목적의 라이브러리로, 넓게 보면 data 구현에 초점을 맞춘 logic 구현을 맞춘 문법을 활용한다.그러나 logic을 세부적으로 들여다보면, data 전달을 중심으

2021년 8월 9일
·
0개의 댓글

스타일 컴포넌트 props 의 사용

내가 기존에 적었던 코드는 다음과 같다.로그인 기능에서 인풋의 value 가 조건을 충족해야만 버튼이 활성화-> 마우스 포인터의 활성화, 버튼의 색상이 변화하는 기능이다.첫번째로, 이제는 함수령 컴포넌트를 쓰게되었기 때문에 return 상단 (함수의 내부) 에 isAl

2021년 7월 25일
·
0개의 댓글
post-thumbnail

Today I Learned - 0725

[React] useEffect()

2021년 7월 25일
·
0개의 댓글
post-thumbnail

Today I Learned - 0724

[React] useTab()

2021년 7월 24일
·
0개의 댓글
post-thumbnail

Today I Learned - 0723

[React] useInput()

2021년 7월 23일
·
0개의 댓글
post-thumbnail

Today I Learned - 0722

[React] React-Hooks: useState()

2021년 7월 22일
·
0개의 댓글
post-thumbnail

React Hooks, useMemo로 최적화하기

useMemo 는 useCallback과 유사한 방식으로 최적화에 사용된다.useCallback 은 메모이제이션 된 함수를 반환하는 반면에 useMemo 는 메모이제이션 된 값을 반환한다.다음의 예제를 보자.Counter One 버튼을 누르면 counterOne 변수가

2021년 7월 17일
·
0개의 댓글