전체 글57 React 이벤트 핸들링 이벤트 -> 유저가 웹 브라우저에서 DOM 요소들과 상호작용하는 것 onChange(): Form 요소는 값이 바뀔 때 실행 onMouseover(): 버튼에 마우스 커서 올렸을 때 onClick(): 클릭 input요소 여러개 이벤트 핸들링 -> 메소드를 여러 개 만듬 -> event 객체 활용 = e.target.name값 사용 (1) 이벤트에 실행할 Js코드가 아닌, 함수 형태의 값 전달 -> 화살표 함수 문법으로 함수를 만들어 바로 전달 -> render() 렌더링 외부에 미리 만들어서 전달 (2) DOM 요소에만 이벤트 설정가능 -> DOM 요소: div, button, input, form, span... -> 직접 만든 컴포넌트에 전달X = 이름이 onClick인 props를 전달하는 것 /.. 2022. 5. 1. [리액트를 다루는 기술] 7장. LifeCycle //LifeCycleSample.js import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null, } myRef: null; //ref 를 설정할 부분 constructor(props){ super(props); console.log('constructor'); } static getDerivedStateFromProps(nextProps, prevState){ if(nextProps.color !== prevState.color){ //조건에 따라 값 동기화 return { color: nextProps.color }; } return null; //st.. 2022. 5. 1. [리액트를 다루는 기술] 3장. props, state //MyComponents.js 파일 import React, {Component} from 'react'; import PropTypes from 'prop-types'; //필수 props를 지정하거나, props 타입을 지정해야 할 때 사용한다. class MyComponent extends Component { static defaultProps = { name: '기본이름' } //name props 값을 지정하지 않았을 때, 기본 값으로 설정한다. static propTypes = { name: PropTypes.string, //name props 타입을 문자열로 설정한다. age: PropTypes.number.isRequired //age props 타입은 숫자이고, 필수로 있어야한다. .. 2022. 5. 1. [리액트를 다루는 기술] 1,2장. JSX import React, {Component} from 'react'; import './App.css' class App extends Component { render(){ const text = '당신은 어썸한가요?'; const condition = true; const style = { backgroundColor: 'gray', border: '1px solid black', height: Math.round(Math.random()*300)+50, width: Math.round(Math.random()*300)+50, WebkitTransition: 'all', MozTransition: 'all', msTransition: 'all' }; return( 리액트 안녕! {text} { co.. 2022. 5. 1. 인덱스, 쿼리 속도를 향상시키는 개체 : 개념과 사용하는 이유 포스팅 내용 인덱스 개념 인덱스를 사용하는 이유 인덱스 사용은 항상 성능을 향상시키는 것은 아니다. 인덱스 종류 : Clustered Index와 Non-Clustered Index 이번 포스팅은 쿼리 조회 속도를 향상시키는 개체인 인덱스에 대해 알아보고자 한다. 1. 인덱스 개념 인덱스 (Index) 란, '데이터 검색 성능의 향상' 을 위해 테이블 열에 사용하는 자료구조로, 데이터베이스 객체이다. 데이터베이스를 책에 비유하자면, 인덱스는 책의 색인과도 같다. 보통 select 쿼리의 where 절이나 join 예약어 사용시에 인덱스가 사용되며, select 쿼리의 검색 속도를 빠르게 하는데 목적이 있다. 2. 인덱스를 사용하는 이유 테이블에 데이터가 쌓여가면서 db는 저장 공간에 비어있는 공간이 있으.. 2022. 2. 6. select 문 실행순서와 처리 과정 select 문 실행순서 group by 와 having 절에서의 주의사항 조건절 : having 절과 where 절의 차이 where절에서의 alias 사용은 ‘Invalid Identifier’ 에러를 발생시킨다. select 문 실행순서 SQL 문은 비절차적인 언어지만, 내부적으로 DBMS에 의해 실행 순서를 가진다. SELECT [ ALL | DISTICT ] [ TABLE NAME.]{ * | 속성이름 [[AS] 별칭]} FROM { 테이블이름 [[AS] 별칭]} [ INNER JOIN | LEFT OUTER JOIN | RIGHT OUTER JOIN { 테이블 이름 } ON 검색조건 ] WHERE 검색조건 GROUP BY 속성이름,.. HAVING 검색조건 [ 질의 UNION 질의 | 질의 U.. 2022. 1. 24. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
