TIL - React를 배우기 전에 JS 복습하기

다음 주 월요일부터 스파르타 코딩부트캠프에서 React를 배우게 되었는데 시스템이 분반으로 리액트 베이식-스탠더드-챌린지로 나뉘어있어서 리액트를 아예 처음 시작하지만 주말 동안 열심히 공부하면 되겠지 라는 생각으로 챌린지를 신청했습니다. 그래서 오늘은 리액트를 배우기 앞서 간단하게 리액트에서 자주 사용하는 JS 문법 복습하고자 했습니다.

 

리액트에서 많이 사용하는 배열 메서드

// map() 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 반환
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]

// filter() 주어진 함수로 구현된 조건에 맞는 요소로 새로운 배열을 생성
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

// reduce() 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

// sort() 배열의 요소를 적절한 순서로 정렬
const numbers = [3, 1, 5, 2, 4];

const sortedNumbers = [...numbers].sort();
console.log(sortedNumbers); // [1, 2, 3, 4, 5]

 

 

위 메서드들의 공통점은 map, filter, reduce는 새로운 배열을 반환하고 sort는 스프레드 연산자를 사용하여 배열을 복사해서 수정하면서 원본 배열의 데이터에 불변성을 유지하고 있습니다.

리액트에서 이렇게 불변성을 유지하는 것을 지향하는 이유

• 함수형 컴포넌트 - 함수형 컴포넌트는 상태를 변경하지 않고, 새로운 상태를 반환하는 방식으로 동작합니다. 이는 함수형 프로그래밍의 핵심 원칙인 불변성을 강조하는 방식과 일치합니다.
• 성능 최적화 - 액트는 Virtual DOM을 사용하여 UI를 업데이트하는데, 이는 변경된 부분만을 실제 DOM에 적용하여 성능을 향상시킵니다. 불변성을 유지하면 객체나 배열을 비교할 때 참조를 사용하여 빠르게 비교가 가능합니다.
• 예측 가능한 상태 관리 - 불변성을 유지하면 상태의 변화를 추적하기가 쉽습니다. 상태가 변경되면 항상 새로운 객체나 배열이 생성되기 때문에, 해당 상태가 어디서 변경되었는지 추적하기가 간단합니다.
• 예기치 않은 동작 방지 - 불변성을 유지하면 예기치 않은 동작이 발생할 가능성을 줄일 수 있습니다. 특히, 다수의 컴포넌트가 같은 상태를 공유할 때, 불변성을 유지함으로써 부작용을 방지할 수 있습니다.
• 디버깅 - 불변성을 유지하면 상태의 변경 이력을 추적하기가 쉽습니다.

그 밖에도 모던 JavaScript 튜토리얼를 빠르게 1회독 하면서 특히 구조 분해, 스프레드 연산자, 논리 연산자, 비동기 처리(Promise, then, async, await)에 집중적으로 공부하고 리액트 공식 문서의 튜토리얼을 읽고 어떻게 흘러가는지 느낌을 알아 봤습니다.