분류 Reactjs

React 초보자용 핸드북

컨텐츠 정보

  • 조회 340 (작성일 )

본문

React는 지금까지 만들어진 가장 인기 있는 JavaScript 프레임 워크 중 하나이며, 최고의 도구 중 하나라고 생각합니다.


이 핸드북의 목표는 React 학습을 위한 시작 가이드를 제공하는 것입니다.


이 책을 마치면 다음에 대한 기본적인 이해를 갖게 됩니다.


  • React 란 무엇이며 왜 그렇게 인기가 있는가
  • React를 설치하는 방법
  • React 구성 요소
  • React 상태
  • React Props
  • React에서 사용자 이벤트 처리
  • React 컴포넌트의 라이프 사이클 이벤트

https://www.freecodecamp.org/news/react-beginner-handbook/


이 주제는 다른 고급 React 튜토리얼에서 빌드 할 기반이 될 것입니다.


이 책은 특히 React를 처음 접하는 JavaScript 프로그래머를 위해 작성되었습니다. 그럼 시작하겠습니다.


React 란 무엇입니까? 


React는 시각적 인터페이스 개발을 단순화하는 것을 목표로 하는 JavaScript 라이브러리입니다.


Facebook에서 개발되어 2013 년에 전 세계에 출시되었으며, 가장 널리 사용되는 일부 앱을 구동하여 수많은 다른 애플리케이션 중에서 Facebook과 Instagram을 지원합니다.


주요 목표는 어느 시점에서든 인터페이스와 그 상태에 대해 쉽게 추론 할 수 있도록 하는 것입니다. UI를 구성 요소 모음으로 분할하여 이를 수행합니다.


React를 배울 때 초기 어려움을 겪을 수 있습니다. 하지만 일단 "클릭"하면 지금까지 경험 한 최고의 경험 중 하나가 될 것입니다. React는 많은 것을 더 쉽게 만들고 생태계는 훌륭한 라이브러리와 도구로 가득 차 있습니다.


React 자체에는 매우 작은 API가 있으며 기본적으로 시작하려면 4 가지 개념을 이해해야 합니다.


  • Components
  • JSX
  • State
  • Props

이 책에서 이 모든 것을 살펴보고 더 고급 개념은 다른 튜토리얼에 남겨 둘 것입니다. 앞으로 나아가는 방법에 대한 마지막 섹션에서 몇 가지 지침을 제공 할 것입니다.


그리고 이 핸드북을 PDF / ePub / Mobi 형식으로 무료로 다운로드 할 수 있습니다.


핸드북 요약 


  • React를 사용하기 위해 알아야 할 JavaScript의 양
  • 왜 React를 배워야 합니까?
  • React를 설치하는 방법
  • React 구성 요소
  • JSX 소개
  • JSX를 사용하여 UI 구성
  • JSX와 HTML의 차이점
  • JSX에 JavaScript 포함
  • React에서 상태 관리
  • React의 컴포넌트 소품
  • React 애플리케이션의 데이터 흐름
  • React에서 사용자 이벤트 처리
  • React 구성 요소의 수명주기 이벤트
  • 여기서 어디로 가야

React를 사용하기 위해 알아야 할 JavaScript의 양 


React로 바로 들어가기 전에 몇 가지 핵심 JavaScript 개념을 잘 이해해야 합니다.


자바 스크립트 전문가 일 필요는 없지만 다음에 대한 좋은 개요가 필요하다고 생각합니다.

이러한 개념이 낯설게 들리면 해당 주제에 대해 자세히 알아볼 수 있는 링크를 제공했습니다.


왜 React를 배워야 합니까? 


웹 개발자라면 최소한 React에 대한 기본적인 이해가 있어야 합니다.


몇 가지 이유 때문입니다.


  1. React는 매우 유명합니다. 개발자로서 향후 React 프로젝트에서 작업 할 가능성이 높습니다. 아마도 기존 프로젝트이거나 팀이 React를 기반으로 하는 새로운 앱에서 작업하기를 원할 것입니다.
  2. 오늘날 많은 도구가 React를 핵심으로 사용하여 빌드됩니다. Next.js, Gatsby와 같은 인기 있는 프레임 워크 및 도구는 내부적으로 React를 사용합니다.
  3. 프론트 엔드 엔지니어로서 React는 아마도 면접에서 나올 것입니다.


그것들은 모두 좋은 이유이지만, 제가 React를 배우기를 바라는 주된 이유 중 하나는 그것이 훌륭하다는 것입니다.


코드 재사용 및 구성 요소 중심 개발을 포함하여 여러 가지 좋은 개발 사례를 장려합니다. 빠르고 가볍고 애플리케이션의 데이터 흐름에 대해 생각하게 만드는 방식은 많은 일반적인 시나리오에 완벽하게 적합합니다.


React를 설치하는 방법 


React를 설치하는 방법에는 몇 가지가 있습니다.


우선, 한 가지 접근 방식을 적극 권장하며 이는 공식적으로 권장되는 create-react-app이라는 도구를 사용하는 것입니다.


npx를 사용하여 시작합니다. 이는 Node.js 명령을 설치하지 않고 쉽게 다운로드하고 실행할 수 있는 방법입니다.


여기 내 npx 가이드를 참조하십시오 : https://flaviocopes.com/npx/


npx는 npm과 함께 제공됩니다 (버전 5.2부터). npm이 아직 설치되지 않은 경우 https://nodejs.org에서 지금 설치하십시오 (npm은 Node와 함께 설치됨).


사용 중인 npm의 버전이 확실하지 않은 경우 npm -v를 실행하여 업데이트가 필요한지 확인하십시오.


팁 : 터미널 사용에 익숙하지 않은 경우 https://flaviocopes.com/macos-terminal/에서 내 OSX 터미널 자습서를 확인하십시오. Mac 및 Linux에 적용됩니다.


npx create-react-app <app-name>을 실행하면 npx는 최신 create-react-app 릴리스를 다운로드하고 실행 한 다음 시스템에서 제거합니다.


그럼 시작하겠습니다.


npx create-react-app todolist

cra-start실행이 완료되었을 때입니다.


create-react-app-finished 


create-react-app은 사용자가 말한 폴더에 파일 구조를 생성하고 (이 경우에는 todolist) Git 저장소를 초기화했습니다.



또한 package.json 파일에 몇 가지 명령을 추가했습니다.


cra-packagejson 


따라서 새로 생성 된 애플리케이션 폴더로 이동하고 npm start를 실행하여 즉시 앱을 시작할 수 있습니다.

cra-running 

기본적으로 이 명령은 로컬 포트 ​​3000에서 앱을 시작하고 브라우저를 열고 시작 화면을 표시합니다.


cra-browser 


이제 이 애플리케이션에서 작업 할 준비가 되었습니다!


React Components 


마지막 섹션에서 첫 번째 React 애플리케이션을 만드는 방법을 보았습니다.


이 애플리케이션은 주로 구성과 관련된 다양한 작업을 수행하는 일련의 파일과 함께 제공되지만 눈에 띄는 파일은 App.js입니다.


App.js는 처음 만나는 React Component입니다.


코드는 다음과 같습니다.


import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

React 또는 Vue 및 Svelte와 같은 다른 인기 있는 프런트 엔드 프레임 워크 중 하나를 사용하여 빌드 된 애플리케이션은 수십 개의 구성 요소를 사용하여 빌드 됩니다.


그러나 이 첫 번째 구성 요소를 분석하여 시작하겠습니다. 이 구성 요소 코드를 다음과 같이 단순화하겠습니다.


import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return /* something */
}

export default App

여기에서 몇 가지를 볼 수 있습니다. 우리는 몇 가지를 가져오고 App이라는 함수를 내 보냅니다.


이 경우 가져 오는 것은 JavaScript 라이브러리 (react npm 패키지), SVG 이미지 및 CSS 파일입니다.


create-react-app은 JavaScript에서 사용할 이미지와 CSS를 가져올 수 있는 방식으로 설정되어 있지만 지금은 신경 쓸 필요가 없습니다. 주의해야 할 것은 구성 요소의 개념입니다.


App은 원래 예제에서 처음에는 꽤 이상하게 보이는 것을 반환하는 함수입니다.


HTML처럼 보이지만 일부 JavaScript가 포함되어 있습니다.


이것이 바로 컴포넌트의 출력을 구축하는 데 사용하는 특수 언어 인 JSX입니다. 다음 섹션에서 JSX에 대해 자세히 설명하겠습니다.


리턴 할 JSX를 정의하는 것 외에도 컴포넌트에는 몇 가지 다른 특성이 있습니다.


구성 요소는 자체 상태를 가질 수 있습니다. 즉,이 구성 요소가 이 상태를 응용 프로그램의 나머지 부분에 노출하지 않는 한 다른 구성 요소가 액세스 할 수 없는 일부 변수를 캡슐화 합니다.


구성 요소는 다른 구성 요소로부터 데이터를 받을 수도 있습니다. 이 경우 우리는 소품에 대해 이야기하고 있습니다.


걱정하지 마세요. 조만간 모든 용어 (JSX, State 및 Props)를 자세히 살펴볼 것입니다.


JSX 소개 


JSX를 먼저 설명하지 않고 React에 대해 이야기 할 수 없습니다.


마지막 섹션에서 첫 번째 React 구성 요소 인 create-react-app에 의해 빌드 된 기본 애플리케이션에 정의 된 App 구성 요소를 만났습니다.


코드는 다음과 같습니다.


import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

우리는 이전에 return 문 안에 있는 모든 것을 무시했지만 이 섹션에서는 이에 대해 이야기 할 것입니다.


컴포넌트가 반환 한 괄호 안에 있는 모든 것을 JSX라고 부릅니다.


<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

이것은 HTML처럼 보이지만 실제로는 HTML이 아닙니다. 조금 다릅니다.


그리고 이 코드가 JavaScript 파일 안에 있다는 것은 조금 이상합니다. 이것은 전혀 JavaScript처럼 보이지 않습니다!


내부적으로 React는 JSX를 처리하고 브라우저가 해석 할 수 있는 JavaScript로 변환합니다.


그래서 우리는 JSX를 작성하고 있지만, 결국에는 자바 스크립트 인터프리터가 이해할 수 있는 번역 단계가 있습니다.


React는 한 가지 이유로 이 인터페이스를 제공합니다. JSX를 사용하여 UI 인터페이스를 구축하는 것이 더 쉽습니다.


물론 익숙해지면.


다음 섹션에서는 JSX를 사용하여 UI를 쉽게 구성하는 방법에 대해 설명하고 알아야 할 "일반 HTML"과의 차이점을 살펴 보겠습니다.


JSX를 사용하여 UI 구성 


마지막 섹션에서 소개했듯이 JSX의 주요 이점 중 하나는 UI를 매우 쉽게 구축 할 수 있다는 것입니다.


특히 React 컴포넌트에서 다른 React 컴포넌트를 가져올 수 있으며 임베드하고 표시 할 수 있습니다.


React 컴포넌트는 일반적으로 자체 파일로 생성됩니다. 이것이 다른 컴포넌트에서 쉽게 재사용 할 수 있기 때문입니다 (가져 오기를 통해).


그러나 React 컴포넌트는 해당 컴포넌트에서만 사용하려는 경우 다른 컴포넌트의 동일한 파일에서 생성 될 수도 있습니다. 여기에는 "규칙"이 없습니다. 가장 기분 좋은 일을 할 수 있습니다.


일반적으로 파일의 줄 수가 너무 많아지면 별도의 파일을 사용합니다.


단순하게 유지하기 위해 동일한 App.js 파일에 구성 요소를 만들어 보겠습니다.


WelcomeMessage 구성 요소를 만들 것입니다.


function WelcomeMessage() {
  return <p>Welcome!</p>
}

 p HTML 요소를 나타내는 JSX 줄을 반환하는 간단한 함수입니다.


App.js 파일에 추가하겠습니다.


이제 앱 컴포넌트 JSX 내부에 <WelcomeMessage />를 추가하여 사용자 인터페이스에 이 컴포넌트를 표시 할 수 있습니다.


import React from 'react'
import logo from './logo.svg'
import './App.css'

function WelcomeMessage() {
  return <p>Welcome!</p>
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <WelcomeMessage />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

그리고 여기에 결과가 있습니다. "환영합니다!" 화면에 메시지?


new-component 

WelcomeMessage는 App의 하위 구성 요소이고 App은 상위 구성 요소입니다.


HTML 언어의 일부인 것처럼 <WelcomeMessage /> 구성 요소를 추가합니다.


이것이 React 컴포넌트와 JSX의 아름다움입니다. 우리는 HTML을 작성하는 것처럼 애플리케이션 인터페이스를 구성하고 사용할 수 있습니다.


다음 섹션에서 볼 수 있듯이 약간의 차이가 있습니다.


JSX와 HTML의 차이점 


JSX는 HTML처럼 보이지만 그렇지 않습니다.


이 섹션에서는 JSX를 사용할 때 염두에 두어야 할 가장 중요한 몇 가지 사항을 소개하고자 합니다.


앱 구성 요소 JSX를 살펴보면 차이점 중 하나가 분명 할 수 있습니다. className이라는 이상한 속성이 있습니다.


HTML에서는 클래스 속성을 사용합니다. 여러 가지 이유로 가장 널리 사용되는 속성 일 것입니다. 그 이유 중 하나는 CSS입니다. class 속성을 사용하면 HTML 요소의 스타일을 쉽게 지정할 수 있으며 Tailwind와 같은 CSS 프레임 워크는 이 속성을 CSS 사용자 인터페이스 디자인 프로세스의 중심에 배치합니다.


하지만 문제가 있습니다. 이 UI 코드를 JavaScript 파일에 작성하고 있으며 JavaScript 프로그래밍 언어의 클래스는 예약어입니다. 이것은 우리가 원하는대로 이 예약어를 사용할 수 없음을 의미합니다. 특정 목적 (JavaScript 클래스 정의)을 제공하며 React 작성자는 다른 이름을 선택해야 했습니다.


이것이 우리가 class 대신 className을 사용하는 방법입니다.


특히 기존 HTML을 복사 / 붙여 넣기 할 때 이것을 기억해야 합니다.


React는 문제가 발생하지 않도록 최선을 다하지만 개발자 도구에서 많은 경고를 표시합니다.


className 


이것은 이 문제로 고통 받는 유일한 HTML 기능은 아니지만 가장 일반적인 기능입니다.


JSX와 HTML의 또 다른 큰 차이점은 HTML이 매우 느슨하다는 것입니다. 구문에 오류가 있거나 잘못된 태그를 닫거나 일치하지 않는 경우에도 브라우저는 중단 없이 HTML을 해석하기 위해 최선을 다합니다.


웹의 핵심 기능 중 하나입니다. 매우 용서합니다.


JSX는 용서하지 않습니다. 태그를 닫는 것을 잊은 경우 명확한 오류 메시지가 표시됩니다.


jsx-error 

React는 일반적으로 문제를 해결하기 위한 올바른 방향을 알려주는 매우 훌륭하고 유익한 오류 메시지를 제공합니다.


JSX와 HTML의 또 다른 큰 차이점은 JSX에서 JavaScript를 포함 할 수 있다는 것입니다.


다음 섹션에서 이에 대해 이야기하겠습니다.


JSX에 JavaScript 포함 


React의 가장 좋은 기능 중 하나는 JavaScript를 JSX에 쉽게 임베드 할 수 있다는 것입니다.


예를 들어 Angular 및 Vue와 같은 다른 프런트 엔드 프레임 워크에는 템플릿에서 JavaScript 값을 인쇄하거나 루프와 같은 작업을 수행하는 고유 한 방법이 있습니다.


React는 새로운 것을 추가하지 않습니다. 대신 중괄호를 사용하여 JSX에서 JavaScript를 사용할 수 있습니다.


제가 보여 드릴 첫 번째 예는 지금까지 연구 한 앱 구성 요소에서 직접 가져온 것입니다.


다음을 사용하여 로고 SVG 파일을 가져옵니다.


import logo from './logo.svg'

그런 다음 JSX에서 이 SVG 파일을 img 태그의 src 속성에 할당합니다.


<img src={logo} class="App-logo" alt="logo" />

다른 예를 들어 보겠습니다. App 구성 요소에 message라는 변수가 있다고 가정합니다.


function App() {
  const message = 'Hello!'
  //...
}

JSX의 아무 곳에 나 {message}를 추가하여 JSX에서 이 값을 인쇄 할 수 있습니다.


중괄호 {} 안에 JavaScript 문을 추가 할 수 있지만 모든 중괄호 블록에 대해 하나의 문만 추가 할 수 있습니다.


그리고 진술은 무언가를 반환해야 합니다.


예를 들어 이것은 JSX에서 찾을 수 있는 일반적인 문장입니다. 조건 (message === 'Hello!')을 정의하는 삼항 연산자가 있고 조건이 참이면 하나의 값을 인쇄하고 조건이 거짓이면 다른 값 (이 경우 메시지의 내용)을 인쇄합니다.



{
  message === 'Hello!' ? 'The message was "Hello!"' : message
}

React에서 상태 관리 


모든 React 구성 요소는 자체 상태를 가질 수 있습니다.


상태 란 무엇을 의미합니까? 상태는 구성 요소에서 관리하는 데이터 집합입니다.


예를 들어 양식을 생각해보십시오. 양식의 각 개별 입력 요소는 상태를 관리하는 역할을 합니다.


버튼은 그것이 클릭 되었는지 아닌지를 아는 책임이 있습니다. 초점이 맞다면.


링크는 마우스가 그 위에 마우스를 올려 놓고 있는지를 아는 역할을 합니다.


React 또는 기타 구성 요소 기반 프레임 워크 / 라이브러리에서 모든 애플리케이션은 구성 요소의 상태를 기반으로 하며 이를 많이 사용합니다.


React에서 제공하는 useState 유틸리티를 사용하여 상태를 관리합니다. 기술적으로는 갈고리입니다 (지금은 갈고리의 세부 사항을 알 필요는 없지만 그게 다입니다).


다음과 같이 React에서 useState를 가져옵니다.


import React, { useState } from 'react'

useState()를 호출하면 새로운 상태 변수와 그 값을 변경하기 위해 호출 할 수 있는 함수가 반환됩니다.


useState()는 상태 항목의 초기 값을 받아들이고 상태 변수와 상태를 변경하기 위해 호출하는 함수를 포함하는 배열을 반환합니다.


Example: 


const [count, setCount] = useState(0)

이것은 중요하다. 상태 변수의 값을 직접 변경할 수는 없습니다. 수정 자 함수를 호출해야 합니다. 그렇지 않으면 React 구성 요소가 데이터 변경 사항을 반영하기 위해 UI를 업데이트하지 않습니다.


수정자를 호출하는 것은 컴포넌트 상태가 변경되었음을 React에 알릴 수 있는 방법입니다.


문법이 좀 이상 하죠? useState()는 배열을 반환하므로 배열 분해를 사용하여 다음과 같이 각 개별 항목에 액세스합니다. const [count, setCount] = useState(0)


다음은 실용적인 예입니다.


import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

원하는 만큼 useState() 호출을 추가하여 원하는 만큼 많은 상태 변수를 만들 수 있습니다.

const [count, setCount] = useState(0)
const [anotherCounter, setAnotherCounter] = useState(0)

React의 컴포넌트 소품 


컴포넌트에 전달 된 초기 값을 소품이라고 합니다.


이전에 WelcomeMessage 구성 요소를 만들었습니다.

function WelcomeMessage() {
  return <p>Welcome!</p>
}

다음과 같이 사용했습니다.


<WelcomeMessage />

이 구성 요소에는 초기 값이 없습니다. 소품이 없습니다.


소품은 JSX의 구성 요소에 속성으로 전달할 수 있습니다.


<WelcomeMessage myprop={'somevalue'} />

컴포넌트 내부에서 props를 인수로 받습니다.

function WelcomeMessage(props) {
  return <p>Welcome!</p>
}

이름으로 소품을 가져 오기 위해 객체 분해를 사용하는 것이 일반적입니다.

function WelcomeMessage({ myprop }) {
  return <p>Welcome!</p>
}

이제 소품이 생겼으므로 컴포넌트 내부에서 사용할 수 있습니다. 예를 들어 JSX에서 값을 인쇄 할 수 있습니다.

function WelcomeMessage({ myprop }) {
  return <p>{myprop}</p>
}

여기에서 중괄호는 다양한 의미를 가지고 있습니다. 함수 인수의 경우 중괄호는 객체 구조 해제 구문의 일부로 사용됩니다.


그런 다음 이를 사용하여 함수 코드 블록을 정의하고 마지막으로 JSX에서 JavaScript 값을 인쇄합니다.


컴포넌트에 소품을 전달하는 것은 애플리케이션에서 값을 전달할 수 있는 좋은 방법입니다.


컴포넌트는 데이터를 보유하거나 (상태를 가짐) props를 통해 데이터를 받습니다.


또한 함수를 소품으로 보낼 수 있으므로 자식 구성 요소가 부모 구성 요소에서 함수를 호출 할 수 있습니다.


특별한 소품을 children라고 합니다. 여기에는 구성 요소의 여는 태그와 닫는 태그 사이에 전달되는 모든 값이 포함됩니다. 예를 들면 다음과 같습니다.

<WelcomeMessage> Here is some message </WelcomeMessage>

이 경우 WelcomeMessage 내에서 값에 액세스 할 수 있습니다. 다음은 children prop을 사용하여 몇 가지 메시지입니다.

function WelcomeMessage({ children }) {
  return <p>{children}</p>
}

React 애플리케이션의 데이터 흐름 


React 애플리케이션에서 데이터는 일반적으로 이전 섹션에서 본 것처럼 props를 사용하여 부모 구성 요소에서 자식 구성 요소로 흐릅니다.

<WelcomeMessage myprop={'somevalue'} />

그러나 함수를 자식 구성 요소에 전달하면 자식 구성 요소에서 부모 구성 요소의 상태를 변경할 수 있습니다.

const [count, setCount] = useState(0)

<Counter setCount={setCount} />

Counter 구성 요소 내에서 이제 setCount prop을 잡고 호출하여 어떤 일이 발생하면 부모 구성 요소의 카운트 상태를 업데이트 할 수 있습니다.

function Counter({ setCount }) {
  //...

  setCount(1)

  //...
}

Context API 및 Redux와 같은 라이브러리를 포함하여 데이터를 관리하는 고급 방법이 있다는 것을 알아야 합니다. 그러나 그것들은 더 복잡해지며, 방금 설명한 두 가지 방법을 사용하는 시간의 90 %가 완벽한 솔루션입니다.


React에서 사용자 이벤트 처리 


React는 클릭, 양식 이벤트 등과 같은 DOM 이벤트에서 발생한 이벤트를 쉽게 관리 할 수 있는 방법을 제공합니다.


이해하기 매우 쉬운 클릭 이벤트에 대해 이야기 해 보겠습니다.


모든 JSX 요소에서 onClick 속성을 사용할 수 있습니다.


<button
  onClick={(event) => {
    /* handle the event */
  }}
>
  Click here
</button>

요소를 클릭하면 onClick 속성에 전달 된 함수가 실행됩니다.


JSX 외부에서 이 함수를 정의 할 수 있습니다.

const handleClickEvent = (event) => {
  /* handle the event */
}

function App() {
  return <button onClick={handleClickEvent}>Click here</button>
}

버튼에서 클릭 이벤트가 발생하면 React는 이벤트 핸들러 함수를 호출합니다.


React는 onKeyUp, onFocus, onChange, onMouseDown, onSubmit 등과 같은 방대한 유형의 이벤트를 지원합니다.


React 컴포넌트의 라이프 사이클 이벤트 


지금까지 useState 후크로 상태를 관리하는 방법을 살펴 보았습니다.


이 책에서 소개하고 싶은 또 다른 고리가 있습니다 : useEffect.


useEffect 후크를 사용하면 구성 요소가 구성 요소의 수명주기 이벤트에 액세스 할 수 있습니다.


후크를 호출 할 때 함수를 전달합니다. 이 함수는 컴포넌트가 처음 렌더링 될 때와 이후의 모든 다시 렌더링 / 업데이트에서 React에 의해 실행됩니다.


React는 먼저 DOM을 업데이트 한 다음 useEffect()에 전달 된 모든 함수를 호출합니다.


차단 코드에서도 UI 렌더링을 차단하지 않고 모두 가능합니다.


다음은 그 예입니다.

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

useEffect() 함수는 구성 요소를 다시 렌더링 / 업데이트 할 때마다 실행되므로 성능을 위해 React에 이를 건너 뛰도록 지시 할 수 있습니다. 감시 할 상태 변수 목록을 포함하는 배열 인 두 번째 매개 변수를 추가하여 이를 수행합니다.


React는 이 배열의 항목 중 하나가 변경되는 경우에만 부작용을 다시 실행합니다.

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
}, [name, count])

마찬가지로, 빈 배열을 전달하여 React에게 한 번만 (마운트시) 부작용을 실행하도록 지시 할 수 있습니다.


useEffect(() => {
  console.log(`Component mounted`)
}, [])

당신은 이 옵션을 많이 사용하고 있다는 것을 알게 됩니다.


useEffect()는 로그 추가, 타사 API 액세스 등에 유용합니다.


여기서 어디로 가야 


이 기사에서 설명하는 주제를 마스터하는 것은 React 학습 목표를 향한 훌륭한 단계입니다.


React에 대한 튜토리얼과 코스의 바다에서 길을 잃기 쉽기 때문에 지금 몇 가지 지침을 제공하고 싶습니다.


다음에 무엇을 배워야 합니까?


Virtual DOM에 대한 이론, 선언적 코드 작성, 단방향 데이터 흐름, 불변성, 구성에 대해 자세히 알아보십시오.


간단한 React 애플리케이션 빌드를 시작하십시오. 예를 들어 간단한 카운터를 만들거나 공용 API와 상호 작용합니다.


조건부 렌더링을 수행하는 방법, JSX에서 루프를 수행하는 방법, React 개발자 도구를 사용하는 방법을 배웁니다.


일반 CSS 또는 스타일 구성 요소를 사용하여 React 애플리케이션에서 CSS를 적용하는 방법을 알아 봅니다.


Context API, useContext 및 Redux를 사용하여 상태를 관리하는 방법을 알아 봅니다.


양식과 상호 작용하는 방법을 알아 봅니다.


React Router 사용 방법을 알아 봅니다.


React 애플리케이션을 테스트하는 방법을 알아 봅니다.


Gatsby 또는 Next.js와 같이 React를 기반으로 구축 된 애플리케이션 프레임 워크를 배웁니다.


무엇보다 배운 모든 것을 적용하기 위해 샘플 애플리케이션을 구축하여 연습해야 합니다.


결론 


이 핸드북을 읽어 주셔서 감사합니다.


React와 그로 할 수있는 모든 것에 대해 더 많이 배우는 데 영감을 주길 바랍니다!


원하는 경우 이 핸드북을 PDF / ePub / Mobi 형식으로 무료로 다운로드 할 수 있습니다.


이와 같은 더 많은 콘텐츠를 확인하려면 매일 제 웹 사이트 flaviocopes.com에 프로그래밍 자습서를 게시합니다.