[React] 코딩애플 blog -1
jsx문법이란?
자바스크립트 파일 안에서 html을 직관적으로 작성하기 위해 도와주는 react 내장 문법
특징
- class 선언 , 리액트는 태그 내에 class라는 키워드를 사용하지 않고 className 을 사용한다.
- 데이터 바인딩이 쉽다는 점
데이터 바인딩이란? 자바스크립트 데이터를 html에 넣는 작업을 의미documemt.getElementById()... 이럴 필요가 없음! 서버에서 가져온 데이터를 html에 보여줘야함!
넣는 방법은 {중괄호}를 사용하여 변수로 선언,
함수도 렌더링이 가능
로고를 import 해서 이미지를 넣는 방법 , 변수명도 가능
html에 여러가지 속성도 data-binding이 가능한데,
html중 style 속성은 object로 ! { 속성명 : 속성값}을 사용, 이때 속성명은 camelCase로 치환해줘야함!
<div style = { {color: 'blue', fontSize: '30px'} }> 글씨 </div>
let postTitle= {color: 'red', fontSize: '50px'}
<div style = { postTitle }> 글씨연습 </div>
이런 식으로 style = {변수명} 으로 사용 가능
3. useState
변수에 데이터를 저장하는 해서 데이터바인딩 하는 것 말고, 데이터를 저장할 수 있는 또 다른 방법 = > useState
데이터를 보관할 수있는 방법
- 변수에 넣기
- state에 넣기
state를 만드는 방법
import React, {useState} from 'react';
리액트 내에 있는 내장 함수를 사용하겠다! 라는 의미
userState 함수 사용가능
useState("남자코트 추천");
이렇게 사용하면 [a,b] 형태의 array가 나온다.
a는 "남자코트 추천" 데이터가 들어간다.
b는 "남자코트 추천" 을 정정해주는 함수가 들어간다.
[state데이터 , state 데이터 변경 함수]
따라서 let [a,b] 라는 변수에 저장할 수 있다.
+) ES6 destructuring 문법
var [a,b]=[10,100]
//a 변수에 10을 넣고 b변수에 100을 넣을 수 있다.
let [글제목,글제목변경] = useState("남자코트 추천");
이런식으로 여러개의 중요한 데이터 보관 가능!
useState()에 문자, 숫자, array, object 다 저장 가능
useState를 만들어서 쓰는 이유?
웹이 app처럼 동작하게 만들고 싶어서
만약 데이터가 변경이 될 때, state에 만들어진 데이터가 바뀌면 데이터를 담고 있는 html이 자동으로 재렌더링이 된다.
만약 그냥 변수로 만들어 놓으면 데이터가 바뀌어서 재렌더링이 안된다. (새로고침을 해야함)
즉, html이 새로고침 없이도 스무스하게 변경됨 (자주 바뀌는 중요한 데이터는 변수말고 state에 저장해서 쓰는것이 좋다.)