본문 바로가기

전체 글

 (125)
[REACT] 컴포넌트 요소의 반복(map, filter) 컴포넌트의 반복 리액트에서 동일한 html 요소를 생성하는 방법은 Vanila JavaScript를 사용합니다. 자바스크립트 문법에는 map이라는 메서드를 통해 배열을 복사하거나 새롭게 계산하여 생성할 수 있습니다. 자바스크립트 map const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] react에서도 반복되는 element를 만들 때에는 map 함수와 JSX를 사용하여 생성합니다. map 함수의 문법은 다음과 같습니다. arr.map(callback, [this.Arg]) 여기서 각각..
[REACT] 리액트의 ref 리액트의 ref란? 리액트의 ref는 리액트 내부에서 state등으로 핸들링 할 수 없는 경우, 혹은 직접적으로 DOM에 접근하여 작업을 처리하거나 핸들링하기 위하여 사용합니다. 간단히 설명하자면 ref는 리액트 컴포넌트의 id입니다. html 태그의 id와 같은 역할을 합니다. ref는 다루고자 하는 컴포넌트에 ref 속성을 assign 함으로써 사용할 수 있습니다. 리액트 ref가 유용하게 쓰이는 경우는 특정 input에 focus를 주는 경우, 스크롤 박스를 접근하는 경우, Canvas 요소에 그림을 그리는 경우에 유용하게 사용됩니다. ref를 부여하면 DOM의 여러가지 속성 값에 접근할 수 있어 리액트의 일반적인 데이터의 흐름 (props, 부모 → 자식)을 거스를 수 있기 때문에 ref 통해 다..
[REACT] 리액트와 EVENT 리액트의 이벤트(Event) 리액트에서도 여러가지 함수에서 이벤트 객체를 다룰 수 있습니다. Vanila 자바스크립트에서 화살표 함수의 첫번째 매개변수 e는 Event 객체를 의미합니다. 리액트에서도 마찬가지로 화살표 함수의 첫번째 매개변수는 Event객체이나 조금 다릅니다. 리액트에서는 Vanila 자바스크립트를 네이티브 이벤트 객체라고 합니다. 그리고 리액트의 이벤트 객체는 이 네이티브 이벤트 객체를 감싸는 wrapper를 사용하게 됩니다. 이 wrapper 객체를 SyntheticEvent 객체라고 부르며 리액트에서는 이 객체를 통해 이벤트를 핸들링하게 됩니다. 사용 상 네이티브 이벤트 객체와 크게 다르진 않지만, 리액트 이벤트 객체인 만큼 몇 가지 다른점이 존재하긴 합니다. 리엑트에서는 네이티브 ..
[REACT] 리액트의 STATE 1. REACT STATE란? 리액트의 state란 컴포넌트 내에서 바뀔 수 있는 값을 말합니다 react의 컴포넌트의 props는 부모 컴포넌트로부터 받은 값을 그저 읽기 전용으로 사용할 수 밖에 없습니다. 그러나 react의 state를 사용하면 부모 컴포넌트로부터 받은 값으로 여러가지 데이터 처리가 가능합니다. 리액트의 state와 props는 구분되는 개념입니다. (같지 않음) 클래스형 컴포넌트의 state 클래스형 컴포넌트에서는 크게 두가지 방법으로 state를 선언할 수 있습니다. 첫번째는 생성자를 이용하여 state를 설정하는 방법입니다. 두번째는 state = {} 문법으로 선언하는 방법입니다. 생성자로 state를 선언하고 사용한 경우 import { Component } from "re..
[REACT] 리액트의 컴포넌트(COMPONENT) 1. REACT의 컴포넌트(Component)란? 리액트는 화면을 컴포넌트(Component) 단위로 구성합니다. 컴포넌트란 화면을 구성할 수 있는 각각의 자바스크립트 파일들을 의미하며 root 태그로 묶여있습니다. 리액트는 이것을 **컴포넌트(Component)**라고 부르며 이것을 기준으로 화면을 렌더링합니다. 컴포넌트가 된 js 파일들은 App.js에서 정말로 부품처럼 사용이 가능합니다. 예컨데, MyCompoent.js 라는 이름을 가진 js 파일은 App.js 에서 태그로 사용 가능합니다. 2. 리액트의 컴포넌트 타입 리액트의 컴포넌트는 크게 두가지 타입으로 나뉩니다. 하나는 클래스형 컴포넌트이고 다른 하나는 함수형 컴포넌트 입니다. 함수형 컴포넌트는 본래 리액트 컴포넌트의 state를 다루지 ..
[MySQL] MySQL Event Scheduler MySQL Event Scheduler란? This statement creates and schedules a new event. The event does not run unless the Event Scheduler is enabled. For information about checking Event Scheduler status and enabling it if necessary, see Section 25.4.2, “Event Scheduler Configuration”. https://dev.mysql.com/doc/refman/8.0/en/create-event.html MySQL :: MySQL 8.0 Reference Manual :: 13.1.13 CREATE EVENT Stateme..
[REACT] React와 JSX 💡 알고 가기! 본 포스트는 React CLI 환경이 모두 갖춰진 상태라는 가정 하에 글을 작성하였습니다. 혹시 처음 본다면 아래의 글을 먼저 보시거나, React 시작하기 등의 가이드를 참조해주세요. 1. JSX란? JavaScript + XML의 약자로 자바스크립트와 html 문법을 함께 쓸 수 있는 문법입니다. 정말 말 그대로 자바스크립트와 html 을 같이 사용 가능합니다. const element = Hello World! 물론, 무작정 빈 자바스크립트 파일에 저렇게 작성한다고 JSX가 지원되지는 않습니다. 리액트 CLI가 깔려 있거나, babel을 cdn 방식으로 사용하는 등의 추가 설정이 필요합니다. 본 포스트에서는 cdn 방식의 jsx 사용법은 다루지 않습니다. 2.1. 리액트로 화면 구성..
Chapter 14. 예외(Exception) 처리 14. 1. 예외(Exception)란? 프로그램이 어떤 원인에 의해 오동작하거나 비정상으로 종료되는 경우를 예외(Exception)라고 합니다. 예외(Exception)는 에러(Error)와 구분되는데, 에러(Error)란 메모리 부족, stack overflow와 같이 발생하면 복구할 수 없어서 디버깅이 필요한 상황을 일컫는 말이고, 예외(Exception)는 네트워크 끊김, 파일을 읽어오는 데 실패하는 경우 등 에러보다 비교적 가벼운 사안으로 프로그래밍 코드에 의해 수습될 수 있는 상황을 말합니다. 자바에서 예외는 Throwable 클래스를 상속받습니다. 형제 클래스로써 Error 클래스가 있으며 Error 클래스를 상속받는 클래스들을 Error 계열, Exception을 상속받는 클래스를 Exce..

티스토리툴바