전체 글33 [React] JSX란? JSX(JavaScript XML)는 React에서 자바스크립트 안에서 HTML과 유사한 구문을 작성할 수 있게 해주는 문법 확장입니다. JSX는 브라우저에서 직접 실행되지 않고, React와 같은 프레임워크가 이를 JavaScript로 변환하여 실행합니다. JSX는 직관적인 UI 코드 작성을 가능하게 하며, React에서 컴포넌트를 정의하고 구성할 때 많이 사용됩니다. JSX의 특징HTML과 비슷한 문법JSX는 HTML과 비슷하게 보이지만 실제로는 JavaScript입니다. 이를 통해 UI를 표현하는 코드와 비즈니스 로직이 가까이 위치할 수 있어 개발자가 더 직관적으로 UI 코드를 작성할 수 있습니다.const element = Hello, World!; JavaScript와 결합 가능JSX 안에서 J.. 2024. 9. 10. [React] 컴포넌트(Component) React에서 컴포넌트는 사용자 인터페이스(UI)를 구축하는 기본 단위입니다. 컴포넌트는 재사용 가능하고 독립적인 코드 블록으로, UI의 일부분을 정의합니다. React의 컴포넌트는 크게 두 가지 유형으로 나눌 수 있습니다: 함수형 컴포넌트와 클래스형 컴포넌트입니다. 1. 함수형 컴포넌트 (Functional Component)함수형 컴포넌트는 간단한 JavaScript 함수로, props를 인자로 받아 UI를 반환합니다. 상태 관리와 라이프사이클 메서드가 필요한 경우 React Hooks를 사용하여 상태를 관리할 수 있습니다.import React from 'react';function MyComponent(props) { return Hello, {props.name}!;}export defaul.. 2024. 9. 9. [기초] JavaScript 컨트롤 구조(Control Structure) JavaScript의 컨트롤 구조는 프로그램의 흐름을 제어하는 데 사용되는 구문입니다. 이를 통해 조건에 따라 코드가 실행되거나, 반복문을 통해 특정 작업을 여러 번 수행할 수 있습니다. 대표적인 컨트롤 구조는 조건문, 반복문, 분기문 등이 있습니다. 1. 조건문 (Conditional Statements)조건에 따라 다른 코드를 실행하는 구조입니다. if, else if, elseif 문은 조건이 true일 때 코드를 실행합니다. 추가적으로 else if와 else를 통해 조건을 확장할 수 있습니다.let age = 20;if (age >= 18) { console.log("Adult");} else if (age >= 13) { console.log("Teenager");} else { con.. 2024. 9. 6. [기초] JavaScript DOM이란? JavaScript에서 DOM(Document Object Model)은 웹 페이지의 구조화된 표현을 제공하는 중요한 개념입니다. DOM을 사용하면 JavaScript로 HTML 문서의 구조, 스타일, 내용을 동적으로 접근하고 수정할 수 있습니다. 아래에 DOM의 개념, 동작 방식, 주요 메서드 및 프로퍼티, 이벤트 처리 등을 자세히 설명합니다. 1. DOM의 개념DOM의 정의: DOM은 웹 문서의 구조를 트리 형태로 표현하는 객체 모델입니다. HTML 문서의 각 요소는 DOM 트리의 노드로 표현되며, 이 트리를 통해 JavaScript로 웹 페이지를 조작할 수 있습니다.노드: DOM 트리는 여러 종류의 노드로 구성됩니다. 대표적인 노드 유형으로는 Element 노드(HTML 태그), Text 노드(텍스.. 2024. 9. 5. [기초] JavaScript 참조형(Reference Type) JavaScript에서 데이터 타입은 크게 원시형(primitive type)과 참조형(reference type)으로 나눌 수 있습니다. 참조형은 객체(Object)를 기반으로 하며, 메모리에서 값이 아닌 주소(reference)를 참조합니다. 이 때문에 참조형 데이터는 다르게 작동하며, 원시형과는 구별됩니다. 여기서 참조형에 대해 자세히 설명하겠습니다. 1. 참조형의 개념참조형(reference type) 데이터는 변수에 실제 값을 저장하는 대신, 값이 저장된 메모리 주소를 참조합니다. 이는 객체가 크고 복잡한 데이터를 다룰 수 있도록 합니다.참조형에는 다음과 같은 데이터 타입이 포함됩니다:Object: 일반 객체, 배열, 함수 등Array: 배열Function: 함수Date: 날짜 객체RegExp:.. 2024. 9. 3. [기초] JavaScript Destructuring 디스트럭처링(Destructuring)은 JavaScript의 편리한 문법으로, 배열이나 객체의 값을 개별 변수로 쉽게 추출할 수 있게 해 줍니다. 이 문법은 코드의 가독성을 높이고, 필요한 값을 간단하게 추출할 수 있는 방법을 제공합니다. 1. 배열 디스트럭처링배열의 값을 순서대로 변수에 할당할 수 있습니다. 기본 사용법const numbers = [1, 2, 3];const [first, second, third] = numbers;console.log(first); // 1console.log(second); // 2console.log(third); // 3 기본값 설정디스트럭처링에서 값이 없을 경우, 기본값을 설정할 수 있습니다.const numbers = [1, 2];const [first.. 2024. 9. 2. 이전 1 2 3 4 ··· 6 다음
