728x90
자바스크립트 라이브러리 맛보기
📌 일반적인 공부루틴
- 자바스크립트 기본
- 프론트엔드 라이브러리 이것저것
- Node.js기본
- 백앤드 라이브러리 이것저것
- npm을 활용한 전역 모듈
📌 리액트 라이브러리(react library)
규모가 큰 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 쉽게 구성할 수 있도록 도와줍니다.
리액트 네이티브를 활용해서 스마트폰에서도 빠른 속도로 작동하는 애플리케이션을 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<!-- 리액트 코어 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- 리액트 문서관련 처리 -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 리액트 코드 쉽게 작성하기 위한 trans 컴파일러 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script>
</script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const 컨테이너 = document.querySelector('#root')
const 컴포넌트 = <h1>Hello World...!</h1>
ReactDOM.render(컴포넌트, 컨테이너)
</script>
</body>
</html>
📌 JSX
JavaScript Extension
자바스크립트 확장 문법
바벨 프로그램 → 자바스크립트 → 웹 브라우저에서 사용 가능!!
📌 표현식 출력하기
{표현식} 기호를 사용합니다.
<script type="text/babel">
const 콘텐츠 = '안녕하세요'
const 속성 = 'http://placedog.net/400/200'
const 스타일 = {
backgroundColor : 'yellow'
}
const 배열 = [<li>사과</li>,<li>오렌지</li>,<li>바나나</li>]
const 핸들러 = (event) => {
alert('클릭했습니다!')
}
// onclick → onClick
// onchange → onChange
// onmousedown → on mouse down → on Mouse Down → onMouseDown
const 컨테이너 = document.querySelector('#root')
const 컴포넌트 = <div onClick = {핸들러}>
<h1 style={스타일}>{콘텐츠}</h1>
<img src={속성}/>
<ul>{배열}</ul>
</div>
ReactDOM.render(컴포넌트, 컨테이너)
</script>
📌 컴포넌트의 기본적인 속성과 메소드
React.Component 클래스는 여러 속성과 메소드를 제공해줍니다. 이러한 속성을 변경하고 메소드를 오버라이트해 우리가 필요한 속성과 메소드를 클래스에 추가해서 컴포넌트를 만듭니다.
<script type="text/babel">
class App extends React.Component{
constructor(props) {
// this.props = props
super(props) // 부모 생성자에 props 전달하면서 호출
}
// 메서드
render(){
return <h1>{this.props.속성A} - {this.props.속성B}</h1>
}
}
const 컨테이너 = document.querySelector('#root')
const 컴포넌트 = <App 속성A="값A" 속성B="값B"/>
ReactDOM.render(컴포넌트, 컨테이너)
</script>
props는 properties의 약자로 속성들을 의미합니다.
📌 리액트를 활용한 현재 시간 출력 프로그램
<script type="text/babel">
class Timer extends React.Component{
constructor(props){
super(props)
// 화면에 변화하는 값을 만들 때 this.state 객체
this.state = {
현재_시간: new Date().toLocaleString()
}
}
componentDidMount () {
// 화면에 변화하는 값을 지정하고 + 반영할때 this.setState()
this.timerID = setInterval(() => {
this.setState({
// setState 메소드를 사용해서 시간을 변경한다.
현재_시간: new Date().toLocaleString()
})
}, 1000)
}
componentWillUnmount () {
clearInterval(this.timerID)
}
render () {
return <h1>{this.state.현재_시간}</h1>
}
}
class App extends React.Component{
constructor(props) {
// this.props = props
super(props) // 부모 생성자에 props 전달하면서 호출
}
// 메서드
render(){
return <Timer />
}
}
const 컨테이너 = document.querySelector('#root')
const 컴포넌트 = <App 속성A="값A" 속성B="값B"/>
ReactDOM.render(컴포넌트, 컨테이너)
</script>
출력할 속성에 시간을 저장한다. 속성값을 변경할때 이 메소드를 사용한다.
컴포넌트 화면에서 출력, 제거 될때 이 명령어를 사용한다. 정도로 이해하고 넘어가면 됨.
📌 이벤트 연결하기
<script type="text/babel">
class App extends React.Component{
constructor(props) {
// this.props = props
super(props) // 부모 생성자에 props 전달하면서 호출
this.이벤트핸들러 = this.이벤트핸들러.bind(this)
this.state = {
숫자: 0
}
}
// 메서드
render(){
return <h1 onClick={this.이벤트핸들러}>{this.state.숫자}번 클릭했습니다.</h1>
}
이벤트핸들러 (event) {
this.setState({
숫자: this.state.숫자 + 1
})
}
}
const 컨테이너 = document.querySelector('#root')
const 컴포넌트 = <App />
ReactDOM.render(컴포넌트, 컨테이너)
</script>
이번강의에서 배운 state와 event 연결은 코드 자체를 외우는 것을 추천!
참고한 책 : 혼자 공부하는 자바스크립트
'JavaScript' 카테고리의 다른 글
| 자바스크립트 문법 뽀개기2 (0) | 2022.11.22 |
|---|---|
| 자바스크립트 문법 뽀개기1 (0) | 2022.11.22 |
| 자바스크립트 클래스의 고급 기능 (0) | 2022.11.10 |
| 자바스크립트 클래스의 기본 기능 (0) | 2022.11.10 |
| 자바스크립트 예외 처리 (0) | 2022.11.09 |
