Programming/React33 [React/Redux] 리액트 리덕스 사용해보기 지난번에 리덕스에 대해 소개를 했으니 이번에는 리덕스를 간단하게 사용해볼 차례입니다. 일반 리액트앱에 리덕스를 이용하면 상태 관리 로직을 따로 만들고 관리가 가능해져, 프로젝트의 유지보수가 쉬워지고 다양한 편의 기능을 제공합니다. 리덕스, 리액트 리덕스를 설치해주세요. yarn add redux yarn add react-redux 1. 카운터/Todo 프로그램 우선 다음과 같은 카운터/Todo 기능이 있는 리액트 앱을 만들어줍니다. import React from 'react'; const ReduxCounter = ({number, onIncrease, onDecrease}) => { return ( {number} +1 -1 ); }; export default ReduxCounter; import.. 2022. 1. 5. [Redux] 리덕스 1. 리덕스란? Redux 리덕스란 자바스크립트 상태 관리 라이브러리입니다. 상태 관리 라이브러리도 무수히 많지만 그 중에서 가장 많은 다운로드 수를 기록하고 있습니다. 앞에 소개에서 자바스크립트의 상태 관리 라이브러리라고 하는 만큼 리액트뿐만 아니라 바닐라부터 앵귤러, Vue 등 다양한 자바스크립트 라이브러리, 프레임워크에서 사용을 할 수 있는 것이 리덕스입니다. 리덕스를 통해 리액트는 전역 상태 관리를 편리하게 할 수 있습니다. 뿐만 아니라 리덕스는 다양한 도구들과 미들웨어 덕분에 리액트에서 중요한 상태관리를 편하게 만들어주는 도구이기도 합니다. 2. 리덕스의 기본 개념 리덕스에서 사용되는 몇 가지 기본적인 개념들을 짚고 넘어가겠습니다. 2-1. 액션 action 액션은 상태에 변화가 필요해지면 발생.. 2022. 1. 4. [React] useState의 비동기적 동작 1. setState의 비동기적 동작 함수형 컴포넌트로 간단한 카운터를 만들었습니다. import React, {useState} from 'react'; const Counter2 = () => { const [count, setCount] = useState(0); const onClick = () => { setCount(count+1); console.log('click'); setCount(count+1); console.log('click'); } return ( {count} + ); } export default Counter2; 실행해보기전에 동작을 예측해보자면, state의 count가 두 번 증가해서 결과적으로 버튼을 누르면 카운트가 2씩 증가할 것 같습니다. 그럼 실행해볼까요? 우선.. 2021. 12. 27. react-icons 이번에 소개하는 것은 기술은 아니고 깔끔한 아이콘 디자인을 제공하는 라이브러리를 하나 소개해드리려고합니다. 1. react-icons https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons... 2021. 12. 16. [React] 리액트 라우터 이번에는 리액트 라우터 라이브러리를 통해서 SPA가 적용되는 것을 간단하게 알아보려고 합니다. SPA에 대해서는 아래 링크 설명을 참조해주세요. 2021.12.09 - [Programming/CS] - SPA, Single Page Application SPA, Single Page Application 1. SPA SPA, Single Page Application은 하나의 페이지로 이루어진 웹 어플리케이션 또는 웹 페이지를 말하는 용어입니다. 그동안은 html을 배워오고 간단한 웹 사이트를 하나 만들면서 보통 여러개의 페이 bamtory29.tistory.com 1. 리액트 라우터 라이브러리 설치 SPA를 구현하기 위해서는 라우터를 이용해야하는데, 리액트에서는 공식적으로 라우터를 지원하고 있지 않습니.. 2021. 12. 11. [React] 컴포넌트 반복하기 우선 반복을 하기전에 자바스크립트의 Array.map()함수에 대해 알고 넘어가야합니다. map()함수는 배열의 요소들을 인자로 가진 함수로 가공해서 배열의 형태로 반환하는 함수입니다. 이 함수를 꼭 기억해주세요. const animals = ['야옹', '멍', '짹', '삐약']; const repeat = animals.map(animal => animal.repeat(2)); console.log(repeat); 1. 배열을 컴포넌트 배열로 만들기 우선 간단하게 배열을 이용해서 컴포넌트 배열로 만들어서 반환하는 방법을 소개해드리겠습니다. 컴포넌트를 하나 만들어줍니다. 이때 map()함수는 animals배열의 요소들을 JSX형태로 변환해주는 역할을 합니다. import React from 'reac.. 2021. 12. 7. 이전 1 2 3 4 5 6 다음 300x250
