본문 바로가기

React

(14)

[ React / Redux ] Redux 상태 관리 개념정리. 기존에 내가 React 프로젝트에 즐겨 사용하던 상태 관리 라이브러리는 recoil 이었다. 하지만 새로운 회사에서는 Mobx와 Redux를 사용하고 있었다. 그래서 Redux 공부를 위해 공식 홈페이지를 보며 개념 정리를 해보려고 한다. Redux 기본 개념 Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 한다. 일관적으로 동작하고 서로 다른 환경 (서버, 클라이언트, 네이티브)에서 작동하고, 테스트 하기 쉬운 앱을 만들도록 도와주며 Redux는 React뿐만아니라 다른 UI 라이브러리와 함께 사용할 수 있으며, 매우 작은 용랑(의존 라이브러리 포함 2KB)으로 여러 기능들을 편리하게 사용할 수 있다. Redux는 자바스크립트 SPA에서 갖추어야 할 요건들이 점점 복잡해짐에 따라 많은..

[ NEXT.JS ] Next.js에 대해 알아보기. NEXT.JS는 무엇일까? Next.js 는 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 프레임 워크로, React에 필요한 도구 및 구성을 처리하고 애플리케이션에 대한 추가 구조, 기능 및 최적화를 제공한다. Next.js는 SSR(Server-Side-Rendering), 정적 웹 페이지 생성 등 React 기반 웹 애플리케이션 기능들을 가능하게 하는 Node.js 위에서 빌드된 오픈 소스 웹 프레임워크이다. React를 사용하여 UI를 구축한 다음, Next.js 기능을 점진적으로 채택하여 라우팅, 데이터 가져오기, 통합과 같은 일반적인 애플리케이션 요구 사항을 해결하는 동시에 개발자 및 최종 사용자 경험을 개선할 수 있다. React의 공식 페이지에서는 아래와 같이 소개한다..

[ React / Recoil ] React의 상태관리 라이브러리 Recoil의 effects 사용하기. 나는 보통 react 프로젝트를 하게 되면 간단한 상태 관리들은 대부분 recoil을 통해 하는데 이번에 recoil의 부가적인 기능들에 대해 더 서치를 하다가 Atom Effects에 대해 알아보게 되었다. Recoil 공식 페이지의 Atom Effects 설명은 아래 링크를 통해 참고하면 된다. atom effects - recoil recoil 공식 페이지에서 소개하는 atom effects는 부수효과들을 관리하고 Recoil의 atom을 초기화하거나 동기화하기 위해 사용하는 API라고 설명한다. Atom Effects - 상태 지속성 - 상태 동기화 - 히스토리 관리 - 로깅 등에 유용하고 React Effects와도 유사하지만 Atom Effects는 atom을 정의할 때 atom 정의의 일부로..

[ React / Select ] Select의 defaultValue 를 state를 이용하여 동적 변경 시키기. ❗️ 이슈 발생 React 프로젝트를 작업 중에 데이터 리스트를 state로 관리해서 필터링 옵션을 선택할 때마다 데이터 리스트를 동적 필터링 구조로 작업 중에 일반 텍스트 데이터들은 동적 필터링 기능이 잘 적용되는데, Select의 defaultValue는 이전 데이터 값을 갖고 동적 필터링이 적용되지 않는 이슈가 발생하였다. 예시 코드 import React, {useState, useEffect} from 'react'; // UI Library는 Antdesign을 사용. import { Select } from 'antd'; const { Option } = Select; const data = [ {name: "Lee", isStudent: false}, {name: "Kim", isStude..

[ React / antd ] react ant-design theme 변경 ( custom theme ) React에서 antd를 사용중에, custom theme를 사용하는 방법에 대해 알아보았다. antd의 공식 페이지(https://ant.design/docs/react/customize-theme)에서 customize에 대해 친절하게 설명을 써 주었지만, 난 왜이렇게 읽기가 어려운건지..ㅠㅠㅠㅠ... * LinkedIn 글을 참고하여 작성. 1. Create React App 을 통해 리액트 프로젝트 생성. npx create-react-app 2. antd 패키지 설치 // 1) npm install antd 명령어를 사용하여 전체 패키지 설치 npm install antd // 2) npm install less -g 명령을 사용하여 less 전역 설치. npm install -g less 3...

[ React / Architecture ] React 프로젝트 구조를 어떻게 짜야할까? ** React 공식 페이지 파일 구조를 참고하여 공부 목적으로 정리한 포스팅입니다. ** 1. 기능 또는 라우트 단위로 분류 일반적인 방법으로, 라우트(프로젝트의 경로) 폴더에 해당 라우트와 관련된 CSS, JS 등을 같이 두는 방법이 있다. 서비스의 주요 기능을 추리고, 그 기능들을 얼마나 세분화할지 고민 후 분류하는 방법도 있다. 내가 주로 사용하는 방법도 이런 분류 방법인데, 서비스에서 가장 중요한 핵심 기능 or 서비스를 구분하여 그 안에 파일들을 분류하는 방법이 나에게는 가장 익숙한 방법인 것 같다. common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js FeedSt..

이전 1 2 다음

티스토리툴바