Development/React

Using React Query install react-query먼저 react-query를 설치하기 위해서 아래 명령어를 터미널에 입력해야 합니다.npm install @tanstack/react-query Create queryClient & QueryClientProvider QueryClient 생성자로 쿼리와 캐시를 관리하는 Query Client를 생성하고  컴포넌트를 통해 생성한 Query Client를 하위 컴포넌트들이 접근할 수 있도록 최상위 컴포넌트로 감싸주어야 합니다.모든 하위 컴포넌트들은 Query Client가 갖고 있는 캐시와 모든 기본 옵션을 사용할 수 있게 됩니다.참고로 은 React의 Context API를 사용하여 생성된 queryClient를 제공합니다.import {..

Client State vs Server State Client State란 클라이언트가 자체적으로 생성한 상태로 사용자의 input 값이나 UI 변경을 담당하는 부분으로 볼 수 있습니다. 예를 들어, 모달창을 열고 닫는 상태나 사용자가 입력한 값 같은 것들을 의미합니다.즉, 서버에서 일어나는 일과는 아무 관련이 없는 상태들을 의미합니다. 반면 Server State란 클라이언트에 표시하는 데 필요한 서버 데이터를 의미합니다. 예를 들어, DB에 존재하는 데이터들을 의미합니다. React Query는 React 애플리케이션에서 서버 응답에 대한 상태인 fetch, caching, update와 같은 동작을 쉽게 다룰 수 있도록 하며, Client State와 Server State를 명확하게 분리하여 관..

고차 컴포넌트란? Higher-order Component (HOC) 즉 컴포넌트 내에서 자주 반복되는 코드를 재사용하기 위한 React 기술 const EnhancedComponent = higherOrderComponent(WrappedComponent); 기존 컴포넌트가 props를 받아 UI를 만들었다면, HOC는 컴포넌트를 다른 컴포넌트로 바꿉니다. HOC는 Redux’s connect, Realy’s createFragmentContainer에서 흔히 사용하고 있습니다. 리액트에서 컴포넌트는 코드 재사용을 위한 매우 중요한 유닛입니다. 반복되는 코드 발견하기 import React, { Component } from 'react'; import axios from 'axios'; class P..

(3) useReducer useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook 입니다. 리듀서는 현재 상태(state), 그리고 업데이트를 위해 필요한 정보를 담은 액션 값(action)을 전달받아 새로운 상태를 반환하는 함수(state)입니다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다. 기본적으로 useReducer() hook 함수는 다음과 같은 형태로 사용합니다. Redux 패턴 const [, ] = useReducer(, , ) 먼저 useReducer를 사용하여 기존의 Counter 컴포넌트를 구현해보겠습니다. import React, { useReducer } fro..

Hooks는 리액트 16.8에서 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존 함수형 컴포넌트에서 할수 없었던 다양한 작업을 할수 있게 해줍니다. (1) useState useState는 가장 기본적인 Hooks이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. // info.js import React, { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 ..

앞서 소개한 라이프사이클 메서드를 자세히 살펴보려고 합니다. 1. render() 함수 이 메서드는 컴포넌트 모양새를 정의합니다. 그렇기 때문에 컴포넌트에서 가장 중요한 메서드라고 할수 있습니다. 라이프사이클 메서드 중 유일한 필수 메서드이기도 합니다. 2. constructor 메서드 constructor(props) { ... } 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행됩니다. 이 메서드는 초기 state를 정할 수 있습니다. 3. getDerivedStateFromProps 메서드 props로 받아 온 값을 state에 동기화시키는 용도로 사용합니다. 컴포넌트가 마운트 될때, 업데이트 될때 호출됩니다. static getDerivedStateFromProps(nextProps, ..

모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링 되기 전의 준비과정에서 시작하여 페이지에서 사라질 때 끝납니다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있습니다. 이때는 컴포넌트의 라이프사이클 메서드를 사용합니다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 함수형 컴포넌트에서는 사용할 수 없지만, 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할수 있습니다. 라이프 사이클 메서드의 종류는 총 아홉 가지 입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 ..

웹 어플리케이션을 만들때 반복되는 코드를 작성할 때가 있습니다. import React from 'react'; const ArrayText = () => { const dataArray = ['hi', 'hello', 'hello world!']; return ( {dataArray[0]} {dataArray[1]} {dataArray[2]} ); }; export default ArrayText; 위의 코드에서 ... 코드가 반복되는것을 확인할수 있습니다. 보여주어야 할 데이터가 적을경우에는 상관 없지만, 보여주어야 할 데이터가 유동적이라면 위와 같은 코드로는 관리할수 없습니다. 리액트에서는 반복되는 컴포넌트를 다루기 위해 자바스크립트 배열의 map() 함수를 사용합니다. map 함수의 파라미터는 다..

Ref 란 무엇인가요? HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법입니다. Ref는 어떤 상황에서 사용해야 되나요? "DOM을 꼭 직접적으로 건드려야 할 때" 사용합니다. 그렇기 때문에 자주 사용하는 속성은 아닙니다. 대부분 state를 통해 해결할수 있습니다. 그렇기 때문에 반드시 DOM을 꼭 사용해야 하는 상황외에는 잘 사용하지 않습니다. 반드시 사용해야 하는 상황이 어떤 상황인가요? 1. 특정 input에 포커스 주는 경우 2. 스크롤 박스를 조작하는 경우 3. Canvas 요소에 그림을 그리는 경우 위의 세가지 경우에는 직접적으로 DOM을 건드려야하기 때문에 Ref를 사용해야 합니다. Ref 사용 방법? ref를 사용하는 방법은 두가..

이벤트란? 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다. 4.1 이벤트를 사용할때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. 3. DOM 요소에만 이벤트를 설정할 수 있습니다. 4.2 예제로 이벤트 핸들링 익히기 4.2.1 컴포넌트 생성 import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 ); } } export default EventPractice; [EventPractice. js] import React..

ESLint 란? ES (ECMAScript) + Lint (에러 코드 표식) ESLint는 문법 검사 도구입니다. ESLint는 코드를 작성할 때 실수를 하면 에러 혹은 경고 메세지를 VS Code 에디터에서 바로 확인할 수 있게 해줍니다. Prettier 코드 스타일 자동 정리 도구 입니다. Prettier 을 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론이(;) 빠진경우 추가되고 기존 사용하던 작은 따옴표는 모두 큰따옴표로 변경되있을 것입니다. Prettier의 장점은 이러한 자동정리 스타일을 쉽게 커스터마이징 할수 있다는 것입니다. 아래의 .prettierrc라는 파일에서 스타일을 설정할수 있습니다. { "singleQuote" : true, "semi" : true, "use..

JSX 란? 자바스크립트의 확장 문법 JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. JSX 코드 변환 전 function App() { return ( Hello react ); } 위와 같이 작성된 코드는 아래와 같이 변환됩니다. function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } 아래와 같은 createElement 같은 코드를 매번 작성하기 불편하기 때문에 React에서는 JSX를 사용하..