본문 바로가기

JavaScript136

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.
React) 비동기 작업의 이해 - 콜백함수, Promise, async/await, axios 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 비동기 작업의 이해 동기적 처리는 요청이 끝날 때까지 기다리는 동안 중지 상태가 되므로 다른 작업을 할 수 없습니다. 즉, 요청이 끝난 후 다음 작업이 실행되는 것 하지만 비동기 처리는 웹 애플리케이션이 멈추지 않으므로 동시에 여러 요인을 처리할 수 있고, 기다리는 동안 다른 함수를 호출할 수도 있습니다. https://chanychu.tistory.com/281 Javascript) 동기식 / 비동기식 - Timer API, DOM 관련 이벤트 처리, DOM 연속 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 동기.. 2022. 11. 24.

티스토리툴바