React (19) 썸네일형 리스트형 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.. CSS #6 - CSS-in-JS (2) Styled-Component with Storybook CSS-in-JS !== Inline Styles styled-component를 작성하기 위해서 TTL로 작성하다 보면 종종 inline style로 작성하는 것처럼 느껴질 때가 있습니다. 그러나 만약 inline style과 같다면 CSS-in-JS를 대신하지 않았을까요? inline style에서 할 수 없는 부분들에 대해서 CSS-in-JS가 더 많은 기능을 제공합니다. inline-style과 styled-component는 서로 비슷해 보입니다. // styled-component export const StyledButton: React.FC = ({ content, handleClick, margin }) => { return ( handleClick()} margin={margin}> {.. CSS #5 - CSS-in-JS (1) Pros and Cons 시작하며 npm trends (https://www.npmtrends.com/emotion-vs-sass-loader-vs-styled-components)라는 사이트에서 SASS와 CSS-in-JS들의 다운로드 수를 비교해서 제공하는 곳이 있습니다. emotion, styled-components, JSS, aphrodite, radium, glamorous, styletron, ... 등 많은 선택지가 존재하는 CSS-in-JS는 다운로드 수가 계속 증가하는 추세에 있습니다. 각각의 사용 방식에 대해서 모두를 설명드릴 수는 없겠지만 공통적으로 담겨 있는 의도와 원리에 대해서 말씀드리고자 합니다. 많이 알려진 styled-components에 대해서 먼저 다뤄 보고, 차후에 Emotion을 정리해 보도.. CSS #4 - SASS (3) with CSS Module classnames classnames(https://www.npmjs.com/package/classnames)는 각 태그에 대해서, 혹은 컴포넌트에 대해서 클래스 명칭을 적용하기 위해서 사용하는 className을 더욱더 가독성 있고, 쉽게 작성할 수 있게 도와줍니다. classnames function은 string일수도 있고, object일수도 있는 여러 개의 아규먼트를 받아서 해당 부분을 여러 개의 클래스 명칭을 적용하도록 돕습니다. 또한 bind version을 사용하는 것을 통해서 CSS-Module의 스타일 적용을 돕습니다. 클래스 명칭을 dynamic allocation 하고 싶다면 다음과 같이 작성될 수 있습니다. const [isRed, setIsRed] = useState(false.. 이전 1 2 3 다음
