리액트로 쇼핑몰 만들어보기 시작 !
리액트는 데이터 바인딩이 매우 쉽다(?) 는데 이걸로 웹앱을 만들기 아주 좋다고 하는데 한번 만들어 보도록 하자.
(먼저 app.js 상단에 import useState는 꼭 해주는걸 잊지말자, import 'react'옆에 콤마 넣고 'useState' 넣어도 상관무)
(한글인 이유는 그냥 보기 편하라고 이렇게만 해놨다, 난 아직 초보니까)
자주 변경되야하고 중요한 데이터 값을 가지는건 변수말고 state를 사용해서 저장하자
(예를들면 주문수량 갯수,상품 이미지, 상품명 같은것들?, 웹 이름은 거의 고정이니 변수를 사용하자)
변수 대신에 쓸 수 있는 데이터 저장공간 이라고 생각하면 편함!
useState() 라는 문법을 사용하는데, 이걸 사용하면 항상
2개의 데이터가 들어간 array가 생성이됨. let [a,b] = useState(); 가 기본적인 틀이라고 생각하면 쉽다
앞에 a는 데이터이름, 뒤에 b는 a 데이터를 다룰수있는,변경시킬 수 있는 함수같은 존재
보통 이렇게 중요한 데이터를 만들어놓고 공간공간에 슉 ! 껴넣는 데이터바인딩(데이터 꼽아버리기)를 자주 한다고 한다
state를 수정 또는 변경 할 땐 deep copy를 이용하자 & spread연산자(...)
저렇게 해야 얕은 복사가 아닌 깊은 복사가 되어 새로운 데이터 값 자체를 생성할수있음
예시를 보자, 이걸 보는 당신들 ! 내가 아주 귀여워서 웃음이 나겠지만 웃으며 보아라.
이건 내가 다시 돌아보려고 만든거라구
저기 위에 '따봉'이라는 state를 바꾸기 위해선 '따봉변경'이라는 변경함수를 이용하자 
state값 '따봉'에는 기본값을 0으로 넣어주고, 저기 보이는 버튼에 onClick(js event)를 넣어주어 버튼이 눌리면 작동하게끔 만들어주자. 아 저기 보이는 ()=>{}이거는 "function() { "를 대신해서 쓸수 있는 ES6 신문법이다.
함수를 만드는 새로운 문법인데, 함수가 길어질어같으면 그냥 상단에 함수선언을 새롭게 하나 해주고
"아 이거 짧게 쳐도 끝날거같은데" 하면 onClick={()=>{}}을 넣어서 사진처럼 치자.
이제 저 따봉 이모티콘 누르면 숫자가 1씩 올라간다 ㅋ ㅋ ㅋ
이거이거 중요한데 데이터 이름(기존에 있던것)을 바꿀땐 위에 말했던것처럼 원본 state 수정하면 안됨
저기 let newArray = [...글제목] 이라는 부분은 위에 상단 글제목 state를 spread연산자(...)를 통해 deep copy 해온것이고
그 newArray 라는 변수에 첫번째 데이터[0]에 새로운 항목인 '여자코트 추천'으로 바꾸겟다고 선언한거임.
그래서 '글제목변경'이라는 함수변경을 실행하면! 이제 '여자코트 추천' 이 똭 !!!
혹여나 "님 그냥 글제목[0] = '여자코트 추천' 하면안됨? 이라고 할수있겠지만" 해도 되긴하는데 권장사항이 아님
이렇게하면 재렌더링이 안될수도있음, 꼭!!! 카피해서 ,복사본 만들어서 쓰자 - - 
한글로 적고 그걸 다시 코딩으로 풀어서 쓰는 연습을 하고있다, 버튼을 누르면 제목을 여자코트 추천으로 바꿔주는 기능
위에 사진이 요거 수정본이다. 참고하자
tip!!
여기 보이는것처럼 변수뒤에 sort()를 붙여주면 가나다 순으로 정렬까지 해줄수있다
