리액트

나는 평소에 개발 관련 서적을 많이 읽는 편이다. 서점에 가서 보기도 하고 지인들에게 추천을 받아 읽기도 한다. 그러던 중 최근에 눈길을 끄는 제목의 프론트엔드 개발 서적 한 권을 우연히 만나게 되었다. 바로 이 책이다. 나는 현재 회사에서 타입스크립트와 리액트로 웹 프론트엔드 개발을 하고 있다. 사실 이 스택은 나 뿐만 아니라, 굉장히 많은 회사에서 이미 표준으로 자리잡고 있는 스택이라 웹 프론트엔드 개발자로 취업을 하길 희망하는 취준생에게는 필수적이라고 보아도 과언이 아닐 것이다. 하지만 시중에 많은 리액트, 타입스크립트 책을 봐온 나로서는 아쉬운 점이 있었다. 크게 두 가지인데 첫 번째는 책이 너무 두꺼웠고, 두 번째는 책이 너무 어려웠다. 대부분 아쉬운 점은 1번 아니면 2번, 아니면 둘 다였다...

오늘은 많은 분들이 사용은 하지만 헷갈리기 쉬운 useCallback과 useMemo에 대해서 이야기를 해볼까 합니다. 실제로 웹 프론트엔드 개발자 면접 질문에서 신입/경력 구분없이 단골로 나오는 인터뷰 주제 중 하나이기도 해요. 먼저 React 공식 문서에는 useCallback과 useMemo가 다음과 같이 설명이 나와 있어요. useCallback : Returns a memoized callback. 메모이제이션된 콜백을 반환한다. useMemo : Returns a memoized value. 메모이제이션된 값을 반환한다. 이 문장만 읽어서는 이해가 쉽지가 않습니다. 조금 더 살펴보도록 하겠습니다. useCallback과 useMemo 둘 다 공통적으로 가지고 있는 속성은 메모이제이션(Memoi..

이번 포스팅에서는 React의 내재된 상태관리 API인 Context에 대한 사용 방법을 알아보려고 한다. 리액트에서 데이터는 일반적으로 props, state로 관리하며 부모 컴포넌트에서 자식 컴포넌트로 흐르게 된다. 이 부분에 대해서는 이번 글에서는 길게 설명하지는 않겠다. 예를 들어 E 컴포넌트에서 state를 만들고 그걸 prop drilling 방식으로 G에 내려 주어서 사용하는 식이다. 그런데 때에 따라서는 정말 많은 컴포넌트에서 데이터를 써야 할 일이 있을 수도 있다. 위의 그림처럼 많은 컴포넌트에서 데이터를 사용해야 한다면, 사실상 전역으로 사용한다고 보아도 무방하다. 이 경우는 Root Component에서 state를 만들고 각각 자식 컴포넌트로 props 를 내려주는 식으로 사용을 해..

Apollo Client란 나는 회사에서 React + GQL 기반의 웹 프로덕트를 많이 만들고 있고, 그 때 데이터를 관리 도구로 Apollo Client를 사용한다. 많은 라이브러리 중에서 Apollo Client를 사용하는 이유는 캐싱이 잘 되어있고, 데이터를 선언적으로 접근하기 때문에 적은 코드로 생산성 높은 개발을 할 수 있다는 장점을 가지고 있다. Apollo Client에서 캐싱은 정규화가 되어 있어서 여러 컴포넌트에서 데이터의 일관성을 유지 시켜준다. Apollo Client의 주요 특징 중 하나는 로컬 인메모리 정규화된 캐시를 사용한다는 것이다. import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new..

회사에서 Next.js 프로젝트를 개발하다가 이슈를 만났다. /pages/some...path/[id]/index.tsx 이런 식으로 컴포넌트를 만들었고 이 페이지 url은 id=123인 경우 https://domain..name/some...path/123 이렇게 된다. 라우터 훅을 사용해서 router.push('/some...path/123') 이렇게 처리를 하면 동적 라우팅(dynamic routing) 처리가 되어 문제 없이 해당 페이지로 페이지가 이동한다. 문제는 이 페이지에서 새로고침(refresh)을 할 경우이다. 분명히 컴포넌트가 있는데 새로고침을 하면 403 에러가 뜨면서 접근을 할 수가 없다고 나오는 것이 아닌가? 분명히 페이지는 처음에 잘 나타났는데, 이후에 새로고침을 하면 페이지가..

최근에 웹 프론트엔드 개발자로 취업을 준비하는 개발자 지망생 분들을 멘토링을 하면서 여러가지 질문들을 받는데, 그 중에서 나도 고민을 하고 답변을 해준 질문들이 있었던 것 같아 그러한 질문들도 조금씩 블로그에서 다루어 보려고 한다. 이번 주제는 리액트에서의 상태관리를 어떤 방식으로 하는 것이 소위 best practice인가에 대한 질문을 받았고 이에 대한 내 생각을 정리해 보려고 한다. 어디까지나 이 글이 정답은 절.대. 아니며 자유로운 의견은 댓글로 남겨주면 감사할 것 같다. 질문 : 리액트에서 상태관리는 어떻게 해야 하나요? 상태관리 라이브러리는 꼭 써야 하나요? 쓰게 된다면 어떤 것을 써야 하나요? 이 이야기를 하려면 먼저 Flux 패턴에 대해서 이야기를 할 수 밖에 없을 것 같다. Flux 패턴..

화 : [Javascript] 비동기, Promise, async, await 확실하게 이해하기 [Javascript] 비동기, Promise, async, await 확실하게 이해하기 – Under The Pencil 개요 본 글은 자바스크립트에서 Promise 에 대한 개념을 잡기 위해 작성한 글입니다. 자바스크립트의 기본 문법을 먼저 알아야 이 글을 조금 더 수월하게 보실 수 있습니다. 필자는 Node.js 기반에서 elvanov.com 수 : Apollo Client는 Redux와 무엇이 다른가 목 : 리액트의 Hooks 완벽 정복하기 리액트의 Hooks 완벽 정복하기 React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고..

이번 포스팅에서는 최근에 페이스북에서 발표한 React 18 알파 버전에 대해서 바뀐 점들을 분석해보고 리액트 팀이 어느 방향으로 리액트를 만들어 나가는지 동향을 분석해 보려고 한다. 2021년 6월 8일 리액트 팀은 리액트 18 버전의 주요 변경 사항들을 발표했다. 리액트 18을 다음 메이저 버전으로 가져갈 것이며 리액트 커뮤니티에서의 다양한 의견들을 수용하여 리액트 18의 주요 기능들로 가져간다고 한다. 그리고 여러 사람들로부터 피드백을 듣기 위해 리액트 18 알파 버전을 발표했다. 리액트 18은 다음과 같은 개선사항들이 포함될 예정이다. 즉시 사용 가능한 개선(out-of-the-box improvement) automatic batching (적은 렌더링을 위함) suspense를 위한 SSR 지..