React

SPA의 등장 배경과 개념 지금까지의 웹사이트는 페이지 이동 시 매번 '페이지 전체'를 불러와야 했고 이는 사용자와 서비스 사이의 상호작용이 증가되어 트랙픽 증가와 사용자 경험의 저하를 야기했다. 하지만, SPA가 등장한 이후로 업데이트가 필요한 부분만 새로 불러오

리액트 등장 배경 웹 애플리케이션의 규모가 커지면 처리해야 할 이벤트, 관리할 상태 값, DOM까 다양해지게 되면서 이에 따른 업데이트규칙이 많이 복잡해졌다. 때문에 Ember, Backbone, AngularJS 등의 프레임워크가 만들어지게 되었고 각각 작동방식은

State 변할 수 있는 값 Props vs State props는 외부로부터 전달받은 값 state는 내부에서 변화하는 값 Props특징 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. 컴포넌트가 최초 렌더링 될 때 화면에

React Event 리액트의 이벤트 처리 방식은 아래 몇 가지 차이를 제외하고는 DOM의 이벤트 처리 방식과 유사하다. React에서 이벤트는 소문자 대신 카멜케이스(camelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수를 전달한다

React 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한 다는 점이다. 컴포넌트를 먼저 만들고 페이지를 조립해 나가는 형식인 상향식(buttom-up)으로 앱을 만드는데 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 컴포넌트는

Batching이란 React가 더 나은 성능을 위해 state 업데이트를 한 번의 리렌더링으로 묶어서 진행하는 것을 의미한다. React 17버전에는 이 전에는 이벤트 핸들러 내부에서만 batching 프로세스가 동작하고 promise의 then 콜백내부, setTi

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 side Effect가 있다고 이야기 한다.React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 side Effect가 발생했다고 말할

목록 내 필터링을 구현하기 위해서는 두 가지의 접근이 있을 수 있다.컴포넌트 내에서 필터링전체 목록 데이터를 불러오고, 목록을 검색어로 fiter하는 방법컴포넌트 외부에서 필터링컴포넌트 외부 API요청을 할 때, 필터링 한 결과를 받아오는 방법 (서버에 매번 검색어와

이전에 요청받았던 버튼을 똑같이 사용하도록 요청이 들어왔을 때 재사용할 수 있는 UI 컴포넌트를 디자인하고 개발하면 더 편리하게 사용할 수 있다.이러한 요청을 편하게 해결하기 위해 등장한 개발 방법이 바로 Component Driven Development (CDD)

컴포넌트 UI 개발을 위한 Storybook Component Driven Development가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했다. Component Explorer에는 많은

React를 공부하면서, React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야한다고 배웠지만, 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생하기도 한다. 이럴 때 사용할 수 있는 것이 바로 useRef 라는 Hook 함수다. 아래와 같이 D

애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다.상태는 변하는 데이터이다. 특별히 UI, 프론트

상태 관리 라이브러리 중 하나로, 컴포넌트와 상태를 분리하는 패턴이다.그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다.그러나 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트로 만들 수

다음과 같은 배열이 있다고 가정했을 때, 이 내용을 컴포넌트로 렌더링하는 방법으로 하드코딩이 있다. 이러한 방법은 배열이 고정적이라면 상관없겟지만, 동적인 배열을 렌더링하지 못한다.동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map() 을 사용한다.

아래 코드를 살펴보면 App 컴포넌트에서 onToggle, onRemove가 구현이 됭있고 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에게 전달되고 있다.지금과 같이 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에 전달하는 작엄은 자주

번들과 번들링이란, 번들이란, 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음을 의미한다. 번들링이란, 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정이다. 즉, 여러 제품이나, 코드

React에는 Virtual DOM이라고 하는 가상의 DOM객체가 있다. 이 가상의 DOM객체는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분만 적용할

React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. 즉 같은 레벨(위치)끼리 비교한다는 뜻으로 이는 너비 우선 탐색(BFS)의 일종이라고 볼 수 있다.예를 들면 이렇게 자식 엘리먼트가

React Hook은 React 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하는 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다.Hook은 함수 컴포넌트에서 사용하는 메소

useMemo는 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다.해당 컴포넌트는 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, <div> 엘리먼트로 출력하고 있다.만약 여기서 calcula

React Hook은 렌더링 최적화를 위한 Hook도 존재하는데, useCallback과 useMemo가 바로 그 역할을 한다.useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 H

개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다. 이를 이용하면

React 앱들은 Webpack, Rollup과 같은 툴을 사용해 번들링을 한다. 이렇게 하면 HTML 웹 페이지에 JavaScript를 추가할 수 있게 되고, 번들된 앱은 모두 JavaScript가 한 곳에 있기 때문에 페이지를 설정하는 데 필요한 호출 수가 적은 링

이번 프로젝트를 진행하면서 또 하나의 도전, react-router 최신 버전 v6.8.2 사용해보기! 팀원 중 한 분이 이전의 프리 프로젝트를 진행하면서 최신 버전의 react-router를 사용해보셨는데 사용 후 긍정적인 반응을 보여주셔서 각자 공부해보기로 했다.라

React-router를 사용하여 다른 페이지로 이동하면, 기본적으로 이전 페이지에서 스크롤 위치를 기억하고 해당 위치 그대로 스크롤이 적용된다.그러나 이전 페이지의 스크롤 위치를 무시하고 페이지 스크롤 위치를 상단으로 초기화하려면 다음과 같은 방법을 사용하여 해결할

eslint-plugin-prettier : ESLint와 Prettier가 충돌할 수 있는 설정들을 비활성화 eeslint-config-prettier : ESLint의 포맷 기능이 아닌 Prettier의 포맷 기능을 사용하게 만들어 줌

React 애플리케이션을 개발 하다보면 DOM을 직접 건드려야하는 상황이 발생한다. 이럴 때 주로 useRef Hook 함수를 사용하여 ref 객체를 만들고 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있게 된다.ref를 사용하다보면 부모 컴

프로젝트를 시작하고 페이지 마크업 과정을 진행하면서임시 이미지를 상대경로로 import 해 사용하는 경우가 많아졌다.실제 코드 이런 코드를 계속 보다보니 지저분 하다는 생각이 들어 찾아보던 중 이미지 파일들을 상대 경로로 가져오는 대신, 프로젝트의 루트 디렉토리 기준인