Jun's TID

이번에는 지금까지 배운 내용을 활용하여 카테고리 별로 최신 뉴스 목록을 보여 주는 News Viewer를 만들어보려고 한다. https://newsapi.org/ 에서 제공하는 API를 사용하여 데이터를 받아 오고, CSS의 경우 styled-components를 활용하여 스타일링해보려고 한다. 바로 한번 들어가보자. api는 HTTP 요청을 Promise 기반으로 처리하는, 현재 자바스크립트에서 가장 많이 사용된다는 axios를 사용한다. npm install axios axios의 사용법부터 알아보자. 우선, App.js 에서 버튼을 클릭하여 get 요청을 보내고, 응답을 그대로 페이지에 나타도록 구현한다. ◎App.js import { useState } from 'react'; import axi..

웹 App에서 Routing이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. Todo List의 경우에는 하나의 페이지만 사용해도 충분히 구현이 가능했지만, 블로그와 같은 경우에는 여러 페이지로 구성해야 제 기능을 모두 구현할 수 있을 것이다. 이렇게 여러 페이지로 구성된 웹 App을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템이다. 일반적으로 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 두 가지이다. 1. 리액트 라우터(React Router): 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있는 라이브러리이다. 컴포넌트 기반으로 라우팅 시..

직전 포스팅에서 내용을 좀 다루기는 했는데, 전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다는 걸 알았다. 하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하는 것이 매우 힘들다. 아래 예제 코드를 보면 확실하게 이해할 수 있다. const object = { somewhere: { deep: { inside: 3, array: [1, 2, 3, 4] }, bar: 2 }, foo: 1 }; // somewhere.deep.inside 값을 4로 바꾸기 let nextObject = { ...object, somewhere: { ...object.somewhere, deep: { ...object.somewhere.dee..

지금까지 학습한 리액트 기초 개념을 가지고 직전에 Todo List App을 만들어 보았다. 일반적인 상황에서 할 일은 10개를 넘어가지 않으니, 이 App을 사용할 때 큰 불편함 없이 사용할 수 있다. 만약, 데이터가 1000개 이상으로 많아진다면 어떨까? 이벤트를 핸들링할 때마다 1000개 이상의 컴포넌트를 모두 리렌더링하는 것은 분명히 부담이 될 것이며, 속도 또한 체감이 가능할 정도로 느려질 것이다. Todo를 2500개 정도 만들어서 한번 부하를 줘보자. ◎App.js import './App.css'; import TodoTemplate from "./components/TodoTemplate"; import TodoInsert from "./components/TodoInsert"; impo..

이제까지 리액트의 상태나 컴포넌트 등 기초적인 부분을 다뤄봤으니, 국민 첫 프로젝트인 Todo List를 한번 만들어보려고 한다. SPA(single page application)으로 만들기 때문에 그렇게 많은 컴포넌트나 코드는 없이, 정말 간단한 CRUD 기능을 가지고 있는 Todo List 이다. 바로 한번 시작해보자. 우선, 총 App 컴포넌트를 제외하고 총 4개의 컴포넌트를 만들어 사용할 것인데, 각 컴포넌트를 용도별로 확인해보자. 1. TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀을 보여준다. 2. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트이다. state를 통해 인풋의 상태를 관리한다. 3. TodoListItem: 각 To do 항목에 대한 ..

리액트에서 컴포넌트를 스타일링할 때 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 방식이란 없지만, 보통 개발할 프로젝트의 특징이나 개발자의 취향으로 갈린다. 이번에 다뤄볼 리액트 스타일링 방식은 다음과 같다. 1. 일반 css: 컴포넌트를 스타일링하는 가장 기본적인 방식 2. Sass: 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있도록 해준다. 3. css Module: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션이다. 4. styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당..

Hooks는 리액트 v16.8에서 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이전 포스팅에서 잠깐씩 그 개념을 다룬 적이 있는데, 이번에는 좀 더 본격적으로 Hooks를 다뤄보자. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 함수 컴포넌트에서 상태를 관리해야 한다면, 이 Hook을 사용하면 된다. 간단한 예제를 하나 만들어보자. ◎Counter.js import {useState} from "react"; const Counter = () => {..

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명의 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이럴 때 컴포넌트의 라이프사이클 메서드를 사용한다. 마찬가지로 라이프사이클 메서드는 클래스형 컴포넌트에만 있는 기능이지만, Hooks 기능을 사용하여 비슷한 작업을 처리할 수는 있다. 바로 한번 알아보자. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 ..

웹 App을 만들다보면 태그와 같이 반복되는 코드를 작성할 때가 있다. 이번 포스팅에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법을 다뤄보자. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) - callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. 1. currentValue: 현재 처리하고 있는 요소 2. index: 현재 처리하고 있는 요소의 index 값 3. array..

일반 HTML에서 DOM 요소에 이름을 달 떄는 보통 id를 사용한다. 특정 DOM 요소에 id를 달아서 CSS 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수가 있다. 기본 리액트 프로젝트도 처음 생성을 하면 div 요소에 root라는 아이디를 달아서 const root = ReactDOM.createRoot(document.getElementById('root')); 와 같이 사용한다. HTML 에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref(reference)이다. 리액트 컴포넌트 안에서도 id를 사용활 수 있지만, JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달된다...