SH's Devlog

[React] 이벤트 처리하기 - 이벤트 핸들링과 SyntheticEvent

seunghwaan — Thu, 9 Apr 2026 12:17:20 +0900

React 이벤트 처리하기

-> 이벤트 핸들링과 SyntheticEvent

이번에는 React에서 사용자의 행동에 반응하는 방법인 이벤트(Event)와 이벤트 핸들링(Event Handling)에 대해 알아보겠습니다.

지금까지 React 컴포넌트를 만들고 Props를 통해 데이터를 전달했다면, 이번에는 사용자가 버튼을 클릭하거나 마우스를 움직이는 등의 행동에 따라 특정 기능을 실행하는 방법을 살펴보겠습니다.

1. 이벤트(Event)란?

이벤트란 웹 페이지 내부에서 발생하는 사용자의 행동이나 특정 상황을 의미합니다.

대표적인 이벤트는 다음과 같습니다.

버튼 클릭
마우스 이동
마우스 진입
키보드 입력
메시지 입력
스크롤
폼 제출

예를 들어 사용자가 버튼을 클릭하면 클릭 이벤트가 발생합니다.

사용자 버튼 클릭
       ↓
클릭 이벤트 발생
       ↓
React에서 이벤트 처리
       ↓
특정 동작 실행

2. 이벤트 핸들링(Event Handling)이란?

이벤트 핸들링이란 이벤트가 발생했을 때 그 이벤트에 대한 동작을 처리하는 것을 의미합니다.

예를 들어 다음과 같은 동작들이 이벤트 핸들링입니다.

버튼 클릭 시 콘솔에 메시지 출력
버튼 클릭 시 경고창 표시
입력창에 값을 입력하면 데이터 변경
마우스를 올리면 특정 UI 표시
스크롤하면 추가 데이터 불러오기

간단한 예를 들면 다음과 같습니다.

버튼 클릭
   ↓
클릭 이벤트 발생
   ↓
"버튼이 클릭되었습니다." 출력

React에서는 JSX 태그에 이벤트 속성을 추가하여 이벤트를 처리할 수 있습니다.

3. onClick 이벤트 사용하기

버튼을 클릭했을 때 특정 코드를 실행하려면 onClick을 사용할 수 있습니다.

예를 들어 Button 컴포넌트를 다음과 같이 작성할 수 있습니다.

const Button = ({ children, text, color = 'black' }) => {
  return (
    <button
      onClick={() => {
        console.log(`${text} 버튼이 클릭되었습니다.`);
      }}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

여기서 중요한 부분은 다음 코드입니다.

onClick={() => {
  console.log(`${text} 버튼이 클릭되었습니다.`);
}}

사용자가 버튼을 클릭하면 onClick에 전달된 함수가 실행됩니다.

예를 들어 다음 버튼이 있다고 가정해 보겠습니다.

<Button text="메일" />

버튼을 클릭하면 콘솔에 다음과 같이 출력됩니다.

메일 버튼이 클릭되었습니다.

4. 이벤트 핸들러를 별도의 함수로 만들기

이벤트가 발생했을 때 실행할 코드가 많아지면 JSX 내부에 모든 코드를 작성하기보다는 별도의 함수로 분리하는 것이 좋습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const Button = ({ children, text, color = 'black' }) => {
  const onClickButton = () => {
    console.log(text);
  };

  return (
    <button
      onClick={onClickButton}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

onClickButton처럼 이벤트가 발생했을 때 실행되는 함수를 이벤트 핸들러(Event Handler)라고 합니다.

흐름은 다음과 같습니다.

사용자 버튼 클릭
       ↓
onClick 이벤트 발생
       ↓
onClickButton 함수 실행
       ↓
console.log(text)

5. 함수는 실행하지 않고 전달해야 한다

React에서 이벤트 핸들러를 등록할 때 중요한 점이 있습니다.

다음과 같이 함수 이름만 전달해야 합니다.

onClick={onClickButton}

다음과 같이 작성하면 안 됩니다.

onClick={onClickButton()}

두 코드의 차이는 다음과 같습니다.

올바른 방법

onClick={onClickButton}

함수 자체를 onClick에 전달합니다.

따라서 버튼을 클릭했을 때 함수가 실행됩니다.

잘못된 방법

onClick={onClickButton()}

컴포넌트가 렌더링되는 과정에서 onClickButton() 함수를 바로 실행한 결과를 onClick에 전달하게 됩니다.

따라서 이벤트가 발생했을 때 실행할 함수를 전달하는 목적과 맞지 않습니다.

정리하면 다음과 같습니다.

이벤트 핸들러를 전달할 때는 함수 이름만 작성한다.

onClick={함수이름}

6. 화살표 함수를 이용하여 이벤트 처리하기

이벤트 핸들러에 직접 화살표 함수를 작성하는 방법도 있습니다.

<button
  onClick={() => {
    console.log('버튼이 클릭되었습니다.');
  }}
>
  버튼
</button>

또는 Props와 함께 사용할 수도 있습니다.

<button
  onClick={() => {
    console.log(`${text} 버튼이 클릭되었습니다.`);
  }}
>
  {text}
</button>

이 방법은 간단한 이벤트 처리에 편리합니다.

다만 이벤트 처리 로직이 길어지면 별도의 함수로 분리하는 것이 코드의 가독성 측면에서 좋습니다.

7. 다른 이벤트도 사용할 수 있다

React에서는 onClick 외에도 다양한 이벤트를 처리할 수 있습니다.

예를 들어 마우스가 요소 위로 들어왔을 때는 onMouseEnter를 사용할 수 있습니다.

const Button = ({ text }) => {
  const onMouseEnterButton = () => {
    console.log(`${text} 버튼에 마우스가 올라갔습니다.`);
  };

  return (
    <button onMouseEnter={onMouseEnterButton}>
      {text}
    </button>
  );
};

이벤트 속성의 이름은 React에서 camelCase 형태로 작성합니다.

예를 들면 다음과 같습니다.

이벤트React 이벤트 속성

클릭	onClick
마우스 진입	onMouseEnter
마우스 이동	onMouseMove
키 입력	onKeyDown
값 변경	onChange
폼 제출	onSubmit

8. SyntheticEvent란?

React에서 이벤트를 처리할 때 이벤트 핸들러의 매개변수를 통해 이벤트 객체를 전달받을 수 있습니다.

const onClickButton = (e) => {
  console.log(e);
};

그리고 이벤트 핸들러를 연결합니다.

<button onClick={onClickButton}>
  버튼
</button>

버튼을 클릭하면 e에 이벤트 관련 정보가 전달됩니다.

React에서는 이러한 이벤트 객체를 일반적으로 SyntheticEvent(합성 이벤트)라고 합니다.

예를 들어 다음과 같이 사용할 수 있습니다.

const Button = ({ children, text, color = 'black' }) => {
  const onClickButton = (e) => {
    console.log(e);
    console.log(text);
  };

  return (
    <button
      onClick={onClickButton}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

여기서 e는 클릭 이벤트가 발생했을 때 React가 전달해 주는 이벤트 객체입니다.

9. SyntheticEvent를 사용하는 이유

웹 브라우저에는 다양한 종류가 있습니다.

대표적으로 다음과 같은 브라우저가 존재합니다.

Chrome
Safari
Edge
Firefox
Whale
Opera

과거에는 브라우저마다 JavaScript 이벤트를 처리하는 방식이나 이벤트 객체의 동작에 차이가 있어 같은 코드를 작성해도 브라우저에 따라 다르게 동작하는 문제가 발생할 수 있었습니다.

이러한 문제를 크로스 브라우징(Cross Browsing) 이슈라고 합니다.

React는 브라우저의 기본 이벤트를 그대로 사용하는 대신, 브라우저 간 차이를 일관된 방식으로 다룰 수 있도록 SyntheticEvent라는 React의 이벤트 시스템을 제공합니다.

개발자는 일반적으로 React가 제공하는 동일한 이벤트 API를 사용하여 이벤트를 처리할 수 있습니다.

구조를 간단하게 표현하면 다음과 같습니다.

Chrome   Safari   Edge   Firefox
    │        │       │       │
    └────────┴───────┴───────┘
                 │
          브라우저 이벤트 차이
                 ↓
       React SyntheticEvent 시스템
                 │
                 ↓
         일관된 방식으로 처리

따라서 여러 브라우저의 차이를 개발자가 각각 직접 고려하는 부담을 줄일 수 있습니다.

참고로 브라우저별 이벤트 객체의 속성 이름이 단순히 target, ETarget처럼 서로 다르다는 식으로 이해하기보다는, 브라우저별 이벤트 API의 구현과 동작 차이를 React가 정규화해 일관된 인터페이스를 제공한다고 이해하는 것이 더 정확합니다.

10. 이벤트 객체에서 확인할 수 있는 값

이벤트 객체에는 이벤트가 발생한 요소와 이벤트 종류 등 다양한 정보가 포함되어 있습니다.

예를 들어 다음과 같이 확인할 수 있습니다.

const onClickButton = (e) => {
  console.log(e);
  console.log(e.target);
};

e.target을 통해 이벤트가 발생한 대상 요소를 확인할 수 있습니다.

사용자가 Button 클릭
         ↓
이벤트 발생
         ↓
onClickButton(e)
         ↓
e.target 확인
         ↓
이벤트가 발생한 요소 확인

이벤트 객체를 활용하면 클릭한 요소의 정보나 입력값 등 다양한 이벤트 정보를 처리할 수 있습니다.

11. 전체 코드 정리

지금까지 작성한 Button 컴포넌트를 정리하면 다음과 같습니다.

const Button = ({ children, text, color = 'black' }) => {
  const onClickButton = (e) => {
    console.log(e);
    console.log(`${text} 버튼이 클릭되었습니다.`);
  };

  return (
    <button
      onClick={onClickButton}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

버튼을 클릭하면 다음 과정으로 동작합니다.

Button 클릭
    ↓
onClick 이벤트 발생
    ↓
onClickButton 실행
    ↓
이벤트 객체 e 전달
    ↓
이벤트 관련 정보 및 text 출력

마무리

이번에는 React에서 사용자의 행동을 처리하는 이벤트 핸들링에 대해 알아보았습니다.

정리하면 다음과 같습니다.

이벤트는 웹 페이지에서 발생하는 사용자의 행동이나 특정 상황을 의미한다.
버튼 클릭, 입력, 스크롤, 마우스 이동 등이 이벤트에 해당한다.
이벤트 핸들링은 이벤트가 발생했을 때 특정 동작을 처리하는 것이다.
React에서는 onClick, onChange, onMouseEnter 등의 이벤트 속성을 사용한다.
이벤트 핸들러는 onClick={onClickButton}처럼 함수 자체를 전달해야 한다.
onClick={onClickButton()}처럼 함수를 즉시 실행하면 안 된다.
간단한 로직은 화살표 함수로 직접 작성할 수 있다.
이벤트 처리 로직이 길어지면 별도의 함수로 분리하는 것이 좋다.
React는 브라우저 이벤트를 일관된 방식으로 다룰 수 있도록 SyntheticEvent 시스템을 제공한다.
이벤트 핸들러의 매개변수 e를 통해 이벤트 관련 정보를 확인할 수 있다.

이벤트 핸들링을 배우면 이제 React 화면에 사용자의 행동을 반영할 수 있습니다.

다음 단계에서는 이벤트와 함께 React의 핵심 개념인 State(상태)를 사용하여, 버튼 클릭과 같은 사용자 행동에 따라 화면의 데이터를 변경하고 다시 렌더링하는 방법을 알아볼 수 있습니다.

[React] React Props로 데이터 전달하기

seunghwaan — Tue, 7 Apr 2026 12:52:43 +0900

React Props로 데이터 전달하기

이번에는 React에서 컴포넌트에 데이터를 전달하는 방법인 Props에 대해 알아보겠습니다.

React는 하나의 페이지를 여러 개의 컴포넌트로 나누고, 이를 조합하여 화면을 만드는 방식으로 동작합니다.

마치 레고 블록을 여러 개 조립해서 하나의 완성된 결과물을 만드는 것과 비슷합니다.

이때 같은 형태의 컴포넌트라도 전달하는 데이터에 따라 서로 다른 화면을 보여줄 수 있습니다.

예를 들어 여러 개의 Button 컴포넌트가 있다고 가정해 보겠습니다.

[메일]

[카페]

[블로그]

각 버튼의 구조는 같지만 버튼마다 표시되는 텍스트나 색상은 다를 수 있습니다.

이처럼 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 값을 React에서는 Props(Properties)라고 합니다.

1. Props란?

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터입니다.

예를 들어 App 컴포넌트에서 Button 컴포넌트를 사용한다고 가정해 보겠습니다.

<Button text="메일" color="red" />

여기서 Button 컴포넌트에 전달한 값은 다음과 같습니다.

text: 메일
color: red

이 값들은 Button 컴포넌트에서 Props로 전달받을 수 있습니다.

컴포넌트 관계를 그림으로 표현하면 다음과 같습니다.

         부모 컴포넌트
             App
              │
              │ Props 전달
              ▼
         자식 컴포넌트
           Button

즉, Props를 이용하면 다음과 같이 데이터를 전달할 수 있습니다.

부모 컴포넌트 → 자식 컴포넌트

Props는 React에서 컴포넌트를 재사용할 수 있도록 해주는 핵심 기능 중 하나입니다.

2. Props는 객체 형태로 전달된다

컴포넌트에 여러 개의 Props를 전달하면 자식 컴포넌트에서는 이를 하나의 객체 형태로 받을 수 있습니다.

예를 들어 부모 컴포넌트에서 다음과 같이 작성합니다.

<Button text="메일" color="red" />

자식 컴포넌트에서는 props라는 매개변수로 전달받을 수 있습니다.

const Button = (props) => {
  console.log(props);

  return (
    <button style={{ color: props.color }}>
      {props.text} - {props.color}
    </button>
  );
};

export default Button;

console.log(props)를 출력하면 대략 다음과 같은 객체 형태를 확인할 수 있습니다.

{
  text: '메일',
  color: 'red'
}

따라서 각각의 값은 객체의 프로퍼티를 통해 사용할 수 있습니다.

props.text

props.color

3. 구조 분해 할당으로 Props 사용하기

매번 props.text, props.color처럼 작성할 수도 있지만, JavaScript의 구조 분해 할당을 사용하면 조금 더 간결하게 작성할 수 있습니다.

const Button = ({ text, color }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color}
    </button>
  );
};

다음 코드는,

const Button = (props) => {
  const text = props.text;
  const color = props.color;
};

와 비슷한 의미입니다.

구조 분해 할당을 사용하면 필요한 Props를 바로 꺼내서 사용할 수 있습니다.

4. Props의 기본값 설정하기

Button 컴포넌트에 color를 전달하지 않았다고 가정해 보겠습니다.

<Button text="카페" />

이 경우 color는 undefined가 됩니다.

하지만 기본 색상을 지정해 두면 color를 전달하지 않았을 때 자동으로 기본값을 사용할 수 있습니다.

구조 분해 할당에서 다음과 같이 기본값을 설정합니다.

const Button = ({ text, color = 'black' }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
    </button>
  );
};

이제 다음과 같이 color를 전달하면 전달한 값을 사용합니다.

<Button text="메일" color="red" />

결과는 다음과 같습니다.

메일 - RED

반면 color를 전달하지 않으면 기본값인 black이 사용됩니다.

<Button text="카페" />

결과는 다음과 같습니다.

카페 - BLACK

참고: 기존의 defaultProps 방식

과거에는 함수 컴포넌트의 기본 Props를 다음과 같이 설정하기도 했습니다.

Button.defaultProps = {
  color: 'black',
};

하지만 현재 함수 컴포넌트에서는 JavaScript의 기본 매개변수와 구조 분해 할당을 사용하는 방식이 일반적입니다.

따라서 다음과 같이 작성하는 것이 간단합니다.

const Button = ({ color = 'black' }) => {
  // ...
};

5. 여러 개의 Props를 전달하기

부모 컴포넌트에서 여러 개의 Button을 사용할 수 있습니다.

App.jsx를 다음과 같이 작성해 보겠습니다.

import Button from './components/Button';

function App() {
  return (
    <>
      <Button text="메일" color="red" />
      <Button text="카페" />
      <Button text="블로그" color="blue" />
    </>
  );
}

export default App;

모든 컴포넌트는 동일한 Button 컴포넌트를 사용하지만 전달되는 Props에 따라 서로 다르게 표시됩니다.

메일 - RED
카페 - BLACK
블로그 - BLUE

즉, 하나의 컴포넌트를 만들어 두고 Props만 다르게 전달하면 여러 상황에서 재사용할 수 있습니다.

이것이 React 컴포넌트를 사용하는 큰 장점 중 하나입니다.

6. Spread 연산자로 Props 전달하기

Props가 많아지면 하나씩 전달하는 것이 번거로울 수 있습니다.

예를 들어 다음과 같은 객체가 있다고 가정해 보겠습니다.

const buttonProps = {
  text: '메일',
  color: 'red',
  a: 1,
  b: 2,
  c: 3,
};

이 객체의 값을 하나씩 전달하면 다음과 같이 작성해야 합니다.

<Button
  text={buttonProps.text}
  color={buttonProps.color}
  a={buttonProps.a}
  b={buttonProps.b}
  c={buttonProps.c}
/>

이때 **Spread 연산자(...)**를 사용할 수 있습니다.

<Button {...buttonProps} />

객체의 프로퍼티가 각각 Props로 전달됩니다.

즉, 위 코드는 다음과 같은 의미입니다.

<Button
  text="메일"
  color="red"
  a={1}
  b={2}
  c={3}
/>

Spread 연산자 사용 예제

App.jsx를 다음과 같이 작성할 수 있습니다.

import Button from './components/Button';

function App() {
  const buttonProps = {
    text: '메일',
    color: 'red',
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <>
      <Button {...buttonProps} />
      <Button text="카페" />
    </>
  );
}

export default App;

buttonProps 객체에 있는 값들이 Button 컴포넌트의 Props로 전달됩니다.

다만 실제로 컴포넌트에서 사용하지 않는 Props까지 무조건 전달하는 방식은 피하는 것이 좋습니다.

필요한 데이터가 명확할 때 사용하는 것이 코드의 가독성과 유지보수에 도움이 됩니다.

7. 컴포넌트 사이에 작성한 요소도 전달할 수 있다

Props는 태그의 속성으로 전달하는 값만 있는 것이 아닙니다.

컴포넌트의 시작 태그와 종료 태그 사이에 작성한 요소도 전달할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

<Button text="블로그">
  <Header />
  <div>자식 요소</div>
</Button>

Button 태그 사이에 작성된 요소는 특별한 Props인 **children**으로 전달됩니다.

children 사용하기

Button 컴포넌트에서 children을 전달받습니다.

const Button = ({ children, text, color = 'black' }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

이제 Button 컴포넌트 내부의 {children} 위치에 부모에서 전달한 내용이 렌더링됩니다.

예를 들어,

<Button text="블로그">
  <Header />
  <div>자식 요소</div>
</Button>

다음 부분이,

<Header />
<div>자식 요소</div>

children으로 전달됩니다.

그리고 Button 내부에서 다음 코드가 이를 화면에 표시합니다.

{children}

8. Props와 children의 관계

Props와 children을 함께 사용하면 다음과 같은 구조가 됩니다.

App
 │
 ├── text, color ──────────────┐
 │                              ▼
 │                          Button
 │                              │
 │
 └── <Header />, <div> ──── children
                                │
                                ▼
                             화면 렌더링

예를 들어 다음과 같습니다.

<Button text="블로그" color="blue">
  <Header />
  <div>자식 요소</div>
</Button>

전달되는 Props를 객체 형태로 생각하면 대략 다음과 같습니다.

{
  text: '블로그',
  color: 'blue',
  children: [
    <Header />,
    <div>자식 요소</div>,
  ],
}

실제 React 내부 구조를 그대로 표현한 것은 아니지만, text, color와 마찬가지로 children도 컴포넌트가 전달받는 Props라는 개념으로 이해하면 됩니다.

9. 전체 코드 정리

App.jsx

import Button from './components/Button';
import Header from './components/Header';

function App() {
  const buttonProps = {
    text: '메일',
    color: 'red',
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <>
      <Button {...buttonProps} />

      <Button text="카페" />

      <Button text="블로그">
        <Header />
        <div>자식 요소</div>
      </Button>
    </>
  );
}

export default App;

Button.jsx

const Button = ({ children, text, color = 'black' }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

마무리

이번에는 React에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 Props에 대해 알아보았습니다.

정리하면 다음과 같습니다.

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 데이터이다.
자식 컴포넌트에서는 Props를 객체 형태로 전달받을 수 있다.
props.text와 같이 객체의 프로퍼티를 이용할 수 있다.
구조 분해 할당을 사용하면 Props를 간결하게 사용할 수 있다.
구조 분해 할당에서 기본값을 지정할 수 있다.
Spread 연산자(...)를 이용하면 객체의 값을 한 번에 Props로 전달할 수 있다.
컴포넌트 태그 사이에 작성한 요소는 children Props로 전달된다.
자식 컴포넌트에서는 {children}을 통해 전달받은 요소를 렌더링할 수 있다.

React에서는 하나의 컴포넌트를 만들어 두고 Props를 다르게 전달함으로써 다양한 형태의 UI를 만들 수 있습니다.

예를 들어 하나의 Button 컴포넌트를 만들어도 Props에 따라 서로 다른 버튼을 만들 수 있습니다.

<Button text="메일" color="red" />
<Button text="카페" color="green" />
<Button text="블로그" color="blue" />

이처럼 컴포넌트를 재사용하고, 필요한 데이터를 Props로 전달하는 것은 React의 매우 중요한 개발 방식입니다.

다음 단계에서는 Props와 함께 자주 사용되는 State(상태)를 이용해 사용자 동작에 따라 화면을 변경하는 방법을 알아보겠습니다.

[React] React JSX로 UI 표현하기

seunghwaan — Tue, 7 Apr 2026 12:52:36 +0900

React JSX로 UI 표현하기

-> JSX 문법과 주의사항, 스타일 적용 방법

이번에는 React에서 화면을 표현할 때 사용하는 JSX에 대해 알아보겠습니다.

React 컴포넌트에서는 JavaScript 함수 안에서 HTML과 비슷한 형태의 코드를 작성할 수 있습니다.

이러한 문법을 JSX라고 합니다.

1. JSX란?

JSX는 JavaScript Syntax Extension의 약자로, JavaScript를 확장한 문법입니다.

React에서는 JSX를 사용하여 JavaScript 코드 안에서 HTML과 비슷한 문법으로 UI를 표현할 수 있습니다.

예를 들어 일반적인 JavaScript 코드에서는 다음과 같이 작성합니다.

const Main = () => {
  return '<h1>main</h1>'
}

하지만 JSX를 사용하면 다음과 같이 HTML 태그와 비슷한 형태로 UI를 작성할 수 있습니다.

const Main = () => {
  return (
    <main>
      <h1>main</h1>
    </main>
  )
}

JSX는 HTML과 매우 비슷하게 보이지만 JavaScript 안에서 사용되는 문법이라는 점이 중요합니다.

따라서 HTML과 완전히 동일하지 않고 몇 가지 작성 규칙이 존재합니다.

2. JSX에서 JavaScript 사용하기

JSX 안에서는 중괄호 {}를 사용하여 JavaScript 값을 화면에 표현할 수 있습니다.

예를 들어 변수를 만들어 보겠습니다.

const Main = () => {
  const number = 10

  return (
    <main>
      <h1>main</h1>
      <h2>{number}</h2>
    </main>
  )
}

number 변수의 값은 10이므로 화면에 다음과 같이 표시됩니다.

main
10

중괄호 안에서는 JavaScript 표현식을 사용할 수 있습니다.

예를 들어 삼항 연산자를 사용할 수 있습니다.

const Main = () => {
  const number = 10

  return (
    <main>
      <h1>main</h1>
      <h2>{number % 2 === 0 ? '짝수' : '홀수'}</h2>
    </main>
  )
}

number가 10이므로 화면에는 다음과 같이 표시됩니다.

main
짝수

3. JSX 작성 시 주의사항

JSX를 사용할 때는 몇 가지 중요한 규칙이 있습니다.

3-1. 중괄호 안에는 JavaScript 표현식만 사용할 수 있다

JSX에서 {} 안에는 값을 만들어낼 수 있는 JavaScript 표현식(Expression)을 사용할 수 있습니다.

예를 들어 다음과 같은 코드는 사용할 수 있습니다.

{number}

{number + 10}

{number % 2 === 0 ? '짝수' : '홀수'}

{obj.name}

반면 if, for, while과 같은 문장은 JSX 중괄호 안에서 직접 사용할 수 없습니다.

{
  if (number > 10) {
    ...
  }
}

if, for, while은 값을 반환하는 표현식이 아니라 제어문(Statement)이기 때문입니다.

조건에 따라 다른 내용을 표현하고 싶다면 삼항 연산자를 사용할 수 있습니다.

{number > 10 ? '10보다 큼' : '10 이하'}

또는 JSX를 반환하기 전에 별도로 조건문을 작성할 수도 있습니다.

const Main = () => {
  const number = 10

  let result

  if (number % 2 === 0) {
    result = '짝수'
  } else {
    result = '홀수'
  }

  return (
    <main>
      <h1>{result}</h1>
    </main>
  )
}

3-2. 모든 JavaScript 값이 화면에 렌더링되는 것은 아니다

JSX에서 {}를 이용해 값을 화면에 표현할 수 있지만 모든 값이 그대로 렌더링되는 것은 아닙니다.

대표적으로 문자열과 숫자는 렌더링할 수 있습니다.

const name = 'React'
const number = 10

return (
  <main>
    <p>{name}</p>
    <p>{number}</p>
  </main>
)

화면에는 다음과 같이 표시됩니다.

React
10

배열도 렌더링할 수 있습니다.

const fruits = ['사과', '바나나', '딸기']

return (
  <main>
    {fruits}
  </main>
)

배열의 각 값이 화면에 표시됩니다.

반면 객체 자체를 JSX에서 바로 렌더링할 수는 없습니다.

const obj = {
  a: 1,
  b: 2,
}

return (
  <main>
    {obj}
  </main>
)

객체 자체를 렌더링하려고 하면 오류가 발생합니다.

하지만 객체의 특정 프로퍼티 값은 렌더링할 수 있습니다.

const obj = {
  a: 1,
  b: 2,
}

return (
  <main>
    {obj.a}
  </main>
)

화면에는 다음과 같이 표시됩니다.

또한 다음 값들은 일반적인 텍스트처럼 화면에 렌더링되지 않습니다.

{true}
{false}
{undefined}
{null}

이러한 특징은 조건부 렌더링을 할 때 많이 활용됩니다.

예를 들어 false일 경우 화면에 아무것도 표시하지 않는 특징을 이용할 수 있습니다.

3-3. 모든 태그는 닫아야 한다

HTML에서는 일부 태그를 닫지 않고 작성할 수 있는 경우가 있지만 JSX에서는 모든 태그를 닫아야 합니다.

예를 들어 다음과 같은 코드는 올바르지 않습니다.

<img src="image.png">

JSX에서는 반드시 태그를 닫아야 합니다.

<img src="image.png" />

input, br, hr과 같이 자식 요소가 없는 태그도 동일합니다.

<input />

<br />

<hr />

일반 태그 역시 반드시 닫아야 합니다.

<div>
  <h1>안녕 리액트</h1>
</div>

3-4. 최상위 요소는 하나여야 한다

컴포넌트가 반환하는 JSX는 하나의 최상위 요소로 감싸져 있어야 합니다.

예를 들어 다음 코드는 오류가 발생합니다.

return (
  <h1>header</h1>
  <p>안녕하세요.</p>
)

두 개의 태그가 같은 레벨에 존재하기 때문입니다.

따라서 하나의 부모 태그로 감싸야 합니다.

return (
  <div>
    <h1>header</h1>
    <p>안녕하세요.</p>
  </div>
)

하지만 단순히 묶기 위해 불필요한 div를 추가하고 싶지 않을 수도 있습니다.

이럴 때 Fragment를 사용할 수 있습니다.

return (
  <>
    <h1>header</h1>
    <p>안녕하세요.</p>
  </>
)

<> </>는 React의 Fragment 축약 문법입니다.

여러 요소를 하나로 묶어 JSX 규칙을 만족시키면서도 실제 DOM에 불필요한 태그를 추가하지 않을 수 있습니다.

4. JSX 예제

지금까지의 내용을 하나의 코드로 정리하면 다음과 같습니다.

const Main = () => {
  const number = 10
  const obj = { a: 1 }

  return (
    <main>
      <h1>main</h1>

      <h2>{number % 2 === 0 ? '짝수' : '홀수'}</h2>

      {true}
      {undefined}
      {null}

      {obj.a}
    </main>
  )
}

export default Main

각 값은 다음과 같이 동작합니다.

코드결과

{number % 2 === 0 ? '짝수' : '홀수'}	짝수 렌더링
{true}	렌더링되지 않음
{undefined}	렌더링되지 않음
{null}	렌더링되지 않음
{obj.a}	1 렌더링
{obj}	객체 자체는 렌더링할 수 없음

5. JSX에서 스타일 적용하기

React에서 JSX로 UI를 작성할 때 스타일을 적용하는 방법은 크게 두 가지가 있습니다.

태그에 직접 style 속성을 작성하는 방법
별도의 CSS 파일을 만들어 적용하는 방법

5-1. 태그에 직접 스타일 적용하기

첫 번째 방법은 style 속성을 사용하는 방법입니다.

일반 CSS에서는 다음과 같이 작성합니다.

background-color: red;
font-size: 20px;

하지만 JSX에서는 JavaScript 객체 형태로 스타일을 작성합니다.

<h1
  style={{
    backgroundColor: 'red',
    fontSize: '20px',
  }}
>
  안녕 리액트
</h1>

여기서 중요한 점은 CSS 속성 이름입니다.

일반 CSS에서는 background-color처럼 하이픈(-)을 사용하지만 JSX의 style 객체에서는 camelCase(카멜 케이스)를 사용합니다.

예를 들어 다음과 같이 변경됩니다.

CSSJSX style

background-color	backgroundColor
font-size	fontSize
margin-top	marginTop
border-radius	borderRadius

즉, JSX에서는 다음과 같이 작성합니다.

style={{
  backgroundColor: 'red',
  fontSize: '20px',
  marginTop: '10px',
}}

6. 별도의 CSS 파일 사용하기

두 번째 방법은 별도의 CSS 파일을 만들어 스타일을 적용하는 방법입니다.

예를 들어 App.css에 다음과 같이 작성합니다.

.title {
  background-color: red;
  font-size: 20px;
}

그리고 React 컴포넌트에서 CSS 파일을 import 합니다.

import './App.css'

그다음 JSX에서 해당 클래스를 적용합니다.

일반 HTML에서는 다음과 같이 작성합니다.

<div class="logout">로그아웃</div>

하지만 JSX에서는 class 대신 **className**을 사용해야 합니다.

<div className="logout">로그아웃</div>

이는 JSX가 JavaScript와 함께 사용되는 문법이기 때문에 HTML의 class 속성 대신 className을 사용하기 때문입니다.

따라서 React에서 CSS 클래스를 적용할 때는 다음과 같이 작성합니다.

<h1 className="title">안녕 리액트</h1>

CSS 파일에서는 다음과 같이 작성합니다.

.title {
  background-color: red;
  font-size: 20px;
}

7. JSX 스타일링 방법 비교

두 가지 방법을 비교하면 다음과 같습니다.

1. Inline Style

<h1 style={{ color: 'red' }}>안녕 리액트</h1>

간단한 스타일을 빠르게 적용할 수 있습니다.

다만 스타일이 많아지면 JSX 코드가 길어지고 복잡해질 수 있습니다.

2. CSS 파일 사용

<h1 className="title">안녕 리액트</h1>

.title {
  color: red;
}

JSX와 스타일을 분리할 수 있기 때문에 여러 스타일을 관리하기 편합니다.

마무리

이번에는 React에서 UI를 표현하는 JSX에 대해 알아보았습니다.

JSX는 HTML과 비슷한 문법을 사용하지만 JavaScript 안에서 동작하기 때문에 몇 가지 중요한 규칙이 있습니다.

정리하면 다음과 같습니다.

JSX는 JavaScript 안에서 UI를 작성하기 위한 문법이다.
{} 안에는 JavaScript 표현식을 사용할 수 있다.
if, for, while 같은 제어문은 JSX 중괄호 안에서 직접 사용할 수 없다.
문자열과 숫자는 화면에 렌더링할 수 있다.
객체 자체는 렌더링할 수 없지만 객체의 프로퍼티 값은 렌더링할 수 있다.
true, false, undefined, null은 일반적인 화면 텍스트로 렌더링되지 않는다.
모든 JSX 태그는 반드시 닫아야 한다.
컴포넌트가 반환하는 JSX는 하나의 최상위 요소로 묶어야 한다.
불필요한 태그를 만들고 싶지 않을 때는 <> </> Fragment를 사용할 수 있다.
JSX에서 inline style은 JavaScript 객체 형태로 작성하며 CSS 속성은 camelCase를 사용한다.
CSS 클래스를 적용할 때는 HTML의 class 대신 **className**을 사용한다.

React에서 컴포넌트를 만들고 JSX로 UI를 표현하는 방법을 이해했다면, 다음 단계에서는 JSX를 이용해 조건에 따라 다른 화면을 표시하거나 여러 데이터를 반복해서 렌더링하는 방법도 학습할 수 있습니다.

[React] React 컴포넌트란?

seunghwaan — Tue, 7 Apr 2026 12:52:30 +0900

React 컴포넌트란?

-> 함수 컴포넌트 만들기와 부모·자식 컴포넌트 구조

이번에는 React의 가장 기본적인 개념인 컴포넌트(Component)에 대해 알아보겠습니다.

React는 화면을 하나의 거대한 코드로 만드는 것이 아니라, 화면을 여러 개의 작은 단위로 나누어 개발합니다.

이때 화면을 구성하는 각각의 단위를 컴포넌트라고 합니다.

1. React 컴포넌트란?

이전에 작성한 App.jsx 파일을 보면 다음과 같은 코드가 있습니다.

function App() {
  return (
    <>
      <h1>안녕 리액트.</h1>
    </>
  )
}

export default App

일반적인 JavaScript 함수와 비슷하지만, React에서는 JSX를 반환하는 함수를 만들 수 있습니다.

이러한 함수를 React에서는 컴포넌트(Component)라고 부릅니다.

위 코드의 경우 함수 이름이 App이므로 App 컴포넌트라고 부릅니다.

즉, 다음과 같이 이해할 수 있습니다.

JSX를 반환하는 JavaScript 함수 → React 컴포넌트

그리고 함수로 작성한 컴포넌트를 함수 컴포넌트(Function Component)라고 부릅니다.

2. Header 컴포넌트 만들기

App 컴포넌트와 마찬가지로 Header 컴포넌트도 만들 수 있습니다.

function Header() {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

이렇게 작성하면 Header라는 React 컴포넌트가 만들어집니다.

컴포넌트는 일반 함수처럼 이름을 이용해 호출하는 것이 아니라 JSX 문법을 사용하여 화면에 배치합니다.

<Header />

3. 화살표 함수로 컴포넌트 만들기

React 컴포넌트는 일반적인 함수 선언식뿐만 아니라 화살표 함수로도 만들 수 있습니다.

const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

React에서는 두 방식 모두 많이 사용됩니다.

함수 선언식

function Header() {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

화살표 함수

const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

프로젝트에서 사용하는 코드 스타일에 맞춰 일관되게 작성하면 됩니다.

4. React 컴포넌트 이름은 반드시 대문자로 시작해야 한다

React 컴포넌트를 만들 때 중요한 규칙이 하나 있습니다.

컴포넌트의 이름은 반드시 대문자로 시작해야 합니다.

예를 들어 다음은 올바른 컴포넌트 이름입니다.

const Header = () => {
  return <h1>header</h1>
}

하지만 다음과 같이 소문자로 시작하면 React는 일반 HTML 태그로 인식할 수 있습니다.

const header = () => {
  return <h1>header</h1>
}

따라서 React 컴포넌트를 만들 때는 다음과 같이 작성합니다.

App
Header
Footer
Main
Profile
UserInfo

컴포넌트 이름의 첫 글자는 항상 대문자로 작성하는 것이 중요합니다.

5. 클래스 컴포넌트와 함수 컴포넌트

React에서는 과거부터 클래스를 이용해 컴포넌트를 만들 수도 있습니다.

하지만 클래스 컴포넌트는 작성해야 하는 코드가 많고 구조가 복잡해질 수 있습니다.

현재 React에서는 일반적으로 함수 컴포넌트와 Hooks를 사용하는 방식이 주로 사용됩니다.

따라서 앞으로는 다음과 같은 함수 형태의 컴포넌트를 중심으로 작성하면 됩니다.

const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

6. 컴포넌트를 만들기만 해서는 화면에 표시되지 않는다

App.jsx에 Header 컴포넌트를 추가했다고 해서 자동으로 화면에 표시되는 것은 아닙니다.

예를 들어 다음과 같이 Header 컴포넌트를 작성했다고 가정해 보겠습니다.

function Header() {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

그런데 브라우저에는 header가 표시되지 않을 수 있습니다.

그 이유는 React가 처음 렌더링하는 컴포넌트를 main.jsx에서 확인할 수 있기 때문입니다.

createRoot(document.getElementById('root')).render(
  <App />
)

여기서 React는 <App /> 컴포넌트를 화면에 렌더링하고 있습니다.

즉, 현재 화면에 표시되는 시작점은 App 컴포넌트입니다.

Header 컴포넌트를 화면에 표시하려면 App 컴포넌트 안에서 사용해야 합니다.

7. 컴포넌트 안에서 다른 컴포넌트 사용하기

App 컴포넌트 안에 Header를 추가해 보겠습니다.

function App() {
  return (
    <>
      <Header />
      <h1>안녕 리액트.</h1>
    </>
  )
}

이제 React는 다음과 같은 구조로 컴포넌트를 렌더링합니다.

App
 ├─ Header
 └─ h1

App이 렌더링되면서 내부에 작성된 Header 컴포넌트도 함께 렌더링됩니다.

8. 부모 컴포넌트와 자식 컴포넌트

위와 같은 구조에서 App과 Header는 부모와 자식 관계를 가집니다.

App
 └─ Header

이때,

App → 부모 컴포넌트
Header → 자식 컴포넌트

라고 부릅니다.

컴포넌트는 다른 컴포넌트 내부에서 사용할 수 있기 때문에 이러한 트리 구조를 만들 수 있습니다.

예를 들어 App 컴포넌트가 여러 컴포넌트를 포함하고 있다면 다음과 같은 구조가 됩니다.

App
 ├─ Header
 ├─ Main
 └─ Footer

이 경우 App은 최상위에서 여러 컴포넌트를 관리하는 Root 컴포넌트 역할을 할 수 있습니다.

또한 모든 하위 컴포넌트의 상위에 있기 때문에 문맥에 따라 조상 컴포넌트라고 표현하기도 합니다.

일반적인 React 프로젝트에서는 App 컴포넌트를 애플리케이션의 주요 루트 컴포넌트로 사용하는 경우가 많습니다.

9. 컴포넌트는 파일별로 분리해서 관리하기

컴포넌트가 많아지면 하나의 파일에 모든 컴포넌트를 작성하는 것은 관리하기 어려워집니다.

따라서 일반적으로는 컴포넌트별로 파일을 분리하여 관리합니다.

예를 들어 다음과 같은 구조로 구성할 수 있습니다.

src
├─ components
│  ├─ Header.jsx
│  ├─ Main.jsx
│  └─ Footer.jsx
├─ App.jsx
├─ App.css
├─ index.css
└─ main.jsx

이렇게 구성하면 각 컴포넌트의 역할을 쉽게 구분하고 관리할 수 있습니다.

10. Header 컴포넌트 만들기

먼저 components/Header.jsx 파일을 생성합니다.

const Header = () => {
  return (
    <header>
      <h1>header</h1>
    </header>
  )
}

export default Header

마지막에 다음 코드를 작성합니다.

export default Header

이 코드는 Header 컴포넌트를 다른 파일에서 사용할 수 있도록 내보내는 역할을 합니다.

11. Main 컴포넌트 만들기

components/Main.jsx 파일을 생성합니다.

const Main = () => {
  return (
    <main>
      <h1>main</h1>
    </main>
  )
}

export default Main

12. Footer 컴포넌트 만들기

components/Footer.jsx 파일을 생성합니다.

const Footer = () => {
  return (
    <footer>
      <h1>footer</h1>
    </footer>
  )
}

export default Footer

이제 Header, Main, Footer 컴포넌트를 각각 파일로 분리했습니다.

13. App.jsx에서 컴포넌트 불러오기

분리한 컴포넌트를 사용하려면 App.jsx에서 import 해야 합니다.

import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'

그다음 JSX에서 컴포넌트를 사용합니다.

import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'

function App() {
  return (
    <>
      <Header />
      <Main />
      <Footer />
    </>
  )
}

export default App

이제 화면에는 세 개의 컴포넌트가 순서대로 렌더링됩니다.

header

main

footer

14. import에서 .jsx 확장자 생략하기

컴포넌트를 import할 때 다음과 같이 확장자까지 작성할 수도 있습니다.

import Header from './components/Header.jsx'

하지만 일반적으로 .jsx 확장자는 생략할 수 있습니다.

import Header from './components/Header'

Vite를 이용한 React 프로젝트에서는 이러한 모듈 파일을 해석할 수 있도록 기본 설정이 되어 있기 때문입니다.

따라서 보통 다음과 같이 확장자를 생략해서 작성합니다.

import Header from './components/Header'
import Main from './components/Main'
import Footer from './components/Footer'

15. 최종 컴포넌트 구조

현재 만든 컴포넌트 구조를 그림으로 표현하면 다음과 같습니다.

                App
                 │
       ┌─────────┼─────────┐
       │         │         │
    Header      Main     Footer

React는 이렇게 컴포넌트를 트리 형태로 구성합니다.

가장 상위에 있는 App 컴포넌트가 렌더링되고, App 내부에서 사용한 Header, Main, Footer 컴포넌트가 차례대로 렌더링됩니다.

프로젝트 규모가 커질수록 이러한 컴포넌트 구조는 더욱 복잡해질 수 있습니다.

App
├─ Header
│  ├─ Logo
│  └─ Navigation
├─ Main
│  ├─ Content
│  └─ Sidebar
└─ Footer

따라서 React에서는 화면을 적절한 단위로 나누고 각각을 컴포넌트로 만들어 관리하는 것이 중요합니다.

마무리

이번에는 React의 핵심 개념인 컴포넌트에 대해 알아보았습니다.

정리하면 다음과 같습니다.

React에서는 JSX를 반환하는 함수를 컴포넌트로 만들 수 있다.
함수로 만든 컴포넌트를 함수 컴포넌트라고 한다.
컴포넌트 이름은 반드시 대문자로 시작해야 한다.
컴포넌트는 일반 함수 선언식 또는 화살표 함수로 만들 수 있다.
컴포넌트를 만들기만 해서는 화면에 표시되지 않으며, 렌더링되는 컴포넌트 내부에서 사용해야 한다.
다른 컴포넌트 내부에서 사용되는 컴포넌트는 자식 컴포넌트가 된다.
자식 컴포넌트를 포함하는 컴포넌트는 부모 컴포넌트가 된다.
일반적으로 컴포넌트는 역할별로 파일을 분리하여 관리한다.
export를 통해 컴포넌트를 내보내고, 다른 파일에서 import하여 사용할 수 있다.
여러 컴포넌트를 조합하여 하나의 화면을 구성할 수 있다.

React 개발은 결국 작은 컴포넌트를 만들고, 이를 조합하여 화면을 구성하는 방식이라고 볼 수 있습니다.

다음부터는 이렇게 만든 컴포넌트에 데이터를 전달하거나 상태를 관리하는 방법을 학습하면 React의 동작 방식을 더욱 잘 이해할 수 있습니다.

[React] React App 만들기 + Vite 설정 및 ESLint 적용하기

seunghwaan — Tue, 7 Apr 2026 12:52:23 +0900

이번에는 Vite를 이용해서 간단한 React App을 생성하고, 기본으로 제공되는 코드를 정리한 뒤 ESLint까지 설정해보겠습니다.

처음 React 프로젝트를 만들 때는 직접 Webpack 등의 개발 환경을 구성하는 것보다 Vite를 사용하는 것이 훨씬 간편합니다.

1. React App 만들기

React 프로젝트를 직접 처음부터 구성하려면 여러 가지 설정이 필요하지만, 입문 단계에서는 Vite를 사용하는 것을 추천합니다.

그래서 아래와 같은 과정으로 진행하게 됩니다.

1. Node.js 패키지 생성

2. React 라이브러리 설치

3. 기타 도구 설치 및 설정(입문자에게는 까다로우므로 Vite 설치)

Vite란?

Vite는 차세대 프론트엔드 개발 도구로, React 등의 프로젝트를 빠르게 생성하고 개발 서버를 실행할 수 있도록 도와줍니다.

기본적인 프로젝트 설정이 이미 되어 있기 때문에 React를 처음 공부할 때 사용하기 좋습니다.

터미널에서 다음 명령어를 입력합니다.

npm create vite@latest

명령어를 실행하면 프로젝트 이름과 사용할 프레임워크, 언어 등을 선택하게 됩니다.

React를 선택해서 프로젝트를 생성합니다.

프로젝트 생성이 완료되면 해당 프로젝트 폴더로 이동합니다.

cd 프로젝트명

그다음 package.json에 정의되어 있는 패키지들을 설치합니다.

npm install

설치가 완료되었다면 개발 서버를 실행합니다.

npm run dev

터미널에 표시되는 주소로 접속하면 생성된 React App을 확인할 수 있습니다.

2. 기본으로 생성된 React 코드 정리하기

Vite로 React 프로젝트를 생성하면 처음에는 예제 코드가 상당히 많이 들어 있습니다.

처음 React를 공부할 때는 이 코드들이 오히려 복잡하게 느껴질 수 있기 때문에 필요한 부분만 남겨두도록 하겠습니다.

프로젝트의 src/App.jsx를 확인해봅니다.

기본 코드에는 React와 Vite 로고, 카운터 등의 예제 코드가 포함되어 있습니다.

3. 필요하지 않은 import 삭제

기본적으로 다음과 같은 코드가 있을 수 있습니다.

import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'

이번 실습에서는 사용하지 않을 예정이므로 삭제합니다.

또한 useState도 사용하지 않을 것이므로 다음 코드 역시 삭제합니다.

import { useState } from 'react'

그리고 다음 코드도 삭제합니다.

const [count, setCount] = useState(0)

4. 기본 예제 화면 삭제

Vite가 생성해준 기본 화면에는 React 로고, Vite 로고, 카운터, Documentation 등의 예제 코드가 들어 있습니다.

예를 들어 다음과 같은 코드입니다.

<section id="center">
  ...
</section>

<div className="ticks"></div>

<section id="next-steps">
  ...
</section>

이번 실습에서는 필요하지 않으므로 해당 부분을 모두 삭제합니다.

결국 App.jsx를 최대한 간단하게 만들어줍니다.

import './App.css'

function App() {
  return (
    <>
      <h1>안녕 리액트.</h1>
    </>
  )
}

export default App

이제 화면에는 다음과 같이 간단한 문구만 출력됩니다.

안녕 리액트.

5. CSS 파일 초기화하기

처음 Vite에서 생성되는 CSS에는 기본 예제 화면을 위한 스타일이 많이 들어 있습니다.

따라서 이번 실습에서는 App.css와 index.css의 내용을 모두 삭제합니다.

필요한 스타일은 앞으로 직접 작성하면 됩니다.

현재 프로젝트 구조는 대략 다음과 같습니다.

프로젝트
├─ node_modules
├─ public
├─ src
│  ├─ App.css
│  ├─ App.jsx
│  ├─ index.css
│  └─ main.jsx
├─ eslint.config.js
├─ index.html
├─ package.json
└─ vite.config.js

6. main.jsx 확인하기

다음으로 main.jsx를 확인합니다.

Vite에서 React 프로젝트를 생성하면 기본적으로 다음과 같이 React.StrictMode가 적용되어 있을 수 있습니다.

<React.StrictMode>
  <App />
</React.StrictMode>

이번 실습에서는 StrictMode를 사용하지 않을 것이므로 삭제합니다.

결과적으로 다음과 같이 작성할 수 있습니다.

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <App />
)

React.StrictMode란?

StrictMode는 개발 환경에서 React 코드를 작성할 때 발생할 수 있는 잠재적인 문제를 검사하고 경고해주는 기능입니다.

실제 서비스에서 반드시 제거해야 하는 기능이라는 의미는 아닙니다.

다만 현재 실습에서는 React의 기본 동작을 단순하게 이해하는 것이 목적이므로 일단 제외하고 진행하겠습니다.

7. ESLint 설치 및 설정

이제 코드 작성 시 실수를 줄이고 일정한 코딩 스타일을 유지하기 위해 ESLint를 설정해보겠습니다.

VS Code를 사용한다면 Extensions에서 ESLint 확장 프로그램을 설치할 수 있습니다.

ESLint는 JavaScript 코드에서 문법적인 문제나 잠재적인 오류 등을 찾아주는 도구입니다.

8. .eslintrc.cjs 파일이 없는데?

여기서 한 가지 헷갈릴 수 있습니다.

예전 React 강의나 자료를 보면 다음과 같은 파일을 사용하는 경우가 있습니다.

.eslintrc.cjs

하지만 최근 ESLint에서는 설정 방식이 변경되면서 다음과 같은 파일이 사용될 수 있습니다.

eslint.config.js

즉,

.eslintrc.cjs 파일이 없다고 해서 잘못된 것이 아닙니다.

현재 생성된 프로젝트에 eslint.config.js가 있다면 해당 파일을 사용하면 됩니다.

9. eslint.config.js 설정하기

최근 ESLint에서는 Flat Config 방식이 기본 설정 방식으로 사용됩니다.

예를 들어 다음과 같이 설정할 수 있습니다.

import js from '@eslint/js'
import globals from 'globals'

export default [
  js.configs.recommended,
  {
    languageOptions: {
      ecmaVersion: 2020,
      sourceType: 'module',
      globals: globals.browser,
    },
    rules: {
      'semi': ['error', 'always'],
      'quotes': ['error', 'single'],
      'no-unused-vars': 'warn',
      'prefer-const': 'error',
    },
  },
]

각 설정은 다음과 같은 의미를 가집니다.

semi

세미콜론 사용 여부를 검사합니다.

'semi': ['error', 'always']

세미콜론을 반드시 사용하도록 설정합니다.

quotes

문자열에 사용할 따옴표를 설정합니다.

'quotes': ['error', 'single']

작은따옴표(')를 사용하도록 설정합니다.

no-unused-vars

사용하지 않는 변수가 있는지 검사합니다.

'no-unused-vars': 'warn'

사용하지 않는 변수가 있으면 경고를 표시합니다.

prefer-const

변경되지 않는 변수는 let 대신 const를 사용하도록 검사합니다.

'prefer-const': 'error'

10. React 프로젝트에서 ESLint 설정하기

React 프로젝트에서는 React 전용 ESLint 설정을 추가할 수도 있습니다.

예를 들어 eslint-plugin-react를 사용하는 방법이 있습니다.

npm install -D eslint-plugin-react

그리고 eslint.config.js에서 React 관련 설정을 추가할 수 있습니다.

import js from '@eslint/js'
import globals from 'globals'
import pluginReact from 'eslint-plugin-react'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,jsx}'],
    plugins: {
      js,
    },
    extends: ['js/recommended'],
    languageOptions: {
      globals: globals.browser,
    },
    rules: {
      'no-unused-vars': 'off',
    },
  },
  {
    ...pluginReact.configs.flat.recommended,
    rules: {
      'react/prop-types': 'off',
    },
  },
])

여기서 중요한 점은 ESLint 버전이나 프로젝트 생성 방식에 따라 설정 파일의 형태가 달라질 수 있다는 것입니다.

따라서 이 포스트에서는 eslint.config.js를 다루고 있는데 내 프로젝트에는 .eslintrc.cjs가 있다면, 무조건 똑같은 파일을 만들 필요는 없습니다.

현재 프로젝트의 ESLint 버전에 맞는 설정 방식을 사용하는 것이 중요합니다.

11. npm init @eslint/config 명령어

ESLint 설정을 직접 만드는 것이 어렵다면 다음 명령어를 사용할 수도 있습니다.

npm init @eslint/config

명령어를 실행하면 질문에 답하면서 ESLint 설정을 생성할 수 있습니다.

다만 ESLint의 버전에 따라 생성되는 파일이나 설정 형태가 달라질 수 있습니다.

예전에는 .eslintrc 계열 파일이 생성되는 경우가 많았지만, 최근 버전에서는 eslint.config.js가 생성될 수 있습니다.

따라서 파일 이름이 자료와 다르더라도 현재 사용하고 있는 ESLint 버전의 설정 방식을 확인하는 것이 좋습니다.

마무리

이번 과정에서는 Vite를 이용해 React 프로젝트를 생성하고, 기본으로 제공되는 예제 코드를 정리했습니다.

전체적인 과정은 다음과 같습니다.

Vite를 이용해 React 프로젝트 생성
npm install로 패키지 설치
npm run dev로 개발 서버 실행
Vite 기본 예제 코드 삭제
App.jsx를 간단하게 정리
App.css, index.css 초기화
main.jsx에서 React.StrictMode 제거
VS Code에서 ESLint 확장 프로그램 설치
eslint.config.js를 이용해 ESLint 설정
필요하다면 eslint-plugin-react 추가

특히 ESLint 부분에서 기억해둘 점은 최근에는 설정 파일이 다를 수 있다는 것입니다.

예전 자료에서는 .eslintrc.cjs를 많이 사용했지만, 최근 ESLint에서는 eslint.config.js를 사용하는 방식이 일반적입니다.

이제 기본적인 React 프로젝트 설정이 끝났으니, 다음 단계부터 본격적으로 React 컴포넌트를 만들어보면 됩니다.

[React] React 사용을 위한 Node.js 설정 및 사용법

seunghwaan — Tue, 3 Mar 2026 22:23:11 +0900

Node.js 설치

Node.js 공식 사이트에서 LTS 버전으로 설치

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

설치 후 node -v, npm -v 명령어로 설치 여부 확인.

패키지 설정

패키지 -> Node.js에서 사용하는 프로그램의 단위

npm init 명령어를 이용해 패키지를 생성할 수 있다.

npm init

패키지 생성이 완료되면 package.json 이라는 설정 파일이 생성된다.

pacakage.json을 열어보면 아래와 같이 패키지를 생성할 때 설정한 기본적인 내용들이 들어있다.

{
  "name": "section03",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
   },
}

이 상태에서 새로운 자바스크립트 파일을 만들고 실행시킬 수 있다.

같은 폴더 내에 index.js 파일을 생성하고 아래와 같은 내용을 입력한다.

console.log("안녕 Node.js")

이제 node 명령어로 index.js를 실행시킬 수 있다.

단, node src/index.js 명령어로 노드를 실행할 수 있으나, package.json의 scripts에 명령어를 입력해주면 start에 node src/index.js로 값을 입력해주면 npm run start 명령어를 입력하여 실행 가능하다.

{
  "name": "section03",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/index.js"
  },
}

node index.js, npm run start

모듈 시스템 이해하기

기능별로 모듈을 생성하고, 불러오고, 사용하는 방법을 알아보자.

JavaScript의 모듈 시스템에는 아래와 같은 것들이 존재하지만, 가장 많이 사용하는 CJS와 EMS에 대해서만 알아본다.

Common JS(CJS)

ES Module(ESM)

AMD
UMD

...

Common JS(CJS)

-> module.exports에 메소드를 등록해서 외부에서 불러올 수 있게 하고, 가져올 때는 require 메소드를 이용해서 모듈의 메소드를 불러올 수 있다.

math.js

// math 모듈
function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

// CJS (Common JS 모듈 시스템)

module.exports = {
  add, // 이렇게 key값과 value 값이 같을 경우에는 생략 가능.
  // add : add,
  sub: sub,
};

index.js

// CJS (Common JS 모듈 시스템)

// const moduleData = require("./math");
// console.log(moduleData.add(1, 2));
// console.log(moduleData.sub(1, 2));

const { add, sub } = require("./math");

console.log(add(1, 2));
console.log(sub(1, 2));

EMS(ES Module 시스템)

-> export 키워드를 붙여 외부에서 불러올 수 있게 하였고, 가져오는 곳에서 import 키워드를 이용하여 불러올 수 있다.

// math 모듈
export function add(a, b) {
  return a + b;
}

export function sub(a, b) {
  return a - b;
}

// default 불러올 때 이름을 마음대로 정해서 불러올 수 있다.
export default function multiply(a, b) {

  return a * b;
}

// ESM (ES Module 시스템)
// 이렇게 안하고 function 앞에 export 키워드를 붙여줘도 된다!
// export { add, sub }; // export 키워드를 이용해서 객체를 리터럴로 생성해서 넘겨주기만 하면 된다.

index.js

// ESM (ES Module 시스템)
import mul, { add, sub } from "./math.js";
// import mul from "./math.js";
// import { add, sub } from "./math.js";

console.log(add(1, 2));
console.log(sub(1, 2));

외부 패키지 설치하기

npmjs 사이트 -> node.js 패키지 모음 사이트

https://www.npmjs.com/

-> npm i [패키지명] 명령어를 통해 설치 가능

npm i 명령어를 입력하여 패키지를 설치하면 node_modules 폴더와 package-lock.json 파일이 생성된다.

node_modules -> 설치한 라이브러리가 저장되는 곳

(node_modules가 지워졌다면 npm i 명령어를 입력하면 다시 설치됨.)

package-lock.json -> 패키지가 사용하고 있는 라이브러리의 정확한 버전이나 정보를 저장하는 파일

(package.json에는 대략적인 버전 정보만 저장됨.)

[JavaScript] JS의 비동기 처리 (콜백 함수, Promise, Async & Await)

seunghwaan — Fri, 20 Feb 2026 23:41:23 +0900

동기와 비동기

동기

-> 여러개의 작업을 순서대로, 하나씩 표현하는 방식

여러 개의 작업이 있을 때 각 작업을 순서대로 처리하는 것을 동기적으로 처리한다라고 표현한다.

즉, Task A, Task B, Task C가 있다고 가정한다면, Task A가 종료되면 Task B가 실행되고, Task B가 종료되면 Task C가 실행되고 최종적으로는 순서대로 완료하는 흐름으로 표현할 수 있다.

프로그래밍에서 이렇게 작업을 실행하고 처리해주는 단위를 쓰레드라고 부른다.

동기적인 방식의 단점

but, 동기적인 방식에는 치명적인 단점이 존재한다.

-> Task가 오래 걸리는 작업이라면 작업을 처리하기 전 까지는 다음 Task를 실행할 수 없게되어 전체 프로그램의 성능이 악화되어 버리는 치명적인 단점이 존재한다.

이러한 단점을 해결하기 위해, Java나 C# 같은 경우에는 여러개의 쓰레드를 동시에 사용하는 멀티 쓰레드 방법을 활용한다.

여러개의 쓰레드를 사용하면 오래 걸리는 작업이 중간에 포함되어 있다고 하더라도 전체 프로그램의 성능을 악화시키는 데에는 큰 영향을 주지 못하기 때문에 동기적인 방식의 문제점을 어느정도 보완할 수 있다.

but, 아쉽게도 JavaScript 엔진에는 쓰레드가 1개 밖에 없기 때문에 멀티 쓰레드 방식으로는 해결할 수 없으므로, 비동기 방식으로 해결해야 한다.

비동기

-> 작업을 순서대로 처리하지 않는 방식

비동기 방식에서는 여러개의 작업이 주어졌을 때 앞의 작업이 종료되지 않아도, 기다릴 필요 없이 다른 작업을 동시에 실행 시키는 것이 가능하다.

그래서 앞선 작업의 결과 값을 받아서 사용하고 싶다면 각각의 작업에 Callback을 붙여서 사용할 수 있다.

JavaScript는 비동기 작업들을 어떻게 동시에 처리할 수 있는가?

비동기 작업들은 쓰레드에서 실행되는 것이 아닌, 자바스크립트 엔진이 아닌 Web APIs 에서 실행된다.

이러한 비동기 작업들은 아래와 같은 절차로 수행된다.

1. JavaScript Engine은 비동기 함수를 만나게 되면, 이 비동기 함수를 Web Browser의 Web APIs에게 실행해달라고 부탁한다.

2. 이때, 해당 비동기 함수가 끝나면 실행할 콜백 함수까지 넘겨준다.

3. 비동기 함수가 끝나면 콜백 함수를 JavaScript Engine에게 돌려준다.

JavaScript의 비동기 작업 처리 방법

비동기 처리 방법

1. 콜백 함수

-> 비동기 처리 작업의 결과로 콜백 함수를 달아줄 수는 있지만 아래의 orderFood() 함수처럼 콜백 지옥이 생길 수 있다.

// 콜백 함수

function add(a, b) {
  setTimeout(() => {
    const sum = a + b; // 3
    callback(sum);
  }, 3000);
}

add(1, 2, (value) => {
  console.log(value); // 3 출력
});

// 음식을 주문하는 상황
function orderFood(callback) {
  setTimeout(() => {
    const food = "떡볶이";
    callback(food);
  }, 3000);
}

function cooldownFood(food, callback) {
  setTimeout(() => {
    const cooldowndedFood = `식은 ${food}`;
    callback(cooldownFood);
  }, 2000);
}

function freezFood(food) {
  setTimeout(() => {
    const freezedFood = `냉동된 ${food}`;
    callback(freezedFood);
  }, 1500);
}

orderFood((food) => {
  console.log(food);

  cooldowndedFood(food, (cooldownFood) => {
    console.log(cooldownFood);

    freezFood(cooldownFood, (freezedFood) => {
      console.log(freezedFood);
    });
  });
});

// 3초 뒤 떡볶이 출력
// 2초 뒤 식은 떡볶이 출력
// 1.5초 뒤 냉동된 식은 떡볶이 출력

2. Promise

-> 비동기 작업을 효율적으로 처리할 수 있도록 도와주는 자바스크립트 내장 객체

-> Promise는 setTimeout 함수와 같은 비동기 작업들을 래핑하는 객체

-> 감싸고 있는 비동기 작업을 실행, 관리, 결과 저장, 병렬 실행, 다시 실행 등의 비동기 작업들을 처리하는데에 필요한 모든 기능을 제공해주는 객체

Promise의 3가지 상태

1. 대기(Pending) -> 비동기 작업이 진행중인, 아직 작업이 완료되지 않은 상태

2. 성공(Fulfilled) -> 비동기 작업이 성공적으로 마무리 된 상태

3. 실패(Rejected) -> 비동기 작업이 실패한 상태

해결(resolve) -> 비동기 작업이 성공해서 대기 -> 성공으로 바뀜

거부(reject) -> 비동기 작업이 어떠한 이유로 대기 -> 실패로 바뀜

// 비동기 작업 처리하기 Promise

// resolve -> Promise가 관리하는 비동기 작업을 성공 상태로 바꾸는 함수가 들어있음.
// reject -> Promise가 관리하는 비동기 작업을 실패 상태로 바꾸는 함수가 들어있음.
const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  // executor

  setTimeout(() => {
    console.log("안녕");
  }, 2000);
});

console.log(promise);

promise의 PromiseState가 pending 상태

실행 결과

// 비동기 작업 처리하기 Promise

// resolve -> Promise가 관리하는 비동기 작업을 성공 상태로 바꾸는 함수가 들어있음.
// reject -> Promise가 관리하는 비동기 작업을 실패 상태로 바꾸는 함수가 들어있음.
const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  // executor

  setTimeout(() => {
    console.log("안녕");
    resolve();
  }, 2000);
});

console.log(promise);

resolve() 추가 후, 2초 뒤 promise의 PromiseState가 pending -> resolved 상태

실행 결과

// 비동기 작업 처리하기 Promise

// resolve -> Promise가 관리하는 비동기 작업을 성공 상태로 바꾸는 함수가 들어있음.
// reject -> Promise가 관리하는 비동기 작업을 실패 상태로 바꾸는 함수가 들어있음.
const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  // executor

  setTimeout(() => {
    console.log("안녕");
    resolve("안녕");
  }, 2000);
});

console.log(promise);

이때, PromiseResult가 undefined로 결과값이 저장되어있지 않은 것을 확인할 수 있는데, resolve() 함수 안에 값을 넣어주면 된다.

실행 결과

// 비동기 작업 처리하기 Promise

// resolve -> Promise가 관리하는 비동기 작업을 성공 상태로 바꾸는 함수가 들어있음.
// reject -> Promise가 관리하는 비동기 작업을 실패 상태로 바꾸는 함수가 들어있음.
const promise = new Promise((resolve, reject) => {
  // 비동기 작업
  // executor

  setTimeout(() => {
    console.log("안녕");
    // resolve("안녕");
    reject("왜 실패했는지 이유....");
  }, 2000);
});

console.log(promise);

반면, reject()를 사용하면 콘솔에 아래와 같이 PromiseState와 PromiseReulst가 출력된다.

실행 결과

then 메소드

-> promise가 성공하면, then 메소드에 전달한 callback 함수를 실행시킴.

// then 메소드
// -> promise가 성공하면, then 메소드에 전달한 callback 함수를 실행시킴.
promise.then((value) => {
  console.log(value);
});

catch 메소드

-> promise가 실패하면, catch 메소드에 전달한 callback 함수를 실행시킴.

// catch 메소드
// -> promise가 실패하면, catch 메소드에 전달한 callback 함수를 실행시킴.
promise.catch((error) => {
  console.log(value);
});

Promise Chaining

-> promise의 then과 catch는 promise 자기 자신을 반환하므로 연결해서 사용하는 것도 가능하다.

// promise의 then과 catch는 promise 자기 자신을 반환하므로 연결해서 사용하는 것도 가능함. (promise chaining)
promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log("error");
  });

3. Async & Await

Async

-> 어떤 함수를 비동기 함수로 만들어지는 키워드

-> 즉, 함수가 Promise를 반환하도록 변환해주는 키워드

// async
// 어떤 함수를 비동기 함수로 만들어주는 키워드
// 함수가 프로미스를 반환하도록 변환해주는 키워드

async function getData() {
  return {
    name: "서승환",
    id: "seosh817",
  };
}

console.log(getData());

실행 결과

Await

-> async 함수 내부에서만 사용이 가능한 키워드

-> 비동기 함수가 다 처리되기를 기다리고 결과를 반환함.

async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: "서승환",
        id: "seosh817",
      });
    });
  });
}

// await
// async 함수 내부에서만 사용이 가능한 키워드
// 비동기 함수가 다 처리되기를 기다리고 결과를 반환함.

async function printData() {
    const data = await getData();
    console.log(data);
    // getData().then((result) => {
    //     console.log(result);
    // });
}

printData();

실행 결과

References

한 입 크기로 잘라 먹는 리액트(React.js)(이정환)

[JavaScript] 함수 표현식과 화살표 함수 & 콜백 함수(Callback)

seunghwaan — Wed, 18 Feb 2026 20:37:33 +0900

함수 표현식과 화살표 함수

1. 함수 표현식

-> 익명함수는 function () 형태로 만들 수 있다.

// 1. 함수 표현식
function funcA() {
  console.log("funcA");
}

let varA = funcA; // 함수가 아니라 함수 자체를 넣어줌.
console.log(varA);

// f funcA() {
//    console.log("funcA");
//}
// 출력

varA(); // 함수를 실행

let varB = function funcB() {
  console.log("funcB");
};

varB();
// funcB(); -> 이건 오류, funcB는 사용할 수 없음.

let varC = function () {
  // 익명함수
  console.log("funcB");
};

console.log(varC()); // funcB 출력

2. 화살표 함수

-> 화살표 함수를 이용해서 익명함수를 function()이 아닌 () => 형태로도 만들 수 있다.

// 2. 화살표 함수
let varD = () => {
  return 1;
};

console.log(varD()); // 1 출력

let varE = () => 1;

console.log(varE()); // 1 출력

let varF = (value) => value + 1;

console.log(varF(10)); // 11 출력

let varG = (value) => {
  console.log(value);
  return value + 1;
};

console.log(varG(10)); // 10 11 출력

콜백 함수

-> 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 함.

-> 매개 변수에 변수가 아닌 함수를 넘겨서 사용.

// 콜백 함수

// 1. 콜백함수
// 자신이 아닌 다른 함수에, 인수로써 전달된 함수를 의미 함

function main(value) {
  value();
}

function sub() {
  console.log("i am sub");
}

main(sub); // "i am sub 출력"

main(function sub() {
  // 이렇게도 가능.
  console.log("i am sub");
});

main(() => {
  // 이렇게도 가능.
  console.log("i am sub");
});

// 2. 콜백함수의 활용.
function repeat(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx);
  }
}

function repeatDouble(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 2);
  }
}

// repeat(5);
// repeatDouble(5);

// 위 처럼 구조가 흡사한 함수를 만들 일이 있음.
// 이럴 경우 아래와 같이 콜백함수로 만들 수 있음.

function repeatCallback(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx);
  }
}

repeatCallback(5, function (idx) {
  console.log(idx);
});

repeatCallback(5, (idx) => {
  // function 제거하고 => 붙여도 동일하게 사용 가능.
  console.log(idx * 2);
});

repeatCallback(5, (idx) => {
  console.log(idx * 3);
});

[JavaScript] 연산자

seunghwaan — Wed, 18 Feb 2026 19:48:50 +0900

연산자

1. 대입 연산자

-> = 연산자

// 1. 대입 연산자 (=)
let var1 = 1;

2. 산술 연산자

-> +, -, *, /, % 연산자

// 2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;

let num6 = 1 + 2 * 10;
console.log(num6); // *가 우선순위가 높으므로 21 출력.

3. 복합 대입 연산자

-> 산술 + 대입 연산자

// 3. 복합 대입 연산자 (산술 + 대입)
let num7 = 10;
num7 += 20; // num7 = num7 + 20;
num7 -= 20;
num7 *= 20;
num7 /= 20;
num7 %= 10;

4. 증감 연산자

-> 후위 연산, 전위 연산

// 4. 증감 연산자
let num8 = 10;
num8++; // 후위 연산. 이 줄이 끝나고 나서야 +1이 증가된다.
console.log(num8);
console.log(++num8); // 전위 연산. +1이 증가된 이후에 줄이 실행된다.

5. 논리 연산자

-> ||(or), &&(and), !(not)

// 5. 논리 연산자
let or = true || false;
let and = true && false;
let not = !true;
console.log(or, and, not); // true false false 출력

6. 비교 연산자

-> ===는 자료형까지 같은지 비교한다.

-> ==는 자료형이 같은지는 비교하지 않는다.

// 6. 비교 연산자 (==을 사용하게 되면 자료형이 같은지 까지는 비교하지 않는다!)
let comp1 = 1 === 2; // 같은 값이 아니기 때문에 false
let comp2 = 1 !== 2; // 같은 값이 아니기 때문에 true
console.log(comp1, comp2);

let comp3 = 2 > 1; // true
let comp4 = 2 < 1; // false
console.log(comp3, comp4);

let comp5 = 2 >= 2; // true
let comp6 = 2 <= 2; // true
console.log(comp5, comp6);

7. null 병합 연산자

-> null, undefined가 아닌 값을 찾아내는 연산자

-> 존재하는 값을 추려내는 기능

// 7. null 병합 연산자
// -> null, undefined가 아닌 값을 찾아내는 연산자
// -> 존재하는 값을 추려내는 기능
let var1; // undefined
let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2; // 10 var4에 undefined가 아닌 var2의 값을 저장한다.
let var5 = var1 ?? var3; // 20 var4에 undefined가 아닌 var3의 값을 저장한다.
let var6 = var3 ?? var2;

let userName;
let userNickName = "seosh817";

let displayName = userName ?? userNickName; // userName이 undefined라면 userNickName으로 저장한다.

8. typeof 연산자

-> 값의 타입을 문자열로 반환하는 기능을 하는 연산자.

// 8. typeof 연산자
// -> 값의 타입을 문자열로 반환하는 기능을 하는 연산자.
let var7 = "hello";

let t1 = typeof var7;
console.log(t1); // string

9. 삼항 연산자

-> 항을 3개 사용하는 연산자.
-> 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환

// 9. 삼항 연산자
// -> 항을 3개 사용하는 연산자.
// -> 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환
let var8 = 10;

// 요구사항 : 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> ""
let res = var8 % 2 === 0 ? "짝수" : "홀수";
console.log(res); // 짝수 출력.

[JavaScript] 형 변환

seunghwaan — Wed, 18 Feb 2026 19:38:23 +0900

형 변환

1. 묵시적 형 변환

-> 자바스크립트 엔진이 오류를 발생시키지 않기 위해서 알아서 형 변환 하는 것.

// 1. 묵시적 형 변환
// -> 자바스크립트 엔진이 오류를 발생시키지 않기 위해서 알아서 형 변환 하는 것.

let num = 10;
let str = "20";

const result = num + str; // 묵시적으로 String으로 형 변환. "10" + "20" = "1020"
console.log(result); // "1020"

2. 명시적 형 변환

-> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시

// 2. 명시적 형 변환
// -> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 명시
// -> 문자열 -> 숫자

let str1 = "10";
let strToNum1 = Number(str1);
console.log(10 + strToNum1); // 20 출력. 10 + 10 = 20

let str2 = "10개";
let strToNum2 = parseInt(str2); // 숫자가 앞쪽에 있으면 뒤에 문자가 있더라도 형 변환 해준다.

console.log(strToNum2); // 10 출력.

// -> 숫자 -> 문자열
let num1 = 20;
let numToStr1 = String(num1);

console.log(numToStr1 + "입니다"); // 20입니다 출력.