거니의 velog

* Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 이를테면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류가 있다. Context API는 리액트 v.16.3부터 사용하기 쉽게 많이 개선되었다. 이 기능은 리액트 관련 라이브러리에서도 많이 사용되고 있다. 예를 들어 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있다. * 이번 실습은 다음 흐름으로 진행된다. 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 * 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 떄는 어떻게 해야 할까? 리액트 애플리케이션은 컴포넌트 간..

7. 리액트 라우터 적용하기 * 방금 진행한 뉴스 뷰어 프로젝트에 리액트 라우터를 적용해 보자. 기존에는 카테고리 값을 useState로 관리했는데, 이번에는 이 값을 리액트 라우터와 URL 파라미터를 사용하여 관리해 보자. (1) 리액트 라우터의 설치 및 적용 * 우선 현재 프로젝트에 리액트 라우터를 설치하자. $ yarn add react-router-dom // v5 설치 용도 $ yarn add react-router-dom@5 * 그리고 index.js에서 리액트 라우터를 적용하자. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; impor..

5. 데이터 연동하기 * 이제 NewsList 컴포넌트에서 이전에 연습 삼아 사용했던 API를 호출해 보도록 하자. 컴포넌트가 화면에 보이는 시점에 API를 요청해 볼 것이다. 이때 useEffect를 사용하여 컴포넌트가 맨 처음 렌더링되는 시점에 API를 요청하면 된다. 여기서 주의할 점은 useEffect에 등록하는 함수에 async를 붙이면 안 된다는 것이다. useEffect에서 반환해야 하는 값은 뒷정리 함수이기 때문이다. * 따라서 useEffect 내부에서 async/await 를 사용하고 싶다면, 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어서 사용해 주어야 한다. * 추가로 loading이라는 상태도 관리하여 API 요청이 대기 중인지 판별할 것이다. 요청이 대기 중일 때는..

3. newsapi API 키 발급받기 * 이번 프로젝트에서는 newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러온 후 보여 줄 것이다. 이를 수행하기 위해서는 사전에 newsapi에서 API 키를 발급받아야 한다. API 키는 아래 주소로 가입하면 발급받을 수 있다. https://newsapi.org/register Register - News API Email addresses will be verified, please enter a real one. Disposable addresses have been blocked. Reminder: If you are a business or are using News API commercially then a subscription is req..

* 지금까지 배운 것을 활용하여 카테고리 별로 최신 뉴스 목록을 보여 주는 뉴스 뷰어 프로젝트를 진행해 볼 것이다. https://newsapi.org/ News API – Search News and Blog Articles on the Web“Ascender AI has a mission to apply AI to the media, and NewsAPI is one of our most valuable resources. Ascender is redefining how users interact with complex information, and the NewsAPI feed is an essential showcase for our technologies.” Braddock Ganewsapi.o..

6. 리액트 라우터 부가 기능 (1) History * History 객체는 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나로, 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있다. 예를 들어 특정 버튼을 눌렀을 때 뒤로 가거나, 로그인 후 화면을 전환하거나, 다른 페이지로 이탈하는 것을 방지해야 할 때 history를 활용한다. * 이 객체를 사용하는 예제 페이지를 한 번 작성해 보자. HistorySample 이라는 컴포넌트를 다음과 같이 만들어 보자. [HistorySample.js] import React, { Component } from "react"; class HistorySample extends Component ..

3. Route 하나에 여러 개의 path 설정하기 * Route 하나에 여러 개의 path를 지정하는 것은 최신 버전의 리액트 라우터 v5부터 적용된 기능이다. 이전 버전에서는 여러 개의 path에 같은 컴포넌트를 보여 주고 싶다면 다음과 같이 해야 했다. import React from "react"; import { Link, Route } from "react-router-dom/cjs/react-router-dom"; import Home from "./Home"; import About from "./About"; const App = () => { return ( ); }; export default App; * 이렇게 Route를 두 번 사용하는 대신, path props를 배열 ["/ab..

1. SPA란? * react-route v6 이후를 보길 원하는 분들은 아래 주소 링크를 참고하길 바란다. https://velog.io/@velopert/react-router-v6-tutorial React Router v6 튜토리얼 리액트 라우터 v6를 새로 접하시는 분들을 위한 튜토리얼을 작성했습니다. 리액트 라우터 v6 의 기본적인 사용법, 그리고 이 라이브러리에서 제공하는 다양한 유용한 기능들에 대해서 알아봅시 velog.io * SPA는 Single Page Application(싱글 페이지 어플리케이션)의 약어이다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있다. * 기존에는 사용자가 다른 페이지로 이동할 ..

* 이전 장에서는 컴포넌트 업데이트 성능을 어떻게 최적화해야 하는지, 불변성을 유지하면서 상태를 업데이트 하는 것이 왜 중요한지 배웠다. 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트 하는 것이 매우 힘들다.const object = { somewhere: { deep: { inside: 3, array: [1, 2, 3, 4] }, bar: 2 }, foo: 1};// somewhere.deep.inside 값을 4로 바꾸기let nextObject = { ...obje..

6. 불변성의 중요성 * 리액트 컴포넌트에서 상태를 업데이트 할 때 불변성을 지키는 것은 매우 중요하다. 앞에서 useState를 사용해 만든 todos 배열과 setTodos 함수를 사용하는 onToggle 함수를 다시 확인해 보자. const onToggle = useCallback(id => { setTodos((todos) => todos.map((todo) => todo.id === id ? { ...todo, checked: !todo.checked } : todo, ), ); }, []); * 기존 데이터를 수정할 때 직접 수정하지 않고, 새로운 배열을 만든 다음에 새로운 객체를 만들어서 필요한 부분을 교체해 주는 방식으로 구현했다. 업데이트가 필요한 곳에서는 아예 새로운 배열 혹은 새로운 ..