# hook
FullStack.instargramClone(5);
Apollo라는 폴더를 만들어 주고 그 안에 Client와 LocalState라는 JS파일을 만들어 줍니다. Apollo 서버는 Client라는 props를 전달해줘야 하고, Client는 GraphQL 서버 주소가 필요로 합니다. Apollo 서버는 react-ap
[React] Redux 시작하기
리덕스 공식 API와 자습서를 번역한 내용이다.구글 번역기의 도움을 빌렸으며, 번역이 어색한 부분은 재량껏 의역하도록 노력하였다.
[React] Custom Hook 만들기 (번역)
리액트 공식 Document 중 Custom Hook 생성 부분을 번역한 내용이다.구글 번역기의 도움을 빌렸으며, 어색한 문장은 재량껏 번역하도록 하였다.
Hooks [1편]
React를 공부하다가 Hooks이라는 게 나와서 잠시 react 사이트에 들어가서 개요부터 읽어보았다. 이해한 내용을 바탕으로 velog를 남긴다.크게 문제점은 3가지로 나와있다.1\. It’s hard to reuse stateful logic between com
TIL : React Hook #1, 함수형 컴포넌트
목차 함수형 & 클래스형 컴포넌트 hook의 특징 hook 사용법 useState() useEffect() props 전달 ContextAPI 사용하기 함수형 & 클래스형의 사용차이 useContext() 함수형 & 클래스형 컴포넌트 리액트에서
Reack.Hook(ToDoList(2));
어제부로 공식적인 백수가 되었습니다. 개발 공부를 위하여 과감하게 퇴직하였습니다. 꿈은 back-end 개발자라 Node.js, Rust, C#.net-core에 관심이 있습니다. 그런데 React를 하는 이유는 Pug같은 템플릿 뷰를 쓰기 싫어서 배우고 있습니다! 더
React.Hook(ToDoList(1))
이제 react와 Hooks를 써서 ToDoList를 만들어보겠습니다. 이번 강의도 역시 해당 서비스를 만드신 김민준님의 책 내용입니다.먼저 yarn으로 todo라는 이름의 리액트 프로젝트를 생성하고 react-icons, classnames, node-scss도 함께
React.Hook(고객관리스템 리팩토링)
이번에는 저번에 썻던 ustState와 useEffect를 이용하여, 저번에 만들어 본 고객관리시스템의 리팩토링을 시작하겠습니다. 리팩토링 하는 과정에서 저번에 만났던 오류인 allow-orign 오류가 나와 한참을 고생했습니다. express에 cors 모듈을 사용하
useReducer Hook
useReducer Hook? 상태 업데이트에 주로 썼던 useState 뿐만 아니라 useReducer로도 업데이트 가능 차이점 useState()에서는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 업데이트 useReducer()에서는 action을 기반으로 상태 업데이트, 업데이트 시 action참조 업데이트 시 참조하고 싶은 값이 있다면 di...
useCallback Hook
useCallback Hook? 이전에 만들었던 이벤트 핸들러 함수를 재사용하는 것 useMemo와 비슷하지만, 함수를 위한 Hook Component들이 props가 바뀌지 않았다면, 아예 리렌더링 시에 기존의 Component를 재사용하게 만들 수 있는데 이를 위해서는 안의 내용물들이 새로 만들어지지 않아야 함 useCallback은 함수를 재사용하도...
useMemo Hook
useMemo hook? 이전에 사용된 값을 재사용하는 방식 주로 Component성능을 최적화할 때 사용 예를 들면 input에 값을 입력할 때, onChange이벤트를 발생시키면 input내부의 상태가 바뀌는데, 이때 리렌더링이 발생. 문제는 다른 바뀔 필요가 없는 것도 같이 바뀌어버림 이때, useMemo를 사용하게 되면 값이 바뀌지 않으면 리렌더...
# 리액트 hooks: 함수형 컴포넌트
1. 리액트 hooks 기초 1.1 리액트 훅이란? 클래스형 컴포넌트의 기능을 사용할 수 있는 함수형 컴포넌트라고 볼 수 있다. life-cycle과 state관리 모두 가능하다. 1.1.1 혹의 장점 재사용 가능한 로직의 관리가 쉽다는게 제일 큰 장점이다. 이는 훅이 단순한 함수이고 함수 안에서 다른 함수를 호출하는 것으로 새로운 훅을 만들 수 잇기 떄...
React Redux - Store
1. 개요 스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다. 디스패치 (dispatch) store.dispatch(action) * 디스패치는 액션을 발생 시키는 것 이라고 이해하시면 됩니다. * dispatch 라는 함수에는 액션을 파라미터로 전달합니다. 그렇게 호출을 하면, 스토어는 리듀서 ...
React useEffect
useEffect 는 설정에 따라 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때, 그리고 업데이트 직전, 후에 (특정 props, state가 바뀔 때) 특정 작업을 처리합니다.
React Hooks(리액트 훅스!)의 기본 Part 2
React hooks image Part1에서는 Hook을 통해 Class가 아닌 function(함수)만으로 state를 생성하고 갱신하는 방법을 알아보았습니다. 그러나 우리는 그것을 넘어서 state의 라이프 사이클을 다루고 싶습니다. 그것을 위해 우리는 Effect Hook에 대해 알아보겠습니다. 자 우선 기존에 Class를 통해 라이프 사이클을 ...
useEffect에 대한 짧은 가이드
들어가기 전에 이 글은 useEffect API에 대해 어느정도 익숙한 독자를 위한 글입니다. 그리고 오역과 의역이 많을 수 있으니 이상하다 싶은 부분은 원래 문서를 참고해주시기 바랍니다. A Complete Guide to useEffect - Dan Abramov 에서 정보를 얻어 번역하였습니다. I got information from here an...