React/Hooks (5) 썸네일형 리스트형 React Hooks #5 - Hooks(useRef) Ref useRef에 대해서 설명하기 앞서 Ref가 무엇이고, 사용 목적이 무엇인지에 대해 명확히 짚고 넘어가도록 하겠습니다. Ref는 Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 이는 클래스형 컴포넌트의 this.setState나 함수형 컴포넌트의 useState와 분리되어 생각해야 하며, 선언적으로 해결할 수 있는 부분을 ref를 통해서 React 엘리먼트를 수정하게 된다면 예상과 다른 동작을 만날 수 있고 유지보수가 어려워집니다. 가이드 문서에서는 바람직한 사용 사례를 크게 3가지로 구분 짓고 있습니다. 1. 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 많은 웹 사이트에서 Top Button을 통해서 스크롤을 맨 위로 이동시키.. React Hooks #4 - Hook Flow React LifeCycle Dan Abramov가 2018년에 react lifecycle methods에 대한 다이어그램을 공유했습니다. React v16.x 이전에는 링크의 다이어그램에 더해서 componentWillMount, componentWillReceiveProps, 그리고 componentWillUpdate도 있었으나 async rendering에 대한 문제점이 발견되어서 deprecated 되었습니다. 혹자는 Function Component를 설명하기 위해서 Class Component의 lifecycle에 대응해서 설명하기도 하고, 혹자는 Class Component의 lifecycle을 잊어버리라고 말하기도 합니다. 양쪽 다 일리 있는 말씀(Hooks의 도입 이전에는 Class C.. React Hooks #3 - Hooks(useContext) Passing down as Props 컴포넌트 간 상태를 공유하기 위해서 Props를 서로 내려주는 상황이 많이 발생합니다. 쇼핑을 하기 위해서 상단의 검색어를 입력하면, 중단의 검색 결과와 하단의 검색 항목들이 변하게 됩니다. 또한 하단의 정렬 조건의 선택에 따라서 하단의 검색 항목들이 변하게 됩니다. 검색 항목들을 새롭게 가져오는 함수는 특정 컴포넌트에 종속되며 props로 전달하는 방식 혹은 데이터들을 props로 전달하는 방식을 선택할 수 있습니다. 또한 만약 적은 데이터 수를 가지고 있다면 정렬 조건에 따라서 기존 가지고 있던 데이터들을 새로 불러오는 것이 아니라 데이터들을 정렬하는 상황이 있을 수 있습니다. 컴포넌트 간 바로 연결되어 있는 정보들을 props로 전달하는 것은 명확한 소스 코드.. React Hooks #2 - Hooks(useReducer) useState 클래스 컴포넌트에서 사용하는 this.setState와 같은 기능으로 컴포넌트 내부의 상태를 관리할 수 있습니다. 간단한 예제 : (https://reactjs.org/docs/hooks-state.html) // usage // const [value, setValue] = useState(initialValue); import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ({count}); }; 만약 두 개 이상의 특정 값을 확인하고 해당 값에 대해서 변화가 있을 경우 동시성(synchoronicity)을 보장하는 re-render를 하려고 한다면, .. React Hooks #1 - Motivation React React Hooks에 대해서 말씀드리기 앞서서, react는 다음과 같은 방향을 가지고 있습니다. 1. 선언형 '선언'을 한다는 것은 소스 작성 의도를 쉽게 파악하고 사용 / 수정 / 개선을 용이하게 할 수 있습니다. 예를 들어서 리스트가 존재할 때 매 3번째 원소는 두 번 이어서 만들고 싶다면, 두 가지 접근법을 택할 수 있습니다. 1) 명령형(Imperative) // imperative solution const inputArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; let outputArray = []; for(let i = 0; i < inputArray.length; i += 1) { let temp = inputArray[i]; if(i.. 이전 1 다음
