react기초2

* class 안에 함수는 function을 안붙여도 된다!

* App.js에서 쓰는 것은 유사 자바스크립트 - jsx ( 페이스북에서 만듬 ) 

1. 컴포넌트

- 하나의 최상위 태그로 시작해야함

- Component 분리 시

// Component 파일
// 1. 컴포넌트 클래스 로딩 
import React, { Component } from 'react";

// 2. 외부에서 사용할 수 있게 허용
export default TOC;



// App.js에서 임포트
import TOC from "./components/TOC";

2. props ( 컴포넌트 내의 속성 )

- 컴포넌트를 변경 시 사용자에게 제공 - 컴포넌트 조작 가능

- 쓰는방법 EX

// App.js
<Subject title="WEB">

// Subject Component
<h1>{this.props.title}</h1>

3. React Developer Tools

- React - Community - Tools - Debugging - Chrome - 설치

- f12 react :  리엑트 상의 컴포넌트 확인 가능

 

4. State

- 사용자들이 알 필요도없고 알아서는 안되는 컴포넌트 내부적으로 사용되는 것들

- state값을 초기화하고 props에 들어가는 것을 세팅

// 생성자
constructor(props){
	super(props);
}

어떤 컴포넌트가 render보다 먼저 실행되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드

 

- state 사용법

constructor(props){
	super(props);
	this.state={
    	subject:{title:'WEB', sub:'World Wide Web!'}
    };
}

// state사용방법
<Subject title = {this.state.subject.title}></Subject>

- index.js의 <App />를 보고 state를 알 수 없다. 내부적으로 사용할 상태를 state를 통해 사용

- 상위컴포넌트의 state를 하위컴포넌트의 props로 전달 가능

- 여러개의 element를 보내주고 생성시 : 각각 list의 항목들은 key라는 props를 가지고 있어야함 / 리엑트 내부에서 요청

5. 이벤트

- props나 state값이 변경 시 render함수가 다시 호출 - 컴포넌트도 다시 호출

  render : 어떤 html을 그릴 것인가?

- JavaScript : onclick = " " / jsx : onClick = { }

- 이벤트 함수

<a href="/" onClick={function(e){
	console.log(e);
	e.preventDefalut();		// a태그의 기본적인 동작방법을 금지시킴
	debugger;		// 실행을 멈추고 f12-Sources페이지로 이동해 정보들을 쉽게 볼 수 있음
}}

e.preventDefault : 이벤트가 발생한 태그의 기본적인 기능을 못하도록 막음 / 본 코드에서 페이지 전환을 막아줌

 

state 변경하기

onClick={function(e){
	this.setState({
    	mode:'welcome'
    });
}.bind(this)}

- function(e){} 안에서 this는 아무 값도 존재하지않는다.

  이벤트를 설치할때 this를 찾지못하면 function(e){}.bind(this) 사용 - this는 컴포넌트가 된거다?

- this.state.mode = 'welcome';           X    : react모르게 바꾼 것 / constructor에선 사용 가능!

  this.setState({ mode : 'welcome' });    O   : 

 

bind 함수

- render()의 this는 render함수가 속해있는 컴포넌트 자체를 가르킴

  이벤트함수의 this는 아무값도 없다.

- bind의 개념

a.bind(b);
// a라는 함수의 this는 b로 들어가서 새로운 함수를 복제한다?

// ex
var f = a.bind(b);
f();

 

컴포넌트 이벤트

- onChangePage : 해당 컴포넌트 페이지에서의 이벤트호출함수를 만들려고 하는 것 

// ex
<Subject
	onChagePage={function(){
    		this.setState({mode:'welcome'});
	}.bind(this)}
>
</Subject>

해당컴포넌트페이지에서 함수호출 코드

// Subject.js 컴포넌트 파일
this.props.onChangePage();

 

컴포넌트 state값 변경 이벤트 1

- 이벤트 객체 중요속성

  target : 그 이벤트가 발생한 태그

e.target	// 이벤트를 소지한 태그

  dataset : -라는 접두사에 접근 ex) data-id 라는 속성에 접근가능

e.target.dataset.id

data-id = {data[i].id}
onClick={function(e){
	e.preventDefault();
	this.props.onChangePage(e.target.dataset.id);
}.bind(this)}

 

컴포넌트 state값 변경 이벤트 2

- bind 두번째 속성

onClick={function(id , e){
	e.preventDefault();
	this.props.onChangePage(id);
}.bind(this,data[i].id)}

두번째 인자로 들어온 값을 이 함수의 첫번째 매개변수의 값으로 넣어줌

 

[복습]

- 컴포넌트 내부에서 전달된 Props 변경 X

- 하위컴포넌트가 상위컴포넌트의 값을 변경시 : 이벤트 이용

- REDUX : 하나의 데이터 저장소, 저장소값이 변경되면 관련된 컴포넌트 전체 다 변경