(입문자 필독)프론트엔드 개발을 위한 자바스크립트 기초 가이드

아래에  설명한 자바스크립트 기초 개념들은 React에만 한정된 것이 아니라 Vue, Svelte, Angular 등 대부분의 프론트엔드 프레임워크에서 공통적으로 쓰입니다.
즉, 프레임워크에 관계없이 반드시 익혀야 할 자바스크립트 기초입니다.

React 연관 자바스크립트 기초개념 정리 (입문자 필독)

React를 제대로 배우려면 자바스크립트의 기본 개념을 먼저 확실히 익혀야 합니다. 이 글에서는 React에서 실질적으로 자주 사용하는 자바스크립트 개념들을 정리하고, 각 개념이 어떻게 React와 연결되는지도 함께 설명합니다.

변수 선언 (Variables)

자바스크립트에서는 변수를 선언할 때 var, let, const 세 가지 키워드를 사용합니다.

• var: 함수 스코프를 가지며, 재선언과 재할당이 모두 가능합니다. 하지만 호이스팅 문제로 인해 ES6 이후 거의 사용되지 않습니다.
• let: 블록 스코프를 가지며, 값을 변경할 수 있는 변수를 선언할 때 사용합니다.
• const: 블록 스코프이며, 값을 변경할 수 없는 상수를 선언할 때 사용합니다. 다만 객체나 배열의 경우에는 내부 속성은 변경 가능합니다.

React에서는 기본적으로 const 사용을 권장하며, 상태(state)나 함수 선언에도 주로 const를 사용합니다.

const name = "Alice";  // 변경되지 않는 값
let count = 0;         // 상태 값 증가용 등 변경 가능한 값

데이터 타입 (Data Types)

자바스크립트는 동적 타입 언어로, 변수에 어떤 타입의 값이든 저장할 수 있습니다.

• 원시 타입 (Primitive)
  String, Number, Boolean, undefined, null, Symbol, BigInt
• 참조 타입 (Reference)
  Object, Array, Function 등. React에서는 props, state, 함수 등이 대부분 참조 타입입니다.

 React에서는 객체와 배열의 불변성 관리가 중요하기 때문에, 값을 직접 변경하지 않고 복사본을 만들어 처리하는 패턴을 자주 사용합니다.

const user = { name: "Alice", age: 25 };
const fruits = ["Apple", "Banana"];

함수 (Functions)

함수는 코드를 재사용할 수 있게 해주는 가장 기본적인 단위입니다.

• 함수 선언식
• function greet(name) { return `Hello, ${name}`; }
• 화살표 함수 (Arrow Function)
  간결하게 함수를 표현할 수 있고, 특히 this 바인딩이 다릅니다. React 컴포넌트, 이벤트 핸들러, 콜백 등에 자주 사용됩니다.
• const greet = (name) => `Hello, ${name}`;

함수는 React 컴포넌트 자체이기도 하며, 이벤트 핸들러나 useEffect 등에서 필수적으로 사용됩니다.

조건문 (If / Switch)

조건문은 조건에 따라 UI를 다르게 보여줄 때 필수입니다.

if (isLoggedIn) {
  return <Dashboard />;
} else {
  return <Login />;
}

또는 JSX 내 삼항 연산자 형태로도 자주 사용됩니다:

{isLoggedIn ? <Dashboard /> : <Login />}

switch 문은 드물지만 라우팅 처리를 수동으로 구현하거나 복잡한 조건 분기를 처리할 때 사용됩니다.

반복문 (Loops)

JS의 for, while, forEach도 유용하지만, React에서는 주로 map()을 사용해 JSX를 반복 렌더링합니다.

const fruits = ["Apple", "Banana", "Cherry"];
return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

 배열 반복 시 key 값을 지정해주는 것이 매우 중요합니다. 렌더링 효율성과 관련이 있습니다.

배열 (Arrays)

배열은 리스트 데이터를 다룰 때 사용됩니다. React에서는 리스트를 렌더링하거나, 여러 데이터를 묶어서 상태로 관리할 때 자주 사용됩니다.

let items = ["item1", "item2"];
items.push("item3");         // 원본 변경
let newItems = [...items];   // 원본 복사

React에서는 배열의 불변성을 유지하는 방식(push 대신 spread) 을 권장합니다.

객체 (Objects)

객체는 key-value 쌍으로 구성된 자료 구조입니다. props, state, useState, useEffect 모두 객체를 다루는 구조입니다.

const user = {
  name: "Alice",
  age: 25,
  greet: () => console.log("Hello"),
};

컴포넌트 간 데이터를 주고받을 때 객체 형태로 전달하는 경우가 많기 때문에 객체 구조 분해(destructuring) 를 이해하는 것이 중요합니다.

클로저 (Closures)

함수 내부에서 외부 함수의 변수에 접근할 수 있는 구조입니다.

function createCounter() {
  let count = 0;
  return () => {
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

React에서 이벤트 핸들러나 커스텀 훅을 만들 때 이 개념이 자주 등장합니다. 예: useCallback, useState 내부 구조 등

비동기 처리 (Async / Await, Promise)

React에서 서버로부터 데이터를 불러올 때 비동기 처리가 기본입니다.

async function fetchUser() {
  const res = await fetch("/api/user");
  const data = await res.json();
  console.log(data);
}

useEffect 내부에서 async 함수를 사용할 경우, 비동기 함수는 별도로 선언해서 호출하는 것이 좋습니다.

이벤트 (Events)

DOM 요소에서 이벤트를 처리하는 방식과 거의 같지만, React에서는 addEventListener 대신 JSX 속성으로 처리합니다.

function handleClick() {
  alert("클릭됨!");
}

<button onClick={handleClick}>Click Me</button>

이벤트 객체는 자동으로 첫 번째 인자로 전달되며, 필요시 (e) => {...} 형식으로 접근합니다.

ES6+ 주요 문법 (React 작성 필수 문법)

• 템플릿 리터럴: 문자열 보간
• const name = "Alice"; const message = `Hello, ${name}`;
• 구조 분해 할당: 객체나 배열을 쉽게 분해
• const { name, age } = props;
• spread 연산자: 복사 및 합성
• const newUser = { ...user, age: 30 };
• map / filter / reduce: 배열 처리의 핵심
• const filtered = items.filter(item => item.active);

이 문법들은 JSX와 함께 쓰이는 경우가 많기 때문에 반드시 손에 익혀야 합니다.

단계 요약

• 변수 선언은 const와 let 위주로 사용, var는 피함
• 함수는 선언식보다 화살표 함수를 많이 사용
• JSX에서 조건문은 삼항 연산자를 주로 활용
• 배열의 반복은 .map()으로 처리하고 key 지정 필요
• 객체와 배열은 직접 변경하지 않고 불변성 유지가 핵심
• 비동기 처리에서는 async/await을 기본으로 사용
• 이벤트 핸들러는 JSX 속성으로 작성
• ES6+ 문법(템플릿 리터럴, 구조 분해, spread 등)은 React에 반드시 필요

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.