리액트를 하기 전 자바스크립트를 공부해야 하는 이유

 

개인적으로 리액트를 상당히 좋아하는 편이다. 솔직히 내가 리액트를 좋아하게 된 계기는 로고가 예쁘고 퍼즐처럼 엮이는 모양새로 러닝커브는 쎄지만 한 번 구축해두면 재사용이 용이하고 무엇보다 문법이 예쁘기 때문이었다. (?). 가독성도 좋고, 조각조각 나있는 언어 구성이 아주 마음에 들었다.

 

그리고, 늘 리액트는 자바스크립트 기반의 라이브러리이기 때문에 바닐라 자바스크립트에 대해 잘 알아야 한다는 사실을 머릿속으로는 알면서도 막상 자바스크립트를 진지하게 공부할 생각을 하지 못했었다. 대충 위기 상황에 맞닥트리면 해결되지 않을까 안일하게 생각했던 것 같다. 그러다가 이번 이직 기회로 딥하게 공부할 기회가 되었는데, 막상 딥하게 들어가보니 정말 필요한 지식들이다. 과거 바닐라 JS로 프로젝트를 해보기도 했고 꽤 자신감이 있었는데 자바스크립트만의 특징 조차 제대로 읊지 못하는 것을 보니 이거 참 잘못해왔구나 뼈저리게 느끼는 요즘이다.

 

아무튼 리액트를 배우기 전 자바스크립트를 제대로 알아야 하는 이유에 대해서 얘기해보겠다.

 

---

 

React는 JavaScript 라이브러리이기 때문에 React에 들어가기 전에 JavaScript를 잘 배워야 한다. React는 JavaScript 위에 구축되어 있으며 JavaScript 개념, 구문 및 기능에 크게 의존한다. 따라서, React를 배우기 전에 JavaScript를 잘 알아야 하는 몇 가지 이유는 다음과 같다.

 

1. React는 별도의 프로그래밍 언어가 아니라 JavaScript에서 사용자 인터페이스를 구축하기 위한 라이브러리이다.

React와 효과적으로 작업하려면 변수, 데이터 유형, 함수, 제어 흐름 등 JavaScript의 핵심 원리에 대한 확실한 이해가 필요하다.

 

2. React는 변수, 함수, 배열, 객체 등의 기본적인 JavaScript 개념을 활용한다.

React에서 구성요소를 만들고 조작하기 위해서는 이러한 기본적인 내용을 잘 파악해야 한다.

 

3. JSX(JavaScript XML) 활용의 중요성

JSX는 React에서 구성 요소 구조를 정의하는 데 사용되는 JavaScript의 구문 확장이다. HTML과 JavaScript가 혼합된 듯한 모양새이다. JSX를 효과적으로 사용하려면 JavaScript의 구문과 JSX 내에 표현식을 포함하는 방법을 이해해야 한다.

 

4. 데이터 핸들링

React는 데이터를 관리하고 표시하는 것이다. React 구성 요소에서 데이터를 효과적으로 처리하려면 배열 및 객체와 같은 JavaScript의 데이터 구조를 이해해야 한다.

 

5. 이벤트 핸들링

React의 Interactivity는 JavaScript Event Handling에 의존한다. 이벤트 리스너를 추가하고 이벤트를 처리하며 구성요소 상태를 업데이트하는 방법을 알아야 한다. 이 모든 것들은 기본적인 JavaScript를 기반으로 한 스킬이다.

 

6. Functions and Scope 이론 활용

React는 함수를 많이 사용하며, 함수 범위, 폐쇄 및 함수가 JavaScript에서 작동하는 방식을 이해하여 React 구성요소와 동작을 만들고 관리해야 한다.

 

7. 비동기

대부분의 React 프로그램은 API에서 데이터를 가져오거나 사용자 입력을 처리하는 등의 비동기 작업을 수반한다. 이러한 작업을 React에서 관리하려면 JavaScript의 비동기 기능(약속, 비동기/대기)을 잘 파악해야 한다.

 

8. 라이프사이클

React 구성요소에는 라이프사이클이 있으며 이를 효과적으로 관리하기 위해 JavaScript에서 작동하는 방식을 이해해야 한다.

 

9. 상태 관리

React의 상태는 구성 요소 내의 데이터 변경을 처리하는 데 아주 중요한 개념이다. JavaScript를 확실하게 이해하면 구성 요소 상태를 보다 효과적으로 관리할 수 있다.

 

10. 디버깅

React 프로그램에서 문제가 발생할 경우 코드 내 문제를 식별하고 해결하기 위한 JavaScript 디버깅 기술이 필요하다.

 

11. 성능 최적화

효율적이고 성능이 뛰어난 React 프로그램을 구축하려면 불필요한 렌더링 최소화 및 코드 실행 최적화와 같은 JavaScript 성능 고려사항을 이해해야 한다.

 

---

요약하자면, 리액트를 배우기 전에 자바스크립트를 잘 배우는 것은 집의 기초를 다지는 것과 같다. 자바스크립트는 엄청난 리액트의 기초가 된다. 자바스크립트를 먼저 마스터함으로써 리액트의 특징과 개념을 더 잘 이해하고 작업할 수 있는 능력을 갖추게 되어 탄탄한 기술력을 갖춘 리액트 개발자가 될 것이다.