React에서 JSX사용, state 변경

html이 아닌 JSX 문법 사용

 

리액트 데이터 바인딩 쉽게 됨

서버에서 가져와서 html에 보여주는 방식

원래는 let post = document.getElementById. 이런 방식 써야했음

리액트에서는 중괄호 사용해서 { post } 변수명으로만 써서 가능. => 코드 간결

 

변수나 함수로도 html을 동적으로 사용가능

 

src, id, href, class name 등의 속성을 {} 안에 변수나 함수명을 써서 쓸 수 있음 -> 개편함

 

변수 저장시

1. 변수 

2. state

변수 대신 쓰는 데이터 저장공간 -> state

usrState() 이용

문자, 숫자, object 등 다 넣을 수 있음

var [a, b] = [10, 100];
// var a = 10, var b= 100
// destructuring 문법 -> array, object 자료를
// 변수에 쉽게 담고 싶을때 
let [글제목, 글제목변경] = useState('도쿄 맛집'); 
//글제목 = '도쿄 맛집' 데이터, 글제목변경 = 이 데이터를 변경하는 함수

왜 사용??

웹 앱처럼 동작하게 하게 만들려고 사용!!
그냥 변수는 변경되면 자동 재렌더링 html 새로고침 안됨

state의 데이터를 저장하면, state 변경시 html 이 자동으로 재렌더링

=> 새로고침 없이도 html 재렌더링

 

 

 

<클릭이벤트>

 es6 문법으로 더 간단하게

 

* 변경을 일어나게 하려면, state를 사용해야함.

 

함수를 이용해 state 변경 해보기

제목변경()하고 괄호를 쓰면, 바로 실행되기 때문에 이렇게 쓰면 안됨!

이렇게 쓰자

<button onClick={ 제목변경 }> 버튼</button>

 

 

생코딩 ㅋㅋ

function 제목변경(){

var newArray =

글제목변경 (['여자코트 추천', '도쿄 라멘 맛집', '도쿄 돈카츠 맛집']);

}

 

원본 state는 수정이 안되기 떄문에 아래는 안됨 

var newArray = 글제목[0] = 글제목[1];

=> 복사본을 만들어서 수정해라

 

 

//reference data type 참조

var newArray = 글제목 안됨! (값을 공유하고 있는 거임)

별도의 데이터를 만들어야함! => state를 deep copy 해야함!!

let [글제목, 글제목변경] = useState(['도쿄 우동 맛집', '도쿄 라멘 맛집', '도쿄 돈카츠 맛집']);

//글제목 = '도쿄 맛집' 데이터, 글제목변경 = 이 데이터를 변경하는 함수

let [좋아요, 좋아요변경] = useState(0);

function 제목변경(){

var newArray = 글제목;

 

deep copy 는 값공유가 아닌 서로 독립적인 값을 가지는 복사방법.

(es6의 spread syntax)

var newArray = [...글제목];

 

*리액트 대원칙 : immutable data (데이터 직접 수정하지 마라)

* Array나 Object state 데이터 수정은 일단 변경함수 쓰자!
state 직접 건들지 말고 deep copy로 이용해라

 

 

 

참고)

터미널의 eslint 는 warning 경고 해주는 것.

터미널에 뜨는 거 거슬리면  /* eslint-disable */ 쓰면 됨

 

 

참고) 유튜브 '코딩애플'