프로그래밍 「 자바스크립트 편」React 학습: 초보자

ReactJS에 대한 블로그 시리즈의 2부에 오신 것을 환영합니다! 이 블로그에서는 React — States의 핵심에 대해 자세히 알아보고, CRUD 작업을 탐색하고, React 개발에서 States를 사용하는 방법을 알아봅니다. 또한 후크를 사용하는 방법도 배웁니다 — useState, useEffect & useContext. 마지막으로 React Router DOM에 대해 알아보겠습니다.

 

정리해 보

• Part 1 — 환경, JSX, 컴포넌트, 소품 설정 및 CSS 사용. 중요한 것은 삼항 연산자와 조건부 렌더링에 대해 배웠다는 것입니다

 

React의 상태

상태는 업데이트할 수 있는 구조이며 구성 요소에 대한 데이터 또는 세부 정보를 저장하는 데 사용됩니다. 구성 요소가 자체 데이터를 유지 관리하고 업데이트할 수 있도록 하여 동적 대화형 사용자 인터페이스를 가능하게 합니다. 구성 요소 다시 렌더링은 상태 변경에 의해 트리거되며, 차례로 화면에 표시되는 정보를 업데이트합니다.

다음 코드를 사용하여 버튼을 누를 때 숫자의 개수를 1씩 증가시키는 함수를 만들어 보겠습니다.

count 변수를 증가시키기 위해 구현할 함수 만들기

버튼을 누르면 콘솔은 업데이트를 볼 수 있지만 화면에 표시된 요소에는 변경 사항이 표시되지 않습니다.cnt

Console Log & on 앱에서 출력 보기

이는 React가 변경 사항을 자동으로 감지하지 못하기 때문에 States 사용이 작동하는 이유입니다.

변경 사항이 표시되지 않는 이유는 무엇입니까?

React는 조정 프로세스와 Virtual DOM(실제 문서 객체 모델의 컴팩트 복제본)을 사용하여 사용자 인터페이스를 빠르게 새로 고칩니다. 이전 가상 DOM 표현과 새 가상 DOM 표현을 비교하여 실제 DOM에서 변경해야 할 사항을 결정합니다.
변수를 직접 수정해도 조정 프로세스가 시작되지 않기 때문에 React는 변경 사항을 인식할 수 없습니다. 따라서 변수의 새 값을 표시하도록 사용자 인터페이스가 업데이트되지 않습니다.

상태를 사용하고 변수의 변경 사항을 렌더링하려면 Hook을 사용합니다.useState

후크 란 무엇입니까?

후크는 기능 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있게 해주는 특수 기능입니다. 후크는 기능 구성 요소에 상태 저장 동작을 관리하고 캡슐화하는 메커니즘을 제공하여 이전에는 클래스 구성 요소에서만 사용할 수 있었던 로컬 상태, 수명 주기 메서드 및 기타 기능을 가질 수 있도록 합니다.

useState 후크

후크는 기능적 구성 요소가 상태를 가질 수 있도록 하는 React의 내장 함수입니다. 이를 사용하여 기능 구성 요소 내부에 상태 변수를 선언하고 현재 값에 액세스할 수 있습니다. 또한 상태 변수를 업데이트하여 구성 요소의 다시 렌더링을 트리거하는 기능을 제공합니다.useState

상태를 사용하려면 먼저 다음 명령을 사용하여 useState Hook을 가져옵니다.import { useState } from “react”

이제 이 후크를 사용하여 다음 코드를 사용하여 상태를 만들 수 있습니다.

useState Hook 구현

버튼을 클릭하면 변수가 업데이트되고 업데이트 된 값이 화면에 다시 렌더링됩니다!cnt

다시 렌더링된 구성 요소 및 새 변수 값으로 출력

위의 경우 초기값이 인 state 변수를 초기화합니다. 이 함수는 변수를 업데이트합니다. 버튼을 클릭하면 값이 1씩 증가하여 다시 렌더링이 트리거되고 화면에 표시된 개수가 업데이트됩니다.useState(0)cnt0setCountcntsetCount(cnt+ 1)cnt

후크를 사용하는 더 많은 예는 이 블로그의 끝에 있습니다!useState

 

CRUD 작업

CRUD(만들기, 읽기, 업데이트, 삭제) 작업에는 API와 상호 작용하거나 구성 요소의 상태로 데이터를 조작하는 작업이 포함됩니다.

• 만들기: 새 데이터를 만들기 위해 일반적으로 양식 또는 기타 입력 메커니즘을 통해 사용자 입력을 수집합니다.C
• 읽기: 데이터 읽기에는 API에서 기존 데이터를 가져오거나 구성 요소의 상태 내에 저장된 데이터를 사용하는 작업이 포함됩니다.R
• 업데이트: 기존 데이터를 업데이트하려면 먼저 데이터를 검색하고(읽기 작업 사용) 사용자에게 편집 가능한 형식으로 제공해야 합니다.U
• 삭제: 데이터 삭제에는 삭제하려는 데이터의 고유 식별자와 함께 API에 HTTP 요청을 보내는 작업이 포함됩니다.D

React의 CRUD 작업에는 API 요청과 같은 비동기 작업이 포함되는 경우가 많으므로 로드 상태 및 오류 처리를 처리하는 것이 중요합니다. 이를 연습하기 위해 할 일 목록을 만들 수 있습니다.

 

구성 요소 수명 주기

구성 요소 수명 주기는 구성 요소가 생성에서 DOM에서 제거에 이르기까지 거치는 여러 단계를 나타냅니다. 3가지 주요 단계로 나눌 수 있습니다.

• 탑재: 구성 요소가 초기화되고 DOM에 삽입될 때 발생합니다.
• 업데이트 중: 구성 요소의 상태 또는 소품이 업데이트될 때 발생합니다.
• 탑재 해제: 구성 요소가 DOM에서 제거될 때 발생합니다.

useEffect 후크

후크는 기능적 구성 요소에서 부작용을 수행할 수 있는 React의 내장 후크입니다. 렌더링 후 또는 특정 종속성 변경에 대한 응답으로 실행해야 하는 작업을 처리하는 데 사용됩니다.useEffect

종속성은 에 대한 두 번째 인수로 전달되는 값 또는 값 목록을 나타냅니다. 종속성을 지정하는 목적은 효과를 다시 실행해야 하는 시기를 React에 알려주는 것입니다(React는 종속성이 변경된 경우 종속성의 이전 값을 현재 값과 비교합니다).useEffect

다음 코드를 사용하면 버튼을 클릭하여 상태가 변경될 때 후크를 사용하여 구성 요소를 마운트 및 마운트 해제하는 방법을 확인할 수 있습니다.useEffect

useEffect 후크를 사용한 마운트 및 마운트 해제를 위한 코드

버튼 클릭 후 출력

위의 코드와 같이 hook 을 사용하는 구문은 다음과
같습니다.useEffectuseEffect(() => { console.log(‘Effect ran’); }, [dependency]);

effect 함수는 상태 변수가 변경될 때만 다시 실행됩니다. 다른 상태 변수 또는 props가 업데이트되었지만 동일하게 유지되는 경우 효과가 다시 실행되지 않습니다.dependencydependency

종속성 배열을 모두 생략하면 모든 렌더링 후에 효과가 실행됩니다. 위의 예에서와 같이 빈 배열()을 종속성으로 전달하면 효과가 한 번만 실행됩니다.[]

 

React Router DOM

React로 작업할 때 가장 많이 생각하는 질문은 "애플리케이션에서 여러 페이지를 만드는 방법"입니다. React는 단일 페이지 애플리케이션(SPA)이기 때문에 여러 HTML 페이지를 사용하는 대신 웹 서버의 새로운 정보로 기존 웹 페이지를 동적으로 다시 작성합니다.

React Router DOM은 React 애플리케이션에 대한 라우팅 기능을 제공하는 인기 있는 라이브러리입니다. 이를 통해 UI를 URL과 동기화하여 React 애플리케이션 내에서 탐색 및 라우팅을 처리할 수 있습니다.

React Router DOM을 사용하려면 터미널로 이동하여 다음 명령을 입력하여 종속성으로 설치합니다.npm install react-router-dom

설치가 완료되면 다음을 사용하여 필요한 구성 요소를 가져올 수 있습니다
.import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

React Router DOM에서 제공하는 주요 구성 요소는 다음과 같습니다.

• <BrowserRouter>: HTML5 기록 API(pushstate, replacestate, popstate 이벤트)를 사용하여 UI를 URL과 동기화된 상태로 유지하는 라우터 구현입니다. 앱에서 다른 경로를 원하는 위치를 정의합니다.
• <Route>: URL이 지정된 경로와 일치할 때 특정 구성 요소를 렌더링하는 구성 요소입니다. 다른 경로를 정의하고 해당 구성 요소와 연결하는 데 사용할 수 있습니다. 자동 닫는 태그입니다.
• <Switch>: 현재 URL과 일치하는 첫 번째 URL을 렌더링하는 구성 요소입니다. 한 번에 하나의 경로만 렌더링되도록 하는 데 도움이 됩니다.<Route>
• <Link>: 앵커 태그()를 렌더링하여 애플리케이션 내의 특정 URL로 이동하는 구성 요소입니다. 전체 페이지 새로고침을 트리거하지 않고 링크를 만드는 선언적 방법을 제공합니다.<a>
• <Routes>: 사용자가 애플리케이션에 대해 다른 경로를 정의하는 곳임을 React에 알려주는 구성 요소입니다.

URL이 변경될 때 페이지에서 렌더링되는 여러 구성 요소가 있는 탐색 모음을 만들어 위의 모든 것을 구현할 수 있습니다.

여러 경로가 있는 앱.js 대한 코드

링크를 라우팅하는 다양한 구성 요소에 대한 코드

출력

 

상태 관리

React의 상태 관리는 구성 요소 계층 구조 전반에 걸쳐 데이터 및 관련 동작을 포함하는 애플리케이션의 상태를 관리하고 제어하는 프로세스를 나타냅니다. 상태 관리는 일반적으로 Props 드릴링을 방지하는 데 사용됩니다.

"구성 요소 중첩 지옥"이라고도 하는 소품 드릴링은 여러 중간 구성 요소를 통해 소품을 전달하여 해당 소품에 액세스해야 하는 깊이 중첩된 구성 요소에 도달하는 프로세스를 나타냅니다.

프롭 드릴링

위의 예에서 함수에 전달된 props는 최종적으로 사용되는 위치로 전달된 다음 전달됩니다. 프롭 드릴링을 처리하는 또 다른 방법은 후크를 사용하는 것입니다.topmiddlebottomuseContext

useContext 후크

useContext 는 기능 구성 요소 내에서 React의 Context API의 값을 사용할 수 있게 해주는 React의 내장 후크입니다. 중간 구성 요소나 소품 드릴링 없이 컨텍스트 값에 액세스할 수 있는 방법을 제공합니다.

React의 컨텍스트 API는 구성 요소 트리의 모든 수준을 통해 props를 명시적으로 전달하지 않고 구성 요소 간에 데이터를 공유하는 메커니즘입니다.

& 를 사용하여 이 작업을 수행할 수 있습니다. 를 사용하여 만들어집니다. 구성 요소는 공급자 역할을 하며 . 내부에서 후크는 컨텍스트 값에 직접 액세스하는 데 사용됩니다.createContextuseContextMyContextReact.createContext()AppChildComponentChildComponentuseContext

useContext 후크 사용

출력

를 사용하면 소품 드릴링을 피하고 필요한 모든 기능 구성 요소 내에서 컨텍스트 값에 쉽게 액세스할 수 있습니다. 컨텍스트 사용을 단순화하고 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다.useContext

 

useState Hook의 더 많은 예

• 구성 요소
  숨기기/표시 Toggling the visibility of text by click of a button. 우리는 플래그 (기본적으로 )를 만듭니다.이 플래그는 버튼을 클릭하면 구성 요소의 가시성을 변경하는 차례로 전환됩니다.true

구성 요소는 버튼 클릭시 숨기거나 표시 할 수 있습니다.

• 텍스트 상자에
  입력되는 텍스트 반영 어떤 텍스트가 입력되고 있는지 반영 상자 자체 아래의 텍스트 상자에 입력됩니다. React는 입력 값이 변경되고 변경 사항이 반영될 때마다 구성 요소를 다시 렌더링합니다

상자에 추가된 텍스트가 그 아래에 반영됩니다.

• CSS
  적용 위의 예와 유사하게 버튼을 눌러 구성 요소의 CSS를 변경할 수 있습니다. 조건이 참인지 아닌지 확인하고 삼항 연산자를 사용하여 필요한 변경 사항을 구현합니다.

버튼을 눌러 색상 전환

 

이것으로 이 React 시리즈의 두 번째 부분을 마칩니다. 이제 React — States의 핵심 개념을 이해했습니다. 또한 라우터 DOM, 상태 관리 및 구성 요소 수명 주기에 대해서도 배웠습니다. 그리고 마지막으로 우리는 그들의 예제와 함께 React의 다양한 후크에 대해 배웠습니다.