안녕하세요. 훈츠입니다. 요즘 Web 프로젝트를 경험해보고 싶어서 새롭게 공부하고 있는 리액트에 대한 정리 글입니다. 저 역시 리액트를 잘모르는 관계로 정리 형태로 글을 남겨 봅니다.
심도 있게 리액트를 학습해보시길 원하시면 생활코딩 혹은 다른 글을 참조하세요.
글 목록
- 콤포넌트 관련 간단한 설명 Props, State, Event
- Props 사용법
- State 사용법
- Event 사용법
- 코드 공유
콤포넌트 관련 간단한 설명 Props, State, Event
리액트에서는 콤포넌트를 상속하여, 새로운 콤포넌트를 만들수 있습니다. 이때 안에는 rander 함수를 호출하게 되어있는데 이 Rander 함수가 유사 자바스크립트, 유사 HTML 을 자바스크립트와 HTML 코드로 바꿔주는 일을 합니다. 그리고 유사 자바 스크립트이고 유사 HTML이기 때문에 리액트에서 알려주는 방법대로 만들면 됩니다.
콤포넌트는 세가지 특성이 있습니다.
첫째, props (property ) 를 가집니다.
둘째, state 상태를 가집니다.
셋째, event 를 만들수도 있습니다.
Props 사용법
먼저 props 는 사용자 입장에서 값을 '입력' 하는것 입니다. 이걸로 사용되어 지는 콤포넌트로 속성 값을 전달 할수 있습니다.
전달 하는 방법은 함수의 매개변수에 전달하는 것과 동일 합니다.
다음을 보면 이해에 도움이 될것 같습니다. 이해를 돕기 위해 문법은 배제 하였습니다.
State 사용법
그럼 이형태에서 App.콤포넌트에서 입력값을 고정형태가 아닌 변수 형태로 넣는법을 알아보겠습니다.
다음과 같은 형태로 넣게 됩니다. 바로 랜더 함수가 호출되기 이전에 생성자 함수에 생성자값으로 props 를 전달하고 생성자로 props 전달하고나면
바로 그밑에서 this.state = 값을 주게 되어있습니다.
자 이번에는 생성자안에 있는 state의 변수값을 변경 시키려면 어떻게 해야할까요?
이곳에서 리액트만의 특성이 있습니다. 바로 state 나 props 의 값이 변화하게 되면 모든 콤포넌트들이 다시 호출 되고 다시 리로드 된다는 특성입니다.
첫째, 랜더 함수 안에서 state.변수값.속성값 = '입력값' 다음과 같은 형태는 허용 되지 않습니다.
다음 표를 보시면 이해가 편하게 되실것 같네요.
Event 사용법
세번째 로 함수 이벤트를 넣는 방법에 대해 설명 드리겠습니다.
1. 익명함수 만들기
함수 끝에 bind(this) 로 함수 안에 현 App.Component 의 주소값 넘겨주기
기본 함수 형태에서 유의 점
1. .bind(this) 이부분을 꼭 해주셔야 합니다.
2. 함수 자체적으로 코드를 실행할때, e.preventDefault(); 기본적인 동작을 막으세요.
3. debugger; 를 통해서 디버깅이 가능합니다.
* 크롬에서는 React Debug App 이있으니 활용해 보세요.
2. App.Componet 즉 자신의 콤포넌트에서 함수를 실행할때 코드
위의 함수 형태를 이용하시면 됩니다. 마지막에 당연히 .bind(this) 를 해주셔야 합니다.
3. App 콤포넌트와 Head 콤포넌트 통신
통신 할수 있는 방법이 두가지가 있습니다. 첫번째 방법이든 두번째 방법이든 해보시고 편한 방법을 이용하세요.
저는 첫번째 방법이 좀더 쉬운것 같긴한데, 개인차가 있을테니깐요.
1. 첫번째 방법 ( e.target.dataset - data-"변수명" 활용 )
위의 그림을 보시면,
1. App.콤포넌트에서 Head 콤포넌트의 함수를 Props 로 넘겨줍니다.
2. Head.콤포넌트에서 onClick 함수에 익명 함수를 호출 하고 그안에서 props 로 전달 받은 함수를 호출 합니다.
3. Head.콤포넌트에서 data-변수명 에 전달 해줄 입력값 입력 합니다. 'data-' 는 고정된 값입니다.
4. Head.콤포넌트에 this.props.함수명 ( e.target.dataset.변수명 ) 'e.target.dataset'을 이용해서 App.Component 의 함수의 인자로 전달 합니다. 'e.target.dataset' 는 고정된 값 입니다.
5. App.콤포넌트의 익명함수에서 전달된 매개변수를 그림처럼 전달하고자 하는곳에 사용 합니다.
2. 두번째 방법 ( bind(this, this.props."변수명" 활용 ) )
1. Head 콤포넌트의 bind 함수 에서 this.props.변수명 을 이용하여 내부 익명함수의 인자값으로 전달합니다.
2. Head 콤포넌트의 익명함수의 매개변수를 이용하여, this.props.함수명(변수명) 매개변수로 전달 합니다.
3. App 콤포넌트에서 전달받은 인자값으로 그림 처럼 원하고자 하는곳에 사용합니다.
코드 공유
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
//Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드///
import React,{Component, Fragment} from 'react';
import './App.css';
class Head extends Component {
constructor(props){super(props);}
render(){
return (
<Fragment key="Head">
<h1>
<a href="/"
data-id = {this.state.id}
onClick={function(e){
e.preventDefault();
this.props.onChangePage(e.target.dateset.id)
}.bind(this)}
>{this.state.title}</a></h1>
<p>{this.state.sub}</p>
</Fragment>
);
}
}
class App extends Component {
constructor(props){
super(props);
this.state = {
SeletedMode:0,
Head:{id:'0',title:'WEB', sub:'World Wide Web!'}
}
}
render(){
return (
<Fragment key="App">
<Head
title={this.state.Head.title}
sub={this.state.Head.sub}
onChangePage={function(id) {
this.setState({ SeletedMode:id})}.bind(this)}>
</Head>
</Fragment>
);
}
}
export default App;
|
cs |
코드 혹은 내용에 오류가 있는 경우에는 댓글로 알려주시면 감사합니다.
'리액트' 카테고리의 다른 글
| 리액트 & 노드JS 서버 연동 (Http-proxy-middleware) (0) | 2020.07.09 |
|---|---|
| [리액트 react] 리액트 기본 실행 포트 변경 하기 (0) | 2020.06.26 |
| [react 리액트] 리액트 시작 create-react-app (0) | 2020.06.21 |
| [리액트 - Redux] 리덕스 전체 정리 글 (0) | 2020.06.13 |
| [React] 리액트 Create (0) | 2020.06.12 |