분류 전체보기 (139) 썸네일형 리스트형 React 이벤트 사용하기 React에서 이벤트를 다루는 방법은 매우 중요합니다. React 컴포넌트 내에서 이벤트를 처리하려면 `onClick`과 같은 이벤트 핸들러를 사용하고, `event` 객체를 활용하여 이벤트 처리 로직을 작성할 수 있습니다. 아래의 코드 예제를 통해 React에서 이벤트를 사용하는 방법을 설명하겠습니다. import React from 'react'; function Article(props) { return ( {props.title} {props.body} ); } function Header(props) { return ( { event.preventDefault(); // 기본 동작 방지 props.onChangeMode(); // 부모 컴포넌트로 이벤트 전달 }}>{props.title} ); .. React 의 Props 개념 및 사용법 `props` (속성)은 React 컴포넌트 간에 데이터를 전달하고 컴포넌트의 동작을 제어하기 위한 메커니즘입니다. `props`를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트는 전달받은 `props`를 활용하여 UI를 렌더링합니다. 아래의 코드 예제를 통해 `props`의 사용법을 설명하겠습니다. import React from 'react'; function Header(props) { console.log('props', props, props.title); return ( {props.title} ); } function Nav(props) { const lis = []; for (let i = 0; i < props.topics.length; i++) { let .. React 컴포넌트 만들고 사용하기 React에서 컴포넌트를 만들고 사용하는 것은 웹 애플리케이션 개발에서 중요한 부분입니다. 컴포넌트를 만들면 1. 코드의 가독성을 높일 수 있고, 2. 재사용성을 증가시키며 3. 생산성을 향상시킬 수 있습니다. 아래에서 React에서 사용자 정의 태그(컴포넌트)를 만들고 활용하는 방법에 대해 설명합니다. 1. 사용자 정의 태그(컴포넌트) 만들기 React에서 사용자 정의 태그(컴포넌트)를 만들 때 다음 규칙을 따릅니다: - 컴포넌트 이름은 대문자로 시작해야 합니다. - React 컴포넌트 클래스나 함수를 정의합니다. - 컴포넌트의 렌더링 결과를 반환합니다. 예를 들어, 간단한 "Hello World" 컴포넌트를 만들어보겠습니다. import React from 'react'; class HelloWorl.. React 기본 개념 (2) + 개발환경 설정, 수정 및 배포하기 React는 JavaScript 라이브러리로, 사용자 정의 태그(컴포넌트)를 만들어 웹 애플리케이션을 구축하는 데 중점을 둡니다. React를 사용하면 UI를 컴포넌트로 나누고, 각 컴포넌트를 조합하여 사용자 정의 태그를 만들 수 있습니다. 컴포넌트는 두 가지 주요 방법으로 만들 수 있습니다. 1. Class 컴포넌트 이전 버전의 React에서 주로 사용되던 방식입니다. 클래스로 정의된 컴포넌트에서 `render` 메서드를 사용하여 UI를 정의합니다. 클래스 컴포넌트는 `state`와 라이프사이클 메서드를 활용할 수 있습니다. 2. Function 컴포넌트 최신 버전의 React에서 함수로 정의된 컴포넌트를 활용하는 방식입니다. 함수 컴포넌트는 간단하고 가독성이 뛰어나며, React Hook을 사용하여 .. 자바에서의 클래스 상속과 일반화 관계 자바에서 클래스 상속과 일반화 관계를 활용하여 객체 지향 프로그래밍을 구현하는 방법에 대해 알아보겠습니다. 이를 통해 추상화 수준이 높은 클래스부터 구체적인 클래스까지 어떻게 모델링하는지 살펴보겠습니다. 클래스 상속과 일반화 관계 자바에서 클래스 상속은 부모 클래스로부터 필드와 메서드를 상속받아 새로운 클래스를 정의하는 메커니즘입니다. 이를 통해 부모 클래스의 특성을 자식 클래스에서 재사용하거나 확장할 수 있습니다. 일반화 관계는 객체 지향 프로그래밍(OOP)에서 중요한 개념 중 하나로, 클래스 간의 상속 관계를 나타냅니다. Human 클래스 public class Human { String name; int age; public Human() { System.out.println("Human class.. Java Constructor Overloading - 다양한 객체 초기화 방법 자바에서 Constructor Overloading은 여러 생성자를 정의하여 객체를 다양한 방법으로 초기화하는 기술입니다. Constructor Overloading의 개념과 활용을 설명하고, 예제를 통해 다양한 초기화 방법을 살펴보겠습니다. Constructor Overloading의 개념 Constructor Overloading은 동일한 클래스 내에서 여러 개의 생성자를 정의하는 것을 의미합니다. 각 생성자는 서로 다른 매개변수 목록을 가지며, 객체를 다양한 방식으로 초기화할 수 있게 해줍니다. 이렇게 함으로써 동일한 클래스를 사용하면서 다양한 상태의 객체를 생성할 수 있습니다. 다음은 Constructor Overloading을 활용한 예제 코드입니다. public class User03 { St.. Java 생성자(Constructor)와 객체 초기화 자바에서 생성자(Constructor)는 객체를 생성할 때 호출되는 특수한 메서드로, 객체의 초기화 작업을 담당합니다. 생성자(Constructor)의 개념 생성자는 객체를 생성할 때 호출되며, 다음과 같은 특징을 가집니다. 1. 인스턴스 생성 시 호출됨 객체를 생성할 때 `new` 키워드와 함께 사용되며, 객체 생성 시에 자동으로 호출됩니다. 2. 필드 변수 초기화 주요 작업은 객체의 필드 변수를 초기화하는 것입니다. 이를 통해 객체는 생성될 때부터 특정 상태를 갖게 됩니다. 3. 객체의 상태 설정 생성자를 통해 객체의 초기 상태를 설정할 수 있으며, 필요한 경우 매개변수를 받아 특정한 값으로 초기화할 수도 있습니다. 다음은 생성자의 개념을 이해하는 데 도움이 되는 예제 코드입니다. public cla.. Java Constructor(생성자)의 의미와 활용 예제 자바에서 Constructor(생성자)는 객체를 생성할 때 사용되는 특별한 메서드입니다. Constructor의 의미 이해 1. 인스턴스 생성시 `new A()`의 의미 Constructor는 객체를 생성하는 시점에서 호출되는 특별한 메서드로, 객체를 초기화하는 역할을 합니다. `new A()`와 같이 객체를 생성할 때, 해당 클래스의 Constructor가 호출되어 객체를 초기화하게 됩니다. 2. `new`와 같이 사용되는 특수한 행위를 하는 Method `new` 키워드와 함께 사용되는 Constructor는 해당 클래스의 인스턴스를 생성하고 초기화하는 역할을 합니다. 이 과정에서 필요한 초기화 작업이나 설정을 수행할 수 있으며, 객체가 생성될 때 필요한 리소스를 할당하는 등의 작업을 수행할 수 있습.. 이전 1 ··· 11 12 13 14 15 16 17 18 다음