강의 유튜브 주소 :
https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn
일단 index.html 파일이 필요하다.
(webpack.config.js에서 entry에 적었던 파일들을 output으로 출력했을 때, 이 파일을 로드할 index.html!)
프로젝트 루트에 index.html을 생성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예제</title>
</head>
<body>
// react에서 DOM을 생성하여 넣어줄 태그! app.js에서 id값으로 접근하고 있다.
<div id="root"></div>
// webpack.config.js에서 output에 경로를 작성한 파일 입력
<script src="dist/app.js"></script>
</body>
</html>
그리고 html에서 처음으로 로드할 app.js 파일이 필요하다.
이 파일은 entry.
프로젝트 루트에 app.js 생성한다.
// insatll한 리액트 모듈
const React = require('react');
// install한 리액트 돔 모듈
const ReactDOM = require('react-dom');
// 화면에 뿌려줄 컴포넌트
const Gugudan = require('./Example');
// ReactDOM의 render 메서드를 통해 <Example /> 컴포넌트를 #root에 생성
ReactDOM.render(<Example />, document.querySelector('#root'));
위 app.js에서 로드하고 있는 컴포넌트 <Example>를 생성해보자!
const React = require('react');
// 리액트의 component 메서드 선언를 비구조화할당으로 선언한다.
// 비구조화 할당으로 선언하기 위해서는 모듈이 export 시에 해당 메서드를 export하고 있어야한다.
// 이것은 ES6문법
const { Component } = React;
// Example 컴포넌트를 생성한다.
// 위에서 비구조화할당으로 Component 선언한 메서드를 사용한다.
class Example extends Component {
// this를 사용하기 위해 construct를 사용했으나 하단에서 arrow function을 사용하면 없어도된다.
constructor(props){
super(props);
// state 선언
this.state = {
value : '',
result : ''
};
}
setExampleNumber = () => {
return '123';
};
// state 선언시에는 무조건 this.setState를 사용해서 해줘야한다.
onChange = (e) => {
this.setState({
value : e.target.value
})
};
// inputEl 선언 후 Ref 설정해주면 객체에 접근가능
inputEl;
// dom에 접근하기 위해서는 ref를 사용한다.
this.inputEl.focus();
// ref선언
onRefInput = (o) => {
this.inputEl = o;
};
render() {
return (
// React.Fragment 로 감싸줄 수 있다. (불필요한 태그 생성 방지)
<React.Fragment>
<div>
{this.state.value}
</div>
<form onSubmit={this.onSubmit}>
<input
// ref 선언
ref = {this.onRefInput}
type="number"
// value와 onChange는 함께 쓰여야한다.
// 하나만 사용하려면 value 속성 대신 defaultValue를 쓸수도 있다.
value={this.state.value}
onChange={this.onChange}
/>
<button>입력</button>
</form>
<div>
{this.state.result}
</div>
</React.Fragment>
);
}
}
// 모듈 내보내기
module.exports = Example;
'~2022 > FE-React' 카테고리의 다른 글
| React 기초 학습 8.배열에 push할때 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
|---|---|
| React 기초 학습 7.자식 컴포넌트로 props 전달 / 주석 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 6.반복문에서 key (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 5.클래스를 Hooks로 바꿔보자 (Zerocho님 강의 학습 후기) (0) | 2020.04.21 |
| React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 2. node환경에서 해보자! 필요한 패키지 다운로드.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.18 |
| React 기초 학습 1. HTML에서 React를 사용해보자.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.10 |
| ReactJS로 웹 서비스 만들기 학습 정리 (0) | 2018.08.12 |