반업주부의 일상 배움사
단숨에 React.js 이해하기 :: create-react-app 없이 본문
반응형
index.html 파일 하나로 끝내보죠.
react.js와 react-dom.js만 있으면 돼요.
<head>에 이걸 넣어요.
<!-- head -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요.
<!-- body -->
<div id="content"></div>
<script>
ReactDOM.render(
React.createElement('h1', null, 'Hello World'),
document.getElementById('content')
);
</script>
이번엔 클래스 컴포넌트를 만들어 봐요.
<!-- body -->
<div id="content"></div>
<script>
class HelloWorld extends React.Component {
render() {
return React.createElement('h1', null, 'Hello World');
}
}
ReactDOM.render(
React.createElement(HelloWorld, null),
document.getElementById('content')
);
</script>
이번엔 함수 컴포넌트를 만들어 봐요.
<!-- body -->
<div id="content"></div>
<script>
function helloWorld(props) {
return React.createElement('h1', null, 'Hello World');
}
ReactDOM.render(
React.createElement(helloWorld, null),
document.getElementById('content')
);
</script>
클래스 컴포넌트의 props에 값을 넘겨봐요.
컴포넌트를 재사용할 수 있어요.
<!-- body -->
<div id="content"></div>
<script>
class HelloWorld extends React.Component {
render() {
return React.createElement('h1', null, this.props.title);
}
}
ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(HelloWorld, { title: 'Hello World' }),
React.createElement(HelloWorld, { title: 'Hello Banjubu' }),
React.createElement(HelloWorld, { title: 'Hello Juelria' })
),
document.getElementById('content')
);
</script>
함수 컴포넌트의 props에도 값을 넘겨요.
<!-- body -->
<div id="content"></div>
<script>
function helloWorld(props) {
return React.createElement('h1', null, props.title);
}
ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(helloWorld, { title: 'Hello World' }),
React.createElement(helloWorld, { title: 'Hello Banjubu' }),
React.createElement(helloWorld, { title: 'Hello Juelria' })
),
document.getElementById('content')
);
</script>
클래스 컴포넌트는 생성주기에 따라 자동으로 호출되는 메소드가 있어요.
<!-- body -->
<div id="content"></div>
<script>
class HelloWorld extends React.Component {
constructor() {
super();
console.log('constructor');
}
componentDidMount() {
console.log('componentDidMount');
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
render() {
return React.createElement('h1', null, this.props.title);
}
}
ReactDOM.render(
React.createElement(HelloWorld, { title: 'Hello World' }),
document.getElementById('content')
);
</script>
태그를 생성할 때 속성값을 넣을 수 있어요.
<a> 태그로 해보죠.
<!-- body -->
<div id="content"></div>
<script>
class HelloWorld extends React.Component {
render() {
return React.createElement(
'a',
{ href: 'https://banjubu.tistory.com' },
'Go to the Banjubu.com'
);
}
}
ReactDOM.render(
React.createElement(HelloWorld, { title: 'Hello World' }),
document.getElementById('content')
);
</script>
한 번 보여주고 끝나는 페이지는 재미없죠?
클래스 컴포넌트에는 state라는 속성과 setState라는 메소드가 있어서 값이 변할 때마다 render가 다시 호출되요.
화면을 다시 그린다는 의미에요.
<!-- body -->
<div id="content"></div>
<script>
class HelloWorld extends React.Component {
constructor() {
super();
this.state = { txt: '' };
}
render() {
return React.createElement(
'div',
null,
React.createElement('label', null, this.state.txt),
React.createElement('input', {
value: this.state.txt,
onChange: (event) =>
this.setState({ txt: event.target.value }),
})
);
}
}
ReactDOM.render(
React.createElement(HelloWorld, null),
document.getElementById('content')
);
</script>
함수 컴포넌트는 useState 훅(hooks)을 이용해요.
<!-- body -->
<div id="content"></div>
<script>
function helloWorld() {
const [txt, setTxt] = React.useState('');
return React.createElement(
'div',
null,
React.createElement('label', null, txt),
React.createElement('input', {
value: txt,
onChange: (event) => setTxt(event.target.value),
})
);
}
ReactDOM.render(
React.createElement(helloWorld, null),
document.getElementById('content')
);
</script>
기본적인건 다 배웠네요.
이제 create-react-app을 이용해서 JSX, styled-components, 애니메이션, 라우팅, 리덕스 정도 더 배우고 실무에 들어가서 필요에 따라 하나씩 학습하면 돼요.
영어, 중국어 공부중이신가요?
홈스쿨 교재. 한 권으로 가족 모두 할 수 있어요!
한GLO 미네르바에듀 : 네이버쇼핑 스마트스토어
한글로 영어가 된다?! 한글로[한GLO]는 영어 중국어 일어 러시아어 스페인어가 됩니다!!
smartstore.naver.com
반응형
LIST
'IT 인터넷 > React Native & JS' 카테고리의 다른 글
| [React.js] 단숨에 스타일링 익히기 :: styled-components (0) | 2021.07.17 |
|---|---|
| [React.js] 단숨에 라우팅 이해하기 :: Routing (0) | 2021.07.17 |
| [React.js] 단숨에 JSX 알아보기 (0) | 2021.07.17 |
| [React Native] Expo 로 To-do 앱 만들기 :: MobX 버전 (0) | 2020.11.13 |
| [React Native] Expo 로 To-do 앱 만들기 :: ActiveJS 버전 (0) | 2020.11.13 |
Comments