React

페이지 단위로 프론트엔드 개발하는 방법에 대해 배웠다면, 이제는 컴포넌트라는 단위로 나누어 생각하고 개발프론트엔드 개발을 위한 JavaScript 라이브러리선언형한 페이지를 보여주기 위해 HTML, CSS, JS로 나눠서 작성하는 것이 아닌 하나의 파일에 명시적으로 작

React SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.React로 개발을 시작하려면 JSX를 JS로 변환시켜주는 BABEL, CSS transpiler인 PostCSS, 다양한 패키지를 묶어주는 모듈 번들러인 Webpack까지 다양한 툴들이 사용 된다

SPA(Single Page Application)란? > - 웹페이지에서 페이지를 로딩할 때 서버에 미리 준비되어 있는 페이지를 전달 받아 렌더링을 했지만 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라 속도 저하 등의 문제가 발생하게 되었고 React

컴포넌트의 속성(Property)을 의미한다.props는 외부로부터 전달받은 변하지 않는 값으로 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.상위(부모) 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름)React 컴포넌트는 Java

Event handling이란? >- 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것(버튼 클릭, 키보드 입력, 제출 등)을 이벤트라고 한다. React의 이벤트 처리(Event handling) 방식은 DOM의 이벤트 처리 방식과 매우 유사하지만 몇 가지

useEffect란? React에서 기본적으로 제공하는 함수로 컴포넌트가 렌더링 될때마다 특정 작업(Side effect)을 실행할 수 있도록 해주는 Hook이다. useEffect는 컴포넌트가 Mount, 화면에 처음 렌더링 되었을 때 Update, 업데이트 될 때

React에서 Key란? Warning: Each child in a list should have a unique "key" prop. React에서 map 함수를 적용할 때 이러한 경고문을 본적이 있을 것이다. 이는 각 항목에 고유한 key가 있어야 한다는 뜻으로

React로 웹 애플리케이션 개발 시 DOM을 직접 조작(접근)하는 것은 지양해야한다. 하지만 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생하기도 한다. 이럴 때 사용하는 것이 바로 useRef라는 React Hook이다. useRef는 render 메서드에서

useCallback이란? useCallback 또한 컴포넌트의 성능을 최적하기 위해 메모이제이션 기법을 이용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면 useCallback은 함수의 재사용을 위해 사용하는 Hook이다. Calcula

useMemo useMemo는 컴포넌트의 성능을 최적화하기 위한 React Hooks 중 하나이며 특정 값을 재사용하기위한 Hook이다. React에서 화면의 일부분이 업데이트 되더라도 전체 컴포넌트를 re-rendering 하기 때문에 불필요한 re-renering

Virtual DOM React는 UI의 상태를 추적하고 변화가 일어난 요소들을 빠르게 업데이트할 수 있도록 가상의 DOM 객체를 활용한다. Virtual DOM은 DOM 객체에 직접 조작하는 것이 아닌 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐

React Lifecycle이란? React는 컴포넌트 단위로 개발하는 라이브러리이기 때문에 각각의 컴포넌트들은 생명주기(Lifecycle)을 가지고 있다. 1. Mounting - 컴포넌트가 생성되어 브라우저상에 나타날 때

styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.

번들링(Bundling)이란? 번들링이란 사용자가 더 쉽고 빠르게 웹 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하고 소스 코드를 난독화하는 등의 과정을 거쳐 사용자에게 전달하는 것을 의미한다. 여러 코드와 파일, 프로그램을 묶어 패키지로 제공하며

Redux란? Redux란 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리이다. React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 그럼 웹 애플리

React Query란? React Query는 React 애플리케이션에서 데이터 페칭 간소화, 캐싱, 서버 데이터 동기화 및 업데이트, 로딩 및 오류 상태를 관리를 도와주는 라이브러리이다. 다른 복잡한 데이터 페칭 방식의 단점을 보완하고 컴포넌트 내부에서 간단하고

react-hook-form이란? React 애플리케이션에서 form 관리를 간편하게 해주는 라이브러리이다. 제어 컴포넌트를 통해 form을 관리하면 input에 필요한 state를 하나하나 만들어야 하고 이를 다루기 위한 이벤트 핸들러, 에러 처리를 위한 state