리액트8 [React] 리액트의 불변성 리액트의 불변성이란 불변성의 사전적 의미는 '변하지 않는 성질'이다. 이를 이해하기 위해서는 참조형과 원시형에 대한 이해가 필요하다. - 원시형 원시형의 데이터 타입은 boolean, string, number, null 등이 있다. 원시형은 직접적으로 메모리에 값이 올라가는걸 말한다. - 참조형 참조형에는 배열과 객체 같은 데이터 타입이 존재한다. 참조형의 경우 직접적으로 메모리 값이 올라가는 것이 아닌 메모리에 참조되는 주소가 입력된다. 결국 불변성이란? 데이터가 메모리상에 올라갔을 때, 메모리상에서 변경이 되는가 안되는가 하는 문제다. 메모리상에서 데이터의 변경이 이루어 지지 않는 성질 : 불변성 React에서는 항상 불변성을 유지해야 하는 이유 그럼 리액트에서는 왜 불변성을 유지해야 할까? 1. .. 카테고리 없음 2023. 10. 31. 더보기 ›› [React] key prop - 리액트에서는 반복되는 엘리먼트를 추가할 때 'key' prop을 왜 필요할까? - 그럼 key는 어떤 값을 넣어야 하는걸까? map함수 등을 사용하여 반복되는 엘리먼트를 추가하였을 때 key prop을 추가하지 않아 다음과 같은 에러가 뜨는 것을 한번씩은 봤을 것이다. 그럼 key prop은 왜 필요한걸까? 리액트 공식문서에는 'key' 가 필요한 이유를 다음과 같이 설명하고 있다. Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get i.. front/React 2023. 5. 14. 더보기 ›› [React] React-Query 사용법 예제코드 리액트 쿼리 리액트 쿼리는 비동기 네트워크 상태관리 라이브러리이다. 리액트 쿼리는 React 컴포넌트에서 데이터를 가져오고 관리하기 위한 간단하고 직관적인 방법을 제공한다. 이를 통해 컴포넌트가 더욱 유연하고 재사용 가능하며, 다양한 데이터 소스에서 데이터를 쉽게 가져올 수 있다. 리액트 쿼리는 대표적으로 useQuery와 useMutation과 같은 React Hooks를 사용하여 작성된다. 이를 통해 데이터 로딩과 변경을 처리할 수 있다. useQuery는 GraphQL, 또는 REST API와 같은 데이터 소스에서 데이터를 가져오는데 사용되며 useMutation은 데이터를 업데이트하거나 삭제하는 데 사용된다. 리액트 쿼리는 캐싱을 사용하여 데이터를 저장하고, 새로운 데이터를 로드하기 전에 캐시에서.. front/React 2023. 4. 27. 더보기 ›› [React] 전역 상태관리 라이브러리 장단점 비교 정리 React로 개발을 진행하다보면 Component의 상태관리를 하게된다. 그런데 해당과정에서 컴포넌트의 Depth가 깊어질수록 반복적인 코드작성이 많아지고 그 횟수가 1000번이라고 생각하면 시간도 어마어마하게 걸릴것이다. 이와 같은 경우 전역적으로 상태를 관리해주는 라이브러리를 사용해서 해결할 수 있으며 종류마다 장단점이 있다. Redux 상태관리를 위해 사용하는 자바스크립트 라이브러리이다. 리액트에서만 사용할 수 있는 라이브러리가 아닌 독립적으로 분류되어있는 라이브러리이기 때문에 리액트 뿐 아닌 Vue나 앵귤러 등에서도 사용이 가능하다. Redux는 가장 많이 사용되는 전역 상태 관리 라이브러리 중 하나이며, 컴포넌트 간의 상태를 트리 구조로 관리하며, 액션(Action)과 리듀서(Reducer)를 .. front/React 2023. 4. 26. 더보기 ›› [React] useEffect란 무엇이고 언제 사용해야 할까? useEffect란? useEffect는 간단하게 설명해서 React Component에서 Side Effect를 수행하는 Hook입니다. Side Effect란 상태 변화 이외에 작업을 말합니다. 예를 들면, API 호출, 이벤트 등록, 타이머 설정 등이 있습니다. useEffect 사용법 useEffect는 컴포넌트가 렌더링 된 이후에 실행되며, 컴포넌트가 Unmount 될 때 정리(claen-up)작업을 수행합니다. useEffect는 기본적으로 렌더링 이후에 매번 실행되며, 두 번째 인자로 의존성 배열(Defendency Array)을 전달하여 해당 의존성이 변경될 때만 실행되도록 설정할 수 있습니다. import React, { useEffect, useState } from 'react'; f.. front/React 2023. 4. 17. 더보기 ›› 반응형 이전 1 2 다음
