React

리액트는 UI성능을 향상시키기 위해 React.memo()라는 고차 함수를 제공합니다. 이 함수는 렌더링 결과를 메모이징하므로 불필요한 리렌더링을 줄일 수 있습니다.리액트에서는 props를 통해 하위 컴포넌트에 데이터를 전달합니다. 컴포넌트들은 해당 값들이 변경될 때

리액트는 프론트엔드 진영에서 가장 많이 사용되는 라이브러리입니다. 페이스북에서 만들어진 리액트는 국내/외 유수의 기업들에서 view를 담당하는 라이브러리로서 사용되고 있습니다. 리액트가 이렇게 널리 사용되는 이유가 무엇일까요? 왜 여러 기업들이 리액트를 프론트엔드 기술

HOC(Higher Order Component)패턴은 리액트에서 같은 컴포넌트 로직을 사용하기 위해 사용되는 기술입니다. 리액트를 다루면 정말 자주 보이는 패턴이죠. 이번시간에는 HOC가 어떤식으로 동작하는지 예시를 통해 알아보겠습니다. 여기 두 개의 컴포넌트가 있

Bundling 대부분의 리액트 어플리케이션은 webpack등의 도구를 이용해 번들링을 진행합니다. 번들링이란 어플리케이션 파일 사이의 의존성을 추적하고 합치며 하나의 "번들"이라고 불리는 파일로 만드는 과정을 말합니다. 번들은 웹페이지에 포함되어 전체 어플리케이션을

과거에는, 컴포넌트 내부에서 발생한 자바스크립트 에러가 리액트의 internal 상태를 오염시키고 다음 렌더링에서 암호화된 에러를 방출 (emit cryptic error)했습니다. 이런 에러는 언제나 application code이전 단계의 문제로 발생했지만, 리액트

React 16.8부터 도입된 hooks는 state를 비롯한 여러 리액트의 특징을 class없이 사용할 수 있도록 도와줍니다. 이번 시간에는 리액트팀이 왜 hools를 도입했고 어떤 도움을 주는지 살펴보겠습니다.hooks를 시작하기 전, 먼저 살펴볼 특징을 알아보겠습

Hooks는 하위 호환성을 갖고 있습니다. 이번 포스팅에선 우리가 배워볼 hooks의 전반적인 개요를 살펴보겠습니다. 다음 포스팅부터 각각에 대해 자세히 알아볼 것입니다. State Hook 아래 예시는 counter를 렌더링합니다. 버튼을 클릭하면 값을 올려주죠.

먼저 자바스크립트로 리스트를 다루는 방법을 살펴봅시다.map함수에 익숙하신 분들은 위의 doubled가 2, 4, 6, 8, 10인 것을 알 수 있습니다.리액트에서 리스트를 다룰때도 위와 비슷한 방식을 사용합니다.리액트에선 curly brace({})를 사용하여 JSX

Hooks는 Class없이 상태를 관리할 수 있도록 도와준다.Effect hooks는 함수형 컴포넌트 내부에서 side effect를 실행하도록 도와줍니다.대표적인 "side effect"의 예시로 Data fetching, setting up a subscripti

Hooks는 자바스크립트 함수지만 두 가지 규칙을 지키며 사용해야 합니다. 이런 규칙은 linter plugin을 통해 자동으로 적용할 수 있습니다. Only Call Hooks at the Top Level Hooks를 루프 내부, 조건(condition), 또는 중

리액트 성능 최적화와 관련된 내용을 살펴볼때마다 useMemo()와 달리 제대로 이해되지 않는 부분이 많았습니다. 이와 관련하여 알게된 내용을 정리합니다.일반적으로 useMemo()와 useCallback()은 다음과 같은 방식으로 이해됩니다.useMemo() - 복잡

가상돔은 렌더링 성능을 올릴 수 있는 대표적인 방법 중 하나입니다. 브라우저 렌더링에 대한 이해가 없는 경우 브라우저 렌더링 과정을 먼저 참고해주세요.브라우저는 크게 스타일 -> 레이아웃 -> 페인트 -> 합성 과정을 통해 렌더링을 진행합니다.이 렌더링은 DOM이 변경

본 포스팅은 SOLID Principles in React를 보고 개인적으로 해석(발 번역)한 내용입니다.좋은 코드는 일반적으로 3가지의 특징이 잘 결합된 코드를 말합니다.Functional: The code comes together to create the desi