리액트34 [Redux] 리덕스 1. 리덕스란? Redux 리덕스란 자바스크립트 상태 관리 라이브러리입니다. 상태 관리 라이브러리도 무수히 많지만 그 중에서 가장 많은 다운로드 수를 기록하고 있습니다. 앞에 소개에서 자바스크립트의 상태 관리 라이브러리라고 하는 만큼 리액트뿐만 아니라 바닐라부터 앵귤러, Vue 등 다양한 자바스크립트 라이브러리, 프레임워크에서 사용을 할 수 있는 것이 리덕스입니다. 리덕스를 통해 리액트는 전역 상태 관리를 편리하게 할 수 있습니다. 뿐만 아니라 리덕스는 다양한 도구들과 미들웨어 덕분에 리액트에서 중요한 상태관리를 편하게 만들어주는 도구이기도 합니다. 2. 리덕스의 기본 개념 리덕스에서 사용되는 몇 가지 기본적인 개념들을 짚고 넘어가겠습니다. 2-1. 액션 action 액션은 상태에 변화가 필요해지면 발생.. 2022. 1. 4. [클론 코딩] 리액트 라우터 적용 지난번에 카테고리까지 구현하면서 뉴스 뷰어 앱을 완성했습니다. 이번에는 카테고리마다 리액트 라우터로 SPA한 페이지를 만들어보겠습니다. 2021.12.11 - [Programming/React] - [React] 리액트 라우터 [React] 리액트 라우터 이번에는 리액트 라우터 라이브러리를 통해서 SPA가 적용되는 것을 간단하게 알아보려고 합니다. SPA에 대해서는 아래 링크 설명을 참조해주세요. 2021.12.09 - [Programming/CS] - SPA, Single Page Application.. bamtory29.tistory.com 2021.12.09 - [Programming/CS] - SPA, Single Page Application SPA, Single Page Application.. 2022. 1. 3. [클론 코딩] 뉴스 api 연동 지난번에 전체적인 UI를 구상했습니다. 이제는 newsapi를 연동해서 본격적으로 완성시켜볼 차례입니다. 1. api 연동 컴포넌트가 렌더링 될 때마다 작업을 수행하는 useEffect를 통해 api를 연동할 예정입니다. 주의할 점은 이전에 api 연동을 위해 async로 useEffect에 콜백 함수를 등록할 때 여기에는 async를 붙이면 안된다는 점 입니다. 그 이유는 useEffect를 실행했을 때 뒷정리 함수를 반환하기 때문입니다. 그래서 지금처럼 useEffect에 비동기 처리가 필요하다면 내부에 함수를 하나 더 만들어서 async 키워드를 붙여서 이용해야 합니다. 2021.11.16 - [Programming/React] - [React] Hooks - useEffect [React] Hoo.. 2022. 1. 2. [클론 코딩] 뉴스 API와 UI 설계 이번 포스트에서는 우리가 활용할 뉴스 API를 준비하고 그에 대한 ui 설계를 다루겠습니다. 1. API 키 발급 아래 사이트에서 가입을 하고 API키를 발급 받겠습니다. https://newsapi.org/ News API – Search News and Blog Articles on the Web News API is a simple, easy-to-use REST API that returns JSON search results for current and historic news articles published by over 80,000 worldwide sources. Worldwide Scale Search through hundreds of millions of articles in 14 .. 2021. 12. 30. [클론 코딩] 뉴스 뷰어 만들기 이번에 가져온 클론 코딩은 뉴스 뷰어입니다. 이 프로젝트는 VELOPERT 님의 '리액트를 다루는 기술 개정판' 14장의 내용을 클론 코딩하였습니다. TODO-LIST의 리액트 기초 기술들을 다시 되돌아보고, 외부 API 연동까지 한 번에 챙겨가는 프로젝트가 되었으면 좋겠습니다. 1. 비동기 처리 외부에서 데이터를 받아서 우리 홈페이지에 보여줄 것이기 때문에 비동기처리가 필수적입니다. 그렇지 않으면 정보가 로딩되는 동안 기다려야하죠. 비동기와 그에 대한 자바스크립트 구문 설명은 아래 링크들을 참조해주세요. 2021.05.24 - [Programming/Javascript] - [Javascript] 프로미스(promise) 객체 2021.05.24 - [Programming/Javascript] - [J.. 2021. 12. 29. [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. 이전 1 2 3 4 5 6 다음 300x250
