React3

(1) state & props

component의 내용울 props와 state로 사용자가 조정 할 수 있다. 그런데 props는 사용자가 볼 수 있는 내용이고 state는 볼 수 없게 숨겨져 있는 실제 구현을 담당하는 코드이다.
state를 사용하기 위해서는 값을 초기화 해야한다->props의 값 세팅하기위해서

-component에서 render라는 함수보다 먼저 실행되면서 componetn함수를 초기화 시켜주는 것은 state의 constructor안에 코드로 작성한다.

-상위 component의 state값을 하위 component의 props의 값으로 전달하는 것은 얼맏든지 가능하다.

-리액트에서 props값을 ""로 감싸면 문자열, {}로 감싸면 코드로 실행

-데이터가 여러개인 경우라면 []대괄호를 이용하여 배열로 만들기

-key~라는 에러가 뜬다면 react내부적으로 순서key가 필요해서 요구하는 것이다.
따라서 li태그 안에 key=id값 추가 해주면 에러가 사라짐

(2) event

react를 역동적으로 만들어줌(링크 클릭시 해당 내용이 나오게 하려고 함)

-react에서 state 또는 props값이 바뀐다면 해당 component의 render함수가 다시호출됨
따라서 render함수 하위의 component의 render함수 또한 전부 다시 호출됨

-js에서는 onclick/ react에서는 onClick

-기본적인 동작못하게 하는 방법

function(e) {
	e.prevenDefault(); //페이지 전환 되지 않도록(reload 되지 않음)
  }

(3) 함수 내에서 state값 변경하기

function(e) {
	this.setState({
  	mode:"welcome";
  });
}.bind(this)

i) bind(this) 역는다, 묶는다

함수 안에는 this값이 없다(이유는 모름). 그런데 이 코드를 뒤에 붙여 주면 없는 this값을 강제로 this에 주입해주는 것이다. 이 this는 현재 component함수 자체에서 가르키는 값을 함수 안으로 불러온다. 예를 들어서,

var obj = {name:"seoyoung"}
function bindtest() {
	console.log(this.name);
}

bindtest.bind(obj); 하면 obj가 this가 되어서 seoyoung이라는 값이 나온다.

ii) setState 동적 변경

state값 직접 변경 하면 안되고 함수형태로 해야한다. 직접하면 react몰래 값변경하게 되기때문이다. state값 변경 되면 무조건 setState()함수 이용해서 바꿔야한다!
constructor함수는 그대로 써도 상관없다.

(4) onChangePage 이벤트 사용

링크 클릭시, 이벤트에 설치된 함수 호출하도록 한다.
data-라는 접두사 붙여서 dataset이라는 특수한 경로로 접근 가능하다
예를 들어,

data-id = {data[i].id} 의 값

onChangePage(e.target.dataset.id) 의 값  //같음

※js에서 문자열을 강제로 숫자로 바꾸기
id -> Number(id)