본문 바로가기
728x90
300x250
SMALL

분류 전체보기1117

|| 논리 OR 연산자 :: 동작 원리 || 연산자는 논리 OR 연산자로 다음과 같은 방식으로 동작한다. 1. 왼쪽 값이 truthy(참)이면 왼쪽 값을 반환2. 왼쪽 값이 falsy(거짓)이면 오른쪽 값을 반환 리액트에서는 이 동작을 활용해 기본값을 설정하거나, 값이 없을 경우 대체값을 렌더링할 수 있다.|| 동작 예시function Example({ username }) { return {username || 'Guest'};} 만약 username값이 있을 경우 (John) 참이기 때문에 'John' 출력값이 없을 경우(null / undefined / false / ' ') 거짓으로 'Guest' 출력 주의할 점0도 falsy로 평가 된다. 숫자 0을 값으로 사용하려면 이를 처리하는 로직이 필요하다.function Example({ .. 2024. 12. 29.
클릭 이벤트 클래스형 컴포넌트, 클래스 필드 문법, 함수 컴포넌트 - 비공개 보호되어 있는 글 입니다. 2024. 12. 28.
클래스형 컴포넌트와 클래스 필드 문법 클래스형 컴포넌트아래 예제는 버튼을 클릭하면 숫자를 증가시키는 기능을 제공한다.import React, { Component } from "react";class Counter extends Component { constructor(props) { super(props); this.state = { count: 0, }; } handleIncrement() { this.setState((prevState) => ({ count: prevState.count + 1, })); } render() { return ( Count: {this.state.count} Increment ); }}exp.. 2024. 12. 27.
리액트에서 Arguments (매개변수) 전달하기 함수에서 전달할 데이터를 Arguments라고 하며 리액트에서 파라미터(parameter)와 매개변수(argument)는 함수 정의와 호출에서 동일한 개념을 다룬다. 리액트에서 Arguments 전달하기는 주로 컴포넌트 간 데이터 전달, 이벤트 핸들러에 인자 전달, 또는 함수 호출 시 인자를 넘길 때 사용된다. 리액트는 props를 통해 부모 컴포넌트에 자식 컴포넌트로 데이터를 전달하는 구조를 가지고 있지만, 이벤트 핸들러에 인자를 전달하거나, 함수를 호출할 때 인자를 전달하는 방식도 자주 사용된다. 1. Props를 통한 컴포넌트 간 데이터 전달리액트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 기본 방법이다. 부모 컴포넌트에서 데이터를 전달하고, 자식 컴포넌트에서 이를 받을 수.. 2024. 12. 26.
728x90
반응형
LIST