React를 시작하기 전에 배워야 할 필수 JavaScript 개념

React는 실제 애플리케이션을 구축하는 데 사용되는 인기 있는 Javascript 라이브러리입니다. 능숙한 React 개발자가 되려면 몇 가지 기본적인 Javascript 개념을 이해하는 것이 중요합니다. 많은 사람들에게 React를 배우는 것이 어려워 보일 수 있지만 이러한 기본 개념을 이해하면 학습 과정이 쉬워질 수 있습니다.
이 글에서는 모든 개발자가 React를 시작하기 전에 알아야 할 15가지 필수 개념을 다룰 것입니다. 각 개념은 예를 들어 설명되어 중요성을 보여줍니다.
방금 React를 시작했거나 라이브러리를 탐색하려는 경우 이 기사가 도움이 됩니다.

15가지 필수 JavaScript 개념

1.콜백 기능
함수는 코드를 반복 없이 여러 번 호출할 수 있게 해주는 모든 프로그램의 구성 요소입니다.
함수 유형 중 하나는 콜백 함수입니다.
정보가 표시되기 전에 사용자가 브라우저에서 화살표를 클릭하도록 하거나 API에서 데이터 가져오기가 완료된 직후 일부 코드가 실행되도록 하려면 콜백의 기능을 활용할 수 있습니다.
콜백 함수는 함수나 이벤트가 발생한 후에 작업을 수행하고 함수 실행을 제어할 수 있습니다.
다른 함수에 인수로 전달되는 함수이며 비동기 작업이나 이벤트가 완료된 후 어떤 일이 발생해야 하는지 지정하는 데 사용됩니다.

예

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

2.화살표 기능
Arrow Functions는 ES6에서 도입되었으며 함수 구문을 보다 간결하게 작성할 수 있게 해줍니다. 화살표 함수는 간결성 때문에 React에서 널리 사용됩니다.

예

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

3.Array.Map() 메서드
기존 배열을 변경하면 불필요한 버그와 성능 문제가 발생할 수 있으므로 React에서는 일반적으로 권장되지 않습니다. 이러한 이유로 개발자는 배열 방법을 사용합니다. 함수형 배열 메서드는 원래 배열을 변경하지 않고 기존 배열에서 새 배열을 반환합니다.
함수형 배열 메서드 중 하나는 Array.map() 메서드입니다.
Array.map() 메소드는 기존 배열을 반복하고 동일한 길이의 새 배열을 반환합니다. 기존 어레이에 영향을 주지 않고 새 어레이를 변경할 수 있습니다.

예

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

4.Array.Filter() 메서드
Array.filter() 메서드는 흥미롭고 논리적인 방식으로 작동합니다. 이러한 메서드를 사용하면 true 또는 false 조건에 따라 배열의 일부 요소를 필터링할 수 있습니다.
명령문이 거짓이면 자동으로 필터링되고, 참이면 배열에서 원하지 않는 요소를 제거하는 데 적합한 접근 방식이 됩니다.

예

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

5.Array.reduce() 메서드
이름에서 알 수 있듯이 array.reduce() 메서드는 전체 배열을 단일 값으로 축소합니다. 이는 배열의 요소를 합산하거나 그룹화하는 가장 좋은 방법 중 하나입니다.

Reduce 방법의 3가지 중요한 키워드

• 초기 값(선택 사항): 누산기의 시작 값입니다. 제공하지 않을 경우 첫 번째 배열 요소가 초기값으로 사용되고, 두 번째 요소부터 반복이 시작됩니다.
• 누산기(필수):이전 반복에서 누적된 결과입니다.
• 현재 값(필수): 현재 처리 중인 요소

예

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

6.템플릿 리터럴
템플릿 리터럴을 사용하면 문자열에 Javascript 변수나 JavaScript 표현식이 포함될 수 있습니다.
중괄호 ${}와 함께 백틱 및 달러를 사용하여 JavaScript에서 문자열을 생성하는 간단한 접근 방식을 제공합니다.

예

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

7.삼항 연산자
삼항 연산자는 if..else 문을 간단하고 간결하게 작성하는 방법을 제공하는 조건 연산자입니다.
React에서는 if..else 문이 React에 존재하는 JSX라는 구문 표현에 적합하지 않아 직접 지원하지 않습니다.
JSX는 Javascript, CSS 및 React 구성 요소를 HTML에 포함할 수 있는 JavaScript의 구문 확장입니다.
React 구문은 명령문보다는 표현식으로 간주되며 삼항이 이에 적합한 연산자 역할을 합니다.

예

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

8.단락 및 논리 연산자
논리 연산자는 여러 조건을 단일 표현식으로 결합하는 데 사용됩니다. JavaScript에 존재하는 주요 논리 연산자는 다음과 같습니다.

• AND- 두 피연산자가 모두 true인 경우에만 true를 반환합니다.
• OR- 하나 이상의 피연산자가 true인 경우 true를 반환합니다.
• NOT- 피연산자의 실제 값을 반전시키지 마세요..

단락은 전체 표현식의 결과가 첫 번째 피연산자에 의해서만 결정될 수 있기 때문에 특정 조건에서 두 번째 피연산자가 평가되지 않는 논리 연산자에서 발생하는 동작입니다.

단락이 작동하는 방식

그리고(&&)

• 첫 번째 피연산자가 false이면 전체 표현식이 false이므로 두 번째 피연산자는 평가되지 않습니다.
• 첫 번째 피연산자가 true이면 두 번째 피연산자를 평가하여 반환될 값을 결정합니다.

또는(||)

• 첫 번째 피연산자가 true이면 전체 표현식이 true이므로 두 번째 피연산자는 평가되지 않습니다.
• 피연산자가 false인 경우 두 번째 피연산자를 평가하여 반환할 값을 결정합니다.

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

9.RestSpread 연산자
기존 배열에 새 속성을 추가하거나 기존 배열 그룹을 병합하려는 경우 스프레드 연산자가 적합한 연산자입니다.
점 3개로 표시된 확산 연산자 (...)는 배열을 개별 요소로 확장하며 배열의 시작 부분에 사용됩니다. 다음과 같은 용도로 사용됩니다.

• 배열 병합

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• 배열 복사

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

• 기존 배열에 새 속성 추가

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

• 함수에 인수 전달

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

나머지 연산자(...)도 점 3개로 표시되지만 배열의 끝에 씁니다. 구조 해제된 객체/배열에서 여러 속성을 수집하는 데 사용됩니다.

예

Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `

10.선택적 연결
선택적 연결은 null 또는 정의되지 않은 값을 쉽게 처리합니다. 이는 체인에서 null이거나 정의되지 않은 것으로 나타나는 속성이나 중간 속성에 액세스하는 데 사용됩니다. 자동으로 단락되어 정의되지 않은 상태로 렌더링됩니다. 이상적으로는 선택적 체이닝이 없으면 오류가 반환됩니다.
어떤 경우에는 객체에 모든 값이 존재하는지 확신할 수 없습니다. null 및 정의되지 않은 값을 검사하는 구문인 선택적 체이닝을 사용해 보세요.

const BookNumbers = 4;
const result = (BookNumbers % 2 === 0) ? "Even" : "Odd";
console.log(result); 
// Output: "Even"

11.배열 파괴
배열에서 여러 속성을 동시에 호출해야 하는 경우 코드가 번거로울 수 있습니다. 구조파괴를 통해 이를 방지할 수 있습니다.
구조 분해를 사용하면 배열의 값을 개별 변수로 조합할 수 있습니다.
구조 분해를 사용하여

• 요소 건너뛰기
• 네스트 요소
• 기본값을 설정합니다.

React를 시작하기 전에 무시해서는 안되는 필수 개념은 Destructuring입니다.

const idVerify = true;
const displayMessage = idVerify && "Identified";

console.log(displayMessage); 
// Output: "Identified"

12.불변 배열 작업
JavaScript에서 배열을 변경할 수 있습니다. 즉, 배열에서 속성을 추가, 제거 또는 업데이트할 수 있습니다.
그러나 React에서는 상태 무결성을 유지하고 React가 변경 사항을 감지할 수 있도록 하기 위해 불변성을 선호하는 경우가 많습니다. React에서 불변 배열을 사용하려면 맵, 필터, 스프레드 연산자와 같은 메소드를 사용하여 원본 배열을 변경하지 않고 배열의 항목을 추가, 삭제, 업데이트하는 것이 일반적입니다.

예

• 항목 추가

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

• 항목을 삭제하려면

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• 항목을 업데이트하려면

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

13.비동기/대기 기능
비동기 JavaScript는 완료하는 데 시간이 걸리는 작업이 수행되는 방식을 제어합니다. JavaScript는 동기식 언어입니다. 즉, 단일 스레드에서 코드를 차례로 실행합니다.
데이터베이스에서 데이터를 가져오는 경우 가져오기가 완료되기 전에 일부 코드를 로드해야 할 수도 있습니다.
비동기 기능을 사용하면 작업이 완료될 때까지 기다리지 않고 코드를 실행할 수 있으므로 사용자 경험과 전반적인 성능이 향상됩니다.
React에서는 애플리케이션 프로그래밍 인터페이스(API)를 자주 사용하게 되므로 이 기능이 어떻게 작동하는지 이해하는 것이 중요합니다.

예

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

14.약속
Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 내장 개체를 나타냅니다.
약속은 세 가지 상태 중 하나에 존재합니다:

• 보류 중: 이행도 거부도 아닌 초기 상태입니다.
• 이행됨: 작업이 성공적으로 완료되었습니다
• 거부됨: 작업에 오류가 발생했습니다.

Promise는 JavaScript에서 중요한 역할을 하기 때문에 배워야 할 중요한 개념입니다. 더욱 깔끔한 코드를 작성하고 오류를 체계적으로 처리하며 전반적인 성능을 향상시킬 수 있습니다.

15.try.catch.finally를 사용하여 오류 처리
데이터를 가져오는 동안 오류가 발생하여 이러한 버그를 찾거나 수정하는 방법을 고민하게 만드는 순간이 있습니다.
키워드를 사용하면 데이터 가져오기가 보다 구조화된 방식으로 처리됩니다.
Try..catch..finally 블록은 잠재적인 오류를 성공적으로 처리하고 오류 발생 여부에 관계없이 특정 코드가 실행되도록 하는 JavaScript의 강력한 오류 처리 구조입니다.
코드에서 특정 오류를 찾는 데 시간이 많이 걸릴 수 있습니다. 이 블록을 활용하면 쉬워집니다.

• Try- 오류가 발생할 수 있는 코드를 포함합니다.
• Catch - try 블록 내에서 오류가 발생하면 실행됩니다. 오류 객체를 인자로 받습니다.
• 마지막으로 - 오류 발생 여부와 상관없이 실행합니다.

예

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

결론

위에 설명된 필수 JavaScript 개념에 대한 통찰력을 얻으면 학습 과정이 쉬워지고 능숙한 React 개발자가 될 수 있습니다. 아직 이러한 개념을 배우지 않았다면 배우도록 노력하세요. 댓글 섹션에서 제안사항을 자유롭게 공유해 주세요!

위 내용은 React를 시작하기 전에 배워야 할 필수 JavaScript 개념의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!