React 초보자를 위한 6가지 중요한 JavaScript 개념

2023/01/26

가장 인기 있는 프론트엔드 라이브러리로서 모두가 React를 배우고 싶어합니다. ReactJS는 기본적으로 JavaScript입니다. 그러나 이것이 ReactJS로 이동하기 위해 JavaScript의 모든 것을 배워야 한다는 의미는 아닙니다. 기본 JavaScript 개념을 이해하면 React 개념을 더 쉽게 이해하고 궁극적으로 프로젝트 작업 능력을 가속화할 수 있습니다.

ReactJS로 이동하기 전에 JavaScript에 대해 알아야 할 필수 개념을 간략하게 설명하겠습니다.

1. 화살표 기능

화살표 함수는 React에서 널리 사용됩니다. 버전 16.8부터 React는 클래스 기반 구성 요소에서 기능적 구성 요소로 이동했습니다. 화살표 함수를 사용하면 더 짧은 구문으로 함수를 만들 수 있습니다.

다음 예에서 이를 설명하겠습니다.

일반 기능

function greeting() { return 'hello' } console.log(greeting()) //hello

화살표 기능

let greeting = () => 'hello' console.log(greeting()) //hello

위의 두 함수는 구문은 다르지만 출력은 동일합니다. 화살표 함수는 일반 함수보다 더 짧고 깔끔해 보입니다. 일반적으로 React 구성 요소는 다음과 같은 구조를 갖습니다.

import React from 'react'

const Book = () => {


    return (
        <div>Book</div>
   )
}

export default Book

화살표 함수에는 이름이 없습니다. 이름을 지정하려면 변수에 지정하십시오. 일반 함수와 화살표 함수의 차이점은 구문 그 이상입니다. Mozilla 개발자 문서 에서 화살표 기능에 대해 자세히 알아보십시오 .

2. 파괴

구조 분해는 복잡한 데이터 구조에서 데이터를 가져오는 데 사용됩니다. JavaScript에서 배열과 객체는 많은 값을 저장할 수 있습니다. 값을 조작하고 응용 프로그램의 다른 부분에서 사용할 수 있습니다.

이러한 값을 얻으려면 변수를 분해해야 합니다. 처리하는 데이터 구조에 따라 점(.) 표기법 또는 대괄호 표기법을 사용할 수 있습니다. 예를 들어:

const student = {

'name': 'Mary',


   'address': 'South Park, Bethlehem',
   'age': 15

}

파괴:

console.log(student.name) // output Mary

위의 예에서 점 표기법은 키 ‘name’의 값에 액세스합니다. ReactJS에서는 구조 분해 개념을 사용하여 애플리케이션에서 값을 얻고 공유합니다. Destructuring은 반복을 피하고 코드를 더 읽기 쉽게 만드는 데 도움이 됩니다.

3. 배열 방법

React 프로젝트에서 작업하는 동안 배열을 여러 번 접하게 될 것입니다. 배열은 데이터 모음입니다. 데이터를 배열에 저장하므로 필요할 때 재사용할 수 있습니다.

배열 메서드는 주로 데이터를 조작, 검색 및 표시하는 데 사용됩니다. 일반적으로 사용되는 일부 배열 메서드는 map() , filter() 및 reduce() 입니다. 각각을 적용할 시기를 이해하려면 배열 메서드에 익숙해야 합니다.

예를 들어 map() 메서드는 배열의 모든 항목을 반복합니다. 배열의 각 요소에 작용하여 새 배열을 만듭니다.

const numbers = [9, 16, 25, 36];

const squaredArr = numbers.map(Math.sqrt) // 3,4,5,6

ReactJS에서 배열 메서드를 많이 사용하게 됩니다. 배열을 문자열로 변환하고, 결합하고, 항목을 추가하고, 다른 배열에서 항목을 제거하는 데 사용할 것입니다.

4. 짧은 조건문

조건문은 JavaScript가 코드에서 결정을 내리는 데 사용하는 문입니다. 짧은 조건에는 &&(및), II(또는) 및 삼항 연산자가 포함됩니다. 이들은 조건과 if/else 문에 대한 더 짧은 표현입니다.

다음 예제에서는 삼항 연산자를 사용하는 방법을 보여 줍니다.

if/else 문이 있는 코드:

function openingTime(day) { if (day == SUNDAY) { return 12; } else { return 9; } }

삼항 연산자를 사용한 코드:

function openingTime(day) { return day == SUNDAY? 12: 9; }

짧은 조건문에 특히 중점을 두고 다양한 유형의 조건문에 대해 알아보세요. 이들은 React에서 널리 사용됩니다.

5. 템플릿 리터럴

템플릿 리터럴은 백틱(“)을 사용하여 문자열을 정의합니다. 템플릿 리터럴을 사용하면 문자열 데이터를 조작하여 보다 동적으로 만들 수 있습니다. 태그가 지정된 템플릿 리터럴을 사용하면 문자열 내에서 작업을 수행할 수 있습니다. 이들은 조건과 if/else 문에 대한 더 짧은 표현입니다.

예를 들어:

let firstName = "Jane";

let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`; // Welcome Jane Doe!

6. 확산 연산자

Spread 연산자(…)는 개체 또는 배열의 값을 다른 개체 또는 배열에 복사합니다. 구문은 세 개의 점과 변수 이름으로 구성됩니다. 예를 들어 (…이름). 두 배열 또는 객체의 속성을 병합합니다.

다음 예제에서는 스프레드 연산자를 사용하여 한 변수의 값을 다른 변수에 복사하는 방법을 보여줍니다.

const names = ['Mary', 'Jane'];

const groupMembers = ['Fred',. ..names, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]

스프레드 연산자를 사용하여 여러 작업을 수행할 수 있습니다. 여기에는 배열의 내용 복사, 다른 배열에 배열 삽입, 중첩 배열 액세스, 배열을 인수로 전달 등이 포함됩니다. 구성 요소의 상태 변경을 처리하기 위해 ReactJS의 스프레드 연산자를 사용할 수 있습니다.

왜 ReactJS를 배워야 할까요?

ReactJS가 인기 있는 데는 그만한 이유가 있습니다. 학습 곡선이 짧고 안정적이며 DOM에 빠르게 렌더링됩니다. 독립 실행형 구성 요소를 지원하고 훌륭한 디버깅 도구가 있습니다.

ReactJS는 ECMAScript 6(ES6)의 새로운 JavaScript 개념을 통합합니다. JavaScript의 기본 개념을 배우면 ReactJS에서 프로젝트를 더 쉽게 개발할 수 있습니다.

무엇보다도 ReactJS에는 지속적으로 새로운 업데이트를 릴리스하는 훌륭한 커뮤니티가 있습니다. JavaScript 라이브러리를 배우고 싶다면 ReactJS가 좋은 선택이 될 것입니다. Next.js 프레임워크는 ReactJS의 한계를 보완합니다. 이 둘의 조합은 ReactJS를 강력한 프런트 엔드 라이브러리로 만듭니다.