JavaScript/React45 React) 리덕스 라이브러리 이해하기 - 리액트 없이 쓰는 리덕스 (리듀서, 스토어, render, 구독하기, 액션 발생시키기) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스 라이브러리 이해하기 리액트 없이 쓰는 리덕스 리덕스는 리액트에 종속되는 라이브러리가 아닙니다. 리액트에서 사용하려고 만들어졌지만, 실제로 다른 UI 라이브러리/프레임워크에서도 사용 가능합니다. 우선 리액트가 아닌 바닐라 자바스크립트와 함께 사용해보겠습니다. Parcel로 프로젝트 만들기 parcel-bundler 설치 $ yarn global add parcel-bundler # yarn global이 잘 설치되지 않는다면 npm install -g parcel-bundler로! 프로젝트 디렉터리 생성 후 package.json 파일 생성 $ mkdir vanilla-redux.. 2022. 11. 29. React) 리덕스 라이브러리 이해하기 - 개념 정리 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리덕스 라이브러리 이해하기 Redux - 가장 많이 사용하는 리액트 상태 관리 라이브러리 - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리할 수 있음 - 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 쉽게 상태 값 전달 및 업데이트 가능 - 전역 상태를 관리할 때 효과적 위의 그림을 기억하고 개념을 정리해보도록 하겠습니다. ※ 개념 정리에 도움 되는 영상 https://www.youtube.com/watch?v=Jr9i3Lgb5Qc&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=1 개념 미리 정.. 2022. 11. 29. React) Context API - useContext, static contextType 사용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Context API Consumer 대신 Hook 또는 static contextType 사용하기 useContext Hook 사용하기 ColorBox.js import { useContext } from "react"; import ColorContext from "../contexts/color"; const ColorBox = () => { const { state } = useContext(ColorContext); return ( ) } export default ColorBox; useContext Hook을 이용하여 더욱 간편하게 Context를 가져와 사용한 것을 확인.. 2022. 11. 28. React) Context API - 사용 이유, createContext, Consumer, Provider, 동적 Context 사용하기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Context API - 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 - 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현 Context API를 사용한 전역 상태 관리 흐름 이해하기 리액트 애플리케이션은 컴포넌트 간의 데이터를 props로 전달하기 때문에 여러 컴포넌트에서 사용해야 하는 데이터들은 최상위 컴포넌트인 App에서 상태로 관리합니다. props만을 이용한다면, 규모가 큰 리액트 애플리케이션을 구현할 때 유지 보수성이 낮아지기도 합니다. 위와 같은 구조가 있을 때 Root에 있는 state.. 2022. 11. 28. React) 외부 API를 연동하여 뉴스 뷰어 만들기 ③ - 리액트 라우터 적용하기, usePromise 커스텀 Hook 만들기 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 외부 API를 연동하여 뉴스 뷰어 만들기 리액트 라우터 적용하기 URL 파라미터를 사용하여 카테고리 값들을 관리해보겠습니다. 리액트 라우터의 설치 및 적용 $ yarn add react-router-dom index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-route.. 2022. 11. 28. React) 외부 API를 연동하여 뉴스 뷰어 만들기 ① - API 키 발급, 데이터 연동 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 외부 API를 연동하여 뉴스 뷰어 만들기 newsapi API 키 발급받기 API 키 발급을 위해 https://newsapi.org/register 해당 주소에 접속 → 가입 발급받은 API 키는 추후 API 요청 시 API 주소의 쿼리 파라미터로 넣어 사용합니다. 아래 링크에 접속하면 한국 뉴스를 가져오는 API에 대한 설명서가 있습니다. https://newsapi.org/s/south-korea-news-api 여러 카테고리가 존재하는 것 또한 확인할 수 있고, API를 가져와 사용해보겠습니다. import logo from './logo.svg'; import './App.c.. 2022. 11. 24. 이전 1 2 3 4 5 ··· 8 다음
