React 1. Blog

khxxjxx·2021년 6월 3일
0

애플코딩

목록 보기
1/8

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을 소괄호()내에 있는 데이터로 완전히 대체해준다

profile
코린이

0개의 댓글