1. Blog

/* eslint-disable */

파일 최상단에 위의 주석을 추가해주면 터미널/브라우저 콘솔창에 warning 메세지가 안뜬다
warning이 뜨는 이유는 eslint가 잡아주는 문법 체크사항이다

Web-app

• 다른페이지로 넘어가거나 포스팅을 발행하는 등의 행동을 해도 새로고침이 되지 않고 스무스하게 동작
• 모바일앱과 비슷한 사용감으로 Web-app이라 부른다
• React, Angular, Vue 를 이용하여 쉽게 만들 수 있다
• 모바일앱으로 발생이 쉽고 앱처럼 뛰어난 UX, 비즈니스적 강점이란 장점이 있다

---

JSX

• 자바스크립트 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 React 기본 내장 문법
• class=""를 집어넣기 위해선 className=""으로 사용해야 한다
• style=""을 집어넣기 위해선 style={ 스타일용 오브젝트 }으로 사용해야 한다
• onclick="" 을 사용하기 위해선 onClick={실행할 함수}로 사용해야 한다
  • {속성명 : '속성값'} 속성명에 -(대쉬)기호를 쓸 수 없으므로 camelCase 작명관습에 따라 속성명을 변경

---

데이터바인딩

• 자바스크립트 데이터를 HTML에 꽂아넣는 작업
• 중괄호안에 { 변수명, 함수 등 } 써주면 된다 (scr, id, href 등의 속성도 마찬가지)

---

state

• 변수대신 쓰는 데이터 저장공간
• 상단 import React 에 { useState } 첨부
• useState(저장할 데이터) : state를 하나 만들어주는 함수
• 데이터로 문자, 숫자, array, object 다 저장가능
• useState()를 사용하면 두개의 데이터 [데이터1, 데이터2]가 남는다
• 이걸 각각 a와 b라는 변수명으로 ES6 destructuring 문법을 이용해 사용
  • 데이터1 : 실제 저장할 데이터
  • 데이터2 : 저장할 데이터를 변경시킬 함수

// 예시

let [a, b] = useState('hxxjxx');
// a : 'hxxjxx'라는 중요 데이터가 들어있는 state
// b : 'hxxjxx'라는 데이터 변경을 도와주는 함수가 들어있다

변수대신 state 사용이유

• state는 변경되면 새로고침없이 HTML이 자동으로 재렌더링 된다
• 일반 변수는 변경이 발생해도 자동으로 재렌더링 되지 않는다
• 자주 바뀌거나, 중요한 데이터는 변수대신 state로 저장해서 사용

state 변경

• state는 변수와 다르게 값을 변경할 때 지정된 변경함수를 사용해야 한다
• state를 만들때 남은 [데이터1, 데이터2] 에서 데이터2는 데이터1을 변경하기 위한 함수이다
• 데이터2(대체할 데이터) : 데이터1을 소괄호()내에 있는 데이터로 완전히 대체해준다

---