React 1. Basic(1)
1. Basic
setState
- 리액트에서는 state값을 바꿀때 setState를 사용한다
- 함수를 호출할때 인자로 바꾸고 싶은 값을 객체형태로 받는다
onClick
- 자바스크립트(onclick="")와 다르게
대문자와 중괄호(onClick={})를 사용
해야한다 (camelCase로 작성)
- 이벤트가 호출됬을때 실행되는 함수 안에서는 this의 값이 컴포넌트 자기 자신을 가리키지 않고 아무값고 세팅되어있지 않다
- 이벤트를 설치할때 this를 찾을 수 없어서 에러가 발생하면 함수가 끝난 직후에
.bind(this)
를 사용해준다
- .bind(this) 를 사용하기 싫다면 arrow function 으로 만들어 사용하면 된다
// 예시
<a href ='/' onClick={function(e) {
e.preventDefault(); // 이벤트 고유의 동작을 중단시켜준다
// this.state.mode = 'welcome'; // state를 변경할때 이렇게 작성하면 아무변화 X
this.setState({ // state를 변경할땐 setState함수를 이용한다
mode:'welcome' // 인자로 바꾸고 싶은 값을 받는다
});
}.bind(this)}>
Make Component Event
- 부모 컴포넌트에서 이벤트를 실행하기 위해서 함수의 이름을 props로 자식 컴포넌트에게 전달한다
- 자식 컴포넌트는 이벤트 내에서 전달받은 props를 호출한다
- 자식 컴포넌트에서 이벤트가 발생되면 부모 컴포넌트에게 전달받은 props가 호출되면서 부모 컴포넌트의 함수가 실행된다
//예시
// 부모 컴포넌트
<Subject
title={this.state.subject.title}
sub={this.state.subgect.sub}
onChangePage={function() { // onChangePage라는 함수를 props로 전달
this.setState({mode:'welcome'}); // 자식 컴포넌트에서 이벤트가 발생되면 실행
}.bind(this)} />
// 자식 컴포넌트
<a href='/' onClick={function(e){
e.preventDefault();
this.props.onChangePage(); // props로 전달된 onChangePage함수 호출
}.bind(this)}>
data-
- 이벤트 내부에는 target이라는 속성이 있어서 해당 이벤트가 위치한 태그와 속성에 접근할 수 있다
- data- 로 시작하는 속성은
dataset
이라는 특수한 이름으로 접근할 수 있다
- data- 속성을 사용하지 않아도 인자로 바인딩해줄수도 있다 이 경우 bind에 두번째 인자로 들어온 값을 함수의 첫번째 매개변수값으로 차례로 들어가게 되고 항상
이벤트가 가장 마지막 인자
가 된다
//예시
// 부모 컴포넌트
<TOC
onChangePage={function(id) {
this.setState({
mode:'read',
selected_content_id: Number(id)
});
}.bind(this)} />
// 자식 컴포넌트
<a href={'/content/'+data[i].id}
data-id={data[i].id} // data-이름={}
onClick={function(e){
e.preventDefault();
this.props.onChangePage(e.target.dataset.id);
// a태그에 data- 속성을 가진 id
}.bind(this)}>
/*
// data- 속성을 이용하지 않고 사용하는 방법
<a href={'/content/'+data[i].id}
onClick={function(id, e){ // 이벤트는 항상 가장 마지막 인자
e.preventDefault();
this.props.onChangePage(id);
}.bind(this, data[i].id)}> // 두번째 인자로 바인딩 가능
*/
form (HTML)
<form>
태그는 웹 페이지에서의 입력 양식을 의미
- name: 폼의 이름
- action: 폼 데이터가 전송되는 백엔드 url
- method: 폼 전송 방식 (GET / POST)
- 등등..
input
<form>
태그는 전체 양식을 의미하며 화면에 보이지 않는 추상적인 태그이다
- 실제로 사용자가 양식을 입력하기 위한 태그는
<input>
태그 등이 사용된다
- type 속성을 통해 종류를 나타내고 name을 통해 데이터의 이름, value를 통해 기본 값을 지정
대문자와 중괄호(onClick={})를 사용
해야한다 (camelCase로 작성).bind(this)
를 사용해준다// 예시
<a href ='/' onClick={function(e) {
e.preventDefault(); // 이벤트 고유의 동작을 중단시켜준다
// this.state.mode = 'welcome'; // state를 변경할때 이렇게 작성하면 아무변화 X
this.setState({ // state를 변경할땐 setState함수를 이용한다
mode:'welcome' // 인자로 바꾸고 싶은 값을 받는다
});
}.bind(this)}>
//예시
// 부모 컴포넌트
<Subject
title={this.state.subject.title}
sub={this.state.subgect.sub}
onChangePage={function() { // onChangePage라는 함수를 props로 전달
this.setState({mode:'welcome'}); // 자식 컴포넌트에서 이벤트가 발생되면 실행
}.bind(this)} />
// 자식 컴포넌트
<a href='/' onClick={function(e){
e.preventDefault();
this.props.onChangePage(); // props로 전달된 onChangePage함수 호출
}.bind(this)}>
dataset
이라는 특수한 이름으로 접근할 수 있다이벤트가 가장 마지막 인자
가 된다//예시
// 부모 컴포넌트
<TOC
onChangePage={function(id) {
this.setState({
mode:'read',
selected_content_id: Number(id)
});
}.bind(this)} />
// 자식 컴포넌트
<a href={'/content/'+data[i].id}
data-id={data[i].id} // data-이름={}
onClick={function(e){
e.preventDefault();
this.props.onChangePage(e.target.dataset.id);
// a태그에 data- 속성을 가진 id
}.bind(this)}>
/*
// data- 속성을 이용하지 않고 사용하는 방법
<a href={'/content/'+data[i].id}
onClick={function(id, e){ // 이벤트는 항상 가장 마지막 인자
e.preventDefault();
this.props.onChangePage(id);
}.bind(this, data[i].id)}> // 두번째 인자로 바인딩 가능
*/
<form>
태그는 웹 페이지에서의 입력 양식을 의미- name: 폼의 이름
- action: 폼 데이터가 전송되는 백엔드 url
- method: 폼 전송 방식 (GET / POST)
- 등등..
<form>
태그는 전체 양식을 의미하며 화면에 보이지 않는 추상적인 태그이다<input>
태그 등이 사용된다type | 종류 | type | 종류 |
---|---|---|---|
text | 일반 문자 | radio | 한개만 선택할 수 있는 컴포넌트 |
password | 비밀번호 | checkbox | 다수를 선택할 수 있는 컴포넌트 |
button | 버튼 | file | 파일 업로드 |
submit | 양식 제출용 버튼 | hidden | 사용자에게 보이지 않는 숨은 요소 |
reset | 양식 초기화용 버튼 |
textarea
<textarea>
태그는 여러줄의 텍스트를 입력하는 창을 만든다
select, option
<select>
및<option>
태그는 드롭다운 리스트를 만든다
이밖에
<label>
<button>
<optgroup>
<fieldset>
required 속성
- input 태그의 required 속성은 폼 데이터가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시한다
- 불리언(boolean) 속성으로 false값을 가지다 값이 채워지면 true값을 가진다
- required 속성이 제대로 동작하는 input 요소의 type 속성값은 다음과 같다
- checkbox, date, email, file, number, password, pickers, radio, search, tel, text, url
onSubmit
// 예시
<form action='/create_process' method='post'
onSubmit={function(e) {
e.preventDefault();
this.props.onSubmit(
e.target.title.value, // React
e.target.desc.value // Hello, React!
);
}.bind(this)}>
<p> // 입력된값이 이름.value값으로 저장된다 // 예) React 입력
<input type=text' name='title' placeholder='title'></input>
</p>
<p> // 예) Hello, React! 입력
<input type=text' name='desc' placeholder='description'></input>
</p>
<p>
<input type='submit'></input> // 전송
</p>
</form>
shouldComponentUpdate
- shoudComponentUpdate를 사용하면
true
가 리턴되는 경우에만 render()를 실행한다
// 예시
class TOC extends Component {
shouldComponentUpdate(newProps, newState){
// newProps.data : 바뀐 값
// this.props.data : 바뀌기 전의 값(현재 값)
return this.props.data !== newProps.data;
// 새로운 변경사항이 있으면 값이 같지 않으므로 true를 반환하고 render를 실행한다
}
render() {
// shouldComponentUpdate가 true이면 실행
}
}
- 하지만 데이터 원본을 변경하는 경우 newProps와 this.props가 같다
- 그러므로 shouldComponentUpdate 메서드를 사용하고싶다면 원본 변경을 하지말고 복제본을 사용하는 것이 좋다
onChange
- props의 데이터는 읽기전용이어서 수정을 하기 위해선 state화 시켜줘야 한다
- state화를 해도 onChange를 같이 써주지 않으면 수정이 안된다
// 예시
// 자식 컴포넌트
class UpdateContent extends Component {
construtor(props){
super(props);
this.state = { // props를 state화 시켜준다
title: this.props.data.title
}
}
render() {
return (
...
<input
type='text'
name='title'
placeholder='title'
value={this.state.title}
/*
// value값으로 props를 주면 수정이 안된다
value={this.props.data.title}
*/
onChang={function(e){ // 수정하기 위해서 onChang 이벤트를 사용해야한다
this.setState({
title: e.target.value
});
}.bind(this)}
></input>
Author And Source
이 문제에 관하여(React 1. Basic(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@khxxjxx/React-2.-Event저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)