/* 기본 */
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
/* 여러 요소를 표현하기 */
/* CreateElement - https://reactjs.org/docs/react-api.html#createelement */
let h1 = React.createElement('h1', null, 'Hello World');
ReactDOM.render(
React.createElement('div', null, h1, h1),
document.getElementById('root')
);
/* 여러 요소를 표현하기 - 컴포넌트 기반 */
class HelloWorld extends React.Component {
render() {
return React.createElement('h1', null, 'Hello, World!')
}
}
ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(HelloWorld),
React.createElement(HelloWorld)
),
document.getElementById('root')
);
/* 속성 전달하기 - Hello '이름' 표현하기 */
/* #Template Literal - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
*/
class HelloWorld extends React.Component {
render() {
console.log(this.props);
return React.createElement('h1', null, `Hello ${this.props.name}`)
}
}
ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(HelloWorld, { name: 'kim' }),
React.createElement(HelloWorld, { name: 'yoon'})
),
document.getElementById('root')
);
/* JSX 사용하기 */
class HelloWorld extends React.Component {
render() {
console.log(this.props);
return (
<h1>Hello {this.props.name}</h1>
)
}
}
ReactDOM.render(
<div>
<HelloWorld name='kim' />
<HelloWorld name='yoon' />
</div>,
document.getElementById('root')
);
React에서 이벤트 다루기 React에서 DOM 이벤트 다루기 - function vs. Arrow Function > 예제 코드 React를 다른 라이브러리와 통합하기: jQuery UI 이벤트 https://www.youtube.com/watch?v=AMMetkCvztg...
React 컴포넌트와 라이프사이클 이벤트 라이프 사이클 이벤트란 React의 컴포너트는 생명주기(Life cycle)을 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다. 이러한 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다. React v16.3 이...
React 컴포넌트 상태 객체 React 컴포넌트는 상태 값을 이용해 UI를 표현한다. 컴포넌트 상태는 객체의 인스턴스 속성(Properties)을 이용해 관리하며, 컴포넌트간에 단방향으로 데이터를 주고받는 props와 컴포넌트 내부에서 사용하는 state가 있다. reactjs-props-state props props는 컴포넌트에서 ...
React란 무엇인가? - Facebook이 만든 UI 컴포넌트 라이브러리 특징 - 자바스크립트 기반의 컴포넌트 기반 아키텍처 + 템플릿언어가 아닌 자바스크립트로 컴포넌트 작성 + 특정 관심사에 집중된 기능 블록 (관심사의 분리) - Virtual DOM - 단방향 데이터 흐름 지향 Questions - 컴포넌트 + 컴포넌...