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를 통해 기본 값을 지정

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>