React

리엑트: 자바스크립트의 라이브러리중 하나
app.js: html파일이 아니지만 index에서 불러내서 사용 JSX를 이용한다.

데이터 바인딩: 데이터를 집어넣는다. {}를 이용해서 넣을수 있다.
변수이용시 state를 써도됨

     //a = 변수 b = state변경을 도와주는 함수
let [a, b] =useState('변수');

변수와 state의 차이점
변수를 변경시 html을 변경해야함
state는 변경시 html은 자동 재렌더링이 됨

state 변경

let [a, a변경] =useState('변수');
a변경('변수변경');
//a = 변수변경이됨

array, object state 변경: 기존state와 신규state가 같으면 동작하지 않음 변수는 위치만 저장됨

let [a, a변경] =useState('변수');
<button onClick={() => {
  		  let copy = [...a]; //별개의 복사본
          //let copy = [a];
		  //기존a와 copy는 위치가 같기때문에 동작하지 않음
          copy[0] = '~~~';
          a변경(copy)}}>수정</button>

style 사용법

style={ {color : red} }

Destrucuring 문법
array 안의 변수를 각각 빼서 선언

let [a, b] = [1, 2];

onClick

//onClick = {함수}
<span onClick={ () => { ~~~ }}><js>

component: div들을 한 단어로 줄임
1.반복적인 html 축약
2.큰 페이지들
3.자주 바뀌는 것들

컴포넌트 사용법
함수 만들기
return()안에 html담기
<함수명></함수명>이용

function 함수명(){
  return(
    <div className="클래스">
      내용
    </div>
  )
}
<함수명></함수명>
<함수명/>

let 함수명 = () => {}

컴포넌트 단점: state 쓸 때 문제가 생김(다른함수 안의 변수 사용불가)

동적인 UI 만들기
1.html css로 미리 디자인완성
2.UI의 현재 상태를 state로 저장
3.state에 따라 UI 가 어떻게 보일지 작성

조건문 = 삼항연산자
{조건식 ? 참일때 실행할 코드 : 거짓일때 실행할 코드}

map함수 : 반복문

[1,2,3].map(function(a, i){ //i는 반복문이 실행할때마다 0부터 1씩증가하는 정수
    console.log(a);// 파라미터a는 array의 자료를 받음
    return '132134';//array안에 숫자를 담아줌[132134, 132134, 132134]
  })

props: 자식component에서 부모의 state 가져와 씀
1.자식컴포넌트 작명={state이름}
2.props파라미터 등록후 props.작명 사용

input 입력한 값 가져오기

<input onChange={(e)=>{console.log(e.target.value)}}/>

이벤트버블링 막기
(e) => {e.stopPropagation();}