이 글은 2026년 1월 22일에 작성된 글입니다.HookReact v16.8부터 도입된 기능으로, 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수이다.리액트에서 제공하는 내장 훅(useState, useEffect, ... ) 과 사용자가 직접 정의할 수 있는 Custom Hooks가 있다. useState: 가장 기본적인 Hook. 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌.useEffect: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있음.useReducer: useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용.useMemo: 함수형 컴포넌트 내부에서 발생하는 연..

이 글은 2026년 1월 21일에 작성된 글입니다.이벤트사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것.DOM요소에만 이벤트 설정이 가능(컴포넌트에 자체적으로 이벤트를 설정할 수는 없다).예제: 함수형 컴포넌트로 이벤트 구현// src/ex04/EventEx.jsimport React, {useState} from 'react';const EventEx = () => { const [form, setForm] = useState({ username: '', message: '' }); const {username, message} = form; // 이벤트 발생하면 form 변경 const onChange = e => { cons..

이 글은 2026년 1월 21일에 작성된 글입니다.JSXJSX(Javascript Syntax Extension): 자바스크립트 확장 문법. Javascript와 XML/HTML을 합친 것.JSX는 내부적으로 XML/HTML코드를 자바스크립트로 변환하는 과정(번들링)을 거치므로 JSX 코드는 최종적으로 자바스크립트 코드로 출력된다.// JSX 사용한 코드const element = ( Hello, world! )// JSX 사용하지 않은 코드const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!')JSX 장점코드가 더 간결..

이 글은 2026년 1월 19일에 작성된 글입니다.스프레드 구문배열이나 객체에 이용할 수 있는 표기법요소 전개와 요소 모으기arr1 = [1, 2];console.log(arr1); // [ 1, 2 ]console.log(...arr1); // 1 2const summaryFunc = (num1, num2) => console.log(num1 + num2);summaryFunc(arr1[0], arr1[1]); // 3summaryFunc(...arr1); // 3const arr2 = [1, 2, 3, 4, 5];const [num1, num2, ...arr3] = arr;console.log(num1); // 1console.log(num2); // 2console...