2021/10

React TypeScript 적용하기 React에 TypeScript를 적용하는 방법에 대해 알아보겠습니다. 1. TypeScript 설치 리액트를 타입스크립트와 함께 설치하는 경우엔 아래 명령어를 실행해줍니다. $ npx create-react-app my-app --template typescript 기존에 생성한 리액트 프로젝트에 타입스크립트를 설치하는 경우엔 아래 명령어를 실행해줍니다. @types가 붙은 패키지는 타입스크립트를 지원하는 라이브러리입니다. $ yarn add typescript @types/node @types/react @types/react-dom @types/jest yarn add v1.19.1 warning package-lock.json found. Your proje..
React Redux 알아보기 React에서 많이 사용하는 상태 관리 라이브러리인 Redux에 대해 정리한 내용입니다. 1. Redux Redux는 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리입니다. 여러 개의 컴포넌트에서 같은 상태를 공유할 때도 손쉽게 상태를 변경하고 관리할 수 있습니다. 프로젝트의 규모가 커지면 서로 다른 컴포넌트를 오가며 props와 state를 관리하는 것이 복잡해지기 때문에 외부에 store를 두고 관리하는 방식입니다. 전역 상태만 관리하고자 한다면 Context API를 사용하는 것으로 충분하지만, 프로젝트 규모가 큰 경우엔 리덕스를 사용하여 효율성과 유지 보수성을 높여주는 것이 좋습니다. 또한 리덕스는 리액트에 종속되는 라이브러리가 아니기 때문에 Angula..
React Immer로 불변성 유지하기 React에서 Immer를 사용하여 배열 또는 객체의 불변성을 유지하는 방법에 대해 알아보겠습니다. 1. 불변성 React의 컴포넌트에서 상태의 불변성을 유지하는 것은 매우 중요합니다. 불변성은 기존 값을 직접 수정하지 않으면서 새로운 값을 만들어내는 것을 의미합니다. 따라서 배열이나 객체의 값을 변경할 때는 새로운 배열이나 객체를 만들어 필요한 부분을 변경해주어야 합니다. 불변성이 유지되지 않으면 값이 변경되어도 감지하지 못하게 되고 렌더링 성능을 최적화하지 못하는 문제가 발생합니다. 주로 전개 연산자를 사용하여 배열이나 객체의 값을 복사합니다. const arr = [1, 2, 3, 4, 5]; const nextArr1 = arr; // 같은 배열을 가리키도록..
React Hooks 알아보기 React Hooks에 대해 알아보고 정리한 내용입니다. 1. Hooks React Hooks는 리액트 16.8 버전부터 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 기능을 제공합니다. useState, useEffect 등의 기능을 제공하여 클래스형 컴포넌트를 작성할 필요없이 다양한 작업을 가능하게 해줍니다. 1.1. useState useState는 함수형 컴포넌트에서 상태 관리를 위해 사용하며 가변적인 상태를 가질 수 있도록 해줍니다. 사용을 위해서는 상단에 import 해주고 다음과 같이 작성해줍니다. import React, { useState } from 'react'; ... const [value, setValue] = useState(..
React props와 state 알아보기 React에서 props와 state는 데이터를 다루는 개념입니다. 둘 다 JavaScript 객체이고 렌더링에 영향을 줍니다. props는 단방향 데이터 흐름의 리액트에서 상위에서 하위로의 데이터 전달을 위해 사용하고, state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미합니다. 좀 더 간단하게 설명하면 props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 정도로 볼 수 있습니다. 1. props props(properties)는 컴포넌트에 값을 전달할 때 사용합니다. 다음과 같이 App.js, Component.js를 만들고 실행해보면 Component.js에 전달된 props를 확인할 수 있습니다. import React fr..
React JSX 알아보기 React JSX에 대해 정리한 내용입니다. 1. JSX JSX(JavaScript Syntax Extension)는 React에서 사용하는 JavaScript 확장 문법입니다. XML과 비슷하게 생겼으며 작성한 코드는 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태로 변환됩니다. JSX는 HTML 코드를 작성하는 것과 비슷하기 때문에 가독성이 높습니다. 또한 HTML 태그도 사용이 가능하고 내부에 컴포넌트도 작성이 가능하여 활용도가 높습니다. JSX의 기본적인 문법에 대해 알아보겠습니다. 1.1. 태그 감싸주기 다음과 같이 코드를 작성하고 실행하면 에러가 발생합니다. import React from 'react'; function App() { return ( Hell..
React 프로젝트 생성하기 React 프로젝트을 생성하고 실행하는 방법에 대해 정리한 내용입니다. 1. React React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React는 UI를 구축을 위해 Facebook에서 만든 효율적이고 유연한 JavaScript 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다. Component 단위의 코드 조각들을 이용한 UI 구성 함수형, 클래스형 component 단방향(uni-directional) 데이터 바인딩 및 props를 이용한 속성 전달 JSX (Javascript + HTML) Virtu..
freestrokes
'2021/10 글 목록