본문 바로가기
Programming Step20
REACT 공식 문서 정리 - 7. 이벤트 처리하기 7. 이벤트 처리하기 7.1 이벤트 처리방식의 차이 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 비슷하며, 차이는 다음과 같다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 1 2 3 // 버튼이 눌렸을 때 해당 함수 작동 Activate Lasers Colored by Color Scripter cs 1 2 3 // 버튼이 눌렸을 때 해당 함수 작동 Activate Lasers Colored by Color Scripter cs React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 한.. 2021. 6. 20.
REACT 공식 문서 정리 - 6. State 와 생명주기 6. State 와 생명주기 6.1 State의 정의 State는 React Component Class의 instance이다. Component의 동작을 제어하는 관측 할 수있는 속성 집합의 개체로 정의 된다. Component의 State는 Lifetime에 따라 변경될 수 있는 정보를 보유한 객체이다. 6.2 Props와 State의 차이. Props는 변하지 않는 속성을 가지고 있다. State는 시간이 지남에 따라 변경 될 수 있는 데이터를 가지고 변경 후 동작을 제어하는데 사용되는 관찰 가능한 개체이다. State는 컴포넌트 안에서만 사용할 수 있는 반면 Props는 제한이 없다. 6.3 생명주기(Life Cycle) 클래스 컴포넌트와 함수형 컴포넌트의 생명주기는 동일하게 동작한다. 6.3.1.. 2021. 6. 20.
REACT 공식 문서 정리 - 5. Component 와 Props 5. Component 와 Props 5.1 Component의 정의 컴포넌트의 제작 방법은 함수형과 클래스형으로 나누어져 있다. 컴포넌트를 쓰는 이유중 하나는 재사용을 편하게 하기 위함이다. App 최상위 컴포넌트 아래에 여러 사용자 정의 컴포넌트가 존재한다. 클래스형 보다는 함수형이 간결하게 사용할 수 있다. 5.2 props의 정의 React가 JSX 속성 또는 자식을 해당 컴포넌트에 단일 객체로 전달하는데 이 객체를 Props라 한다. 주의사항 : props는 읽기 전용이므로 수정 X ex) 함수 컴포넌트와 클래스 컴포넌트 예시 1 2 3 4 5 6 7 8 9 10 // 함수형 function Welcome(props) { return Hello, {props.name}; } // 클래스형 cla.. 2021. 6. 20.
REACT 공식 문서 정리 - 4. Element 렌더링 4. Element 렌더링 4.1 element의 정의 Element는 컴포넌트의 구성요소이며 React 앱의 가장 작은 단위이다. 특정 부분만 리렌더링 할 수 있기에 효율적인 자원관리를 할 수있다. 1 2 3 4 5 6 7 8 9 function Welcome(props) { return Hello, {props.name}; } const element = ; ReactDOM.render( element, document.getElementById('root') ); cs 위의 예시는 다음과 같은 일이 일어난다. 엘리먼트로 ReactDOM.render()를 호출한다. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다. Welcome 컴포넌트는 결과적으로 Hel.. 2021. 6. 20.
REACT 공식 문서 정리 1~3 1. React를 배우는 이유 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 한다. 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다. 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React가 제작됨. 2. React를 배우기 전 기본 조건 HTML 및 CSS 에 대한 기본 지식. Javascript 및 프로그램에 대한 기본 지식 DOM 에 대한 기본적인 이해. ES6 구문 및 기능 Node.js 및 npm 설치 3. JSX 표현식 JavaScript를 확장한 문법이며 UI를 제작에 React와 함께 사용할 것을 권장한다. JavaScript의 모든 기능이 포함되어 있다. JSX는 HTML문법을 사용해서 View를 구성할 수 있게 도와주.. 2021. 6. 20.
REACT 공식 문서 정리 REACT 공식 문서 정리 목차 1. React를 배우는 이유 2. React를 배우기 전 기본 조건 3. JSX 표현식 1. React를 배우는 이유 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 한다. 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있다. 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React가 제작됨. 2. React를 배우기 전 기본 조건 HTML 및 CSS 에 대한 기본 지식. Javascript 및 프로그램에 대한 기본 지식 DOM 에 대한 기본적인 이해. ES6 구문 및 기능 Node.js 및 npm 설치 3. JSX 표현식 JavaScript를 확장한 문법이며 UI를 제작에 React와 함께 사용할 것을 권장.. 2021. 6. 20.
소켓 프로그래밍 #define WIN32_LEAN_AND_MEAN #include #include #include #include #include // Need to link with Ws2_32.lib, Mswsock.lib, and Advapi32.lib #pragma comment (lib, "Ws2_32.lib") #pragma comment (lib, "Mswsock.lib") #pragma comment (lib, "AdvApi32.lib") #define DEFAULT_BUFLEN 512 #define DEFAULT_PORT "27015" int __cdecl main(int argc, char** argv) { WSADATA wsaData; SOCKET ConnectSocket = INVALID_SOCKE.. 2020. 4. 9.
React import할때 {} 유무 아래 두 방식의 차이는 import 방식의 차이이다. import React from 'react' class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 위의 경우 React 객체 안에있는 Component를 React.Component 형식으로 사용했지만. import React, { Commponent } from 'react'class Welcome extends Component { render() { return Hello, {this.props.name}; } } 아래의 경우 Component 로 바로 가져와 쓸수있다. MDN 문서의 예시는 다음과 같다. import defaultExport.. 2020. 1. 23.

티스토리툴바