분류 전체보기 (29) 썸네일형 리스트형 페이지 뒤로가기 시작하기 전에 우리는 지표(signal)들과 함께 살고 있습니다. 지표를 만들기도 하고 지표를 보고 이해를 합니다. 지표들 중에서 단연 쉽게 마주칠 수 있는 것은 표지판입니다. 운전을 할 때 좌회전이 가능한지에 대한 여부나 내가 어느 위치에 있는지 등 직관적인 정보를 해석할 수 있게 도움을 줍니다. 그런데 만약 이러한 정보들을 제공하는 지표가 잘못된 정보를 이해하도록 한다면 어떻게 될까요? 최악의 경우는 의도를 잘못 이해하고 이에 따라서 행동하게 될 것입니다. 예를 들자면 다음과 같은 경우가 있겠습니다. 'Doom 1'을 플레이하는 유저가 미로를 찾는 과정에서 왼쪽 길은 막다른 길인데 왼쪽으로 이동할 수 있다는 방향 지시 표를 보게 되는 상황과 같습니다. 유저는 왼쪽으로 이동을 해보고 막다른 길인 것을 .. 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}> {.. 2021 / 6 / 20 해야 하고, 하고 싶고, 하기 힘든 일 React Hooks에 대해서 인터넷이나 리액트 책에 끼여(?) 있는 것을 보고 사용을 해왔습니다. 잘 알고 사용하고 있는 것인지 그리고 잘 사용하고 있는지에 대한 의심이 생김과 동시에 자신감이 떨어졌습니다. 그래서 해결 방안을 찾고자 생각을 했고, 운이 좋게도 궁금증을 어느 정도 해결해 줄 수 있는 책을 찾았습니다. 해당 책을 공부하면서 소스코드를 따로 작성해보고, 고민했던 부분과 고민을 해결한 부분을 소개해 볼까 합니다. 이렇게 꼭 제 자신에게 필요한 것이 생겼지만 밀린 숙제가 많아서 걱정입니다. 전에 하다가 중지한 GraphQL, Testing, 그리고 CSS 등등. 기억은 하고 있지만 시간이 부족해서 아쉬움이 많습니다. 시간이 부족한 것이 핑계인지 진짜인지,.. 이전 1 2 3 4 다음
