React 공부1

처음 리액트 프레임워크 설치하려면 nodejs를 설치한 후

npx create-react-app 프로젝트명

이렇게 작성하면 기본 react 폴더가 생성이 된다

리액트는 특이하게도 app.js라는 js파일에서 html처럼 코딩을 하게 되는데 이는 jsx라는 문법을 사용해 html과 비슷하지만 다른 문법으로 코딩을 해야한다고 한다.

비슷하지만서도 다른점은

1. 기존 class=""로 클래스 명을 생성하는것과 다르게 자바스크립트는 class라는 예약어가 있기때문에(jsx도 자바스크립트 기반이라 그런것 같다)className="" 으로 클래스를 설정해야한다.
2. app()함수 안에서 변수를 만들어 태그안에 {변수명} 또는 href,css,src등 속성에 '바인딩' 하여 사용할 수 있다

function app(){
	let post = '홍길동'
    return(
    	<h1>나는 {post} 입니다.</h1>
    )
}

이런식의 바인딩 이루어지고

<h1 style="font-size=20px; padding-left=10px">
//기존 html작성시

<h1 css{ {fontSize:'20px',paddingLeft:'10px'} }>
//react문법 
자바스크립트에서도 camelCase작명관습에 따라 대쉬(-)는 뺄셈의 연산기호 이기때문에 대쉬를 빼고 
뒤에오는 글자들을 대문자로 붙혀서 작성해줍니다

State라는 리액트 저장소를 사용한다

위에 글처럼 리액트는 변수를 바인딩해 사용할 수 있지만 state라는 저장소를 만들어 변수처럼 사용할 수 있는데

import React, {useState} from 'react';
// import를 해준다음

function app(){
	let title = useState('안녕하세요')
    <h1> {title} </h1>
}

이렇게 사용할 수 있는데 useState를 사용해서 데이터를 남기면 두개의 배열이 남는데 [state데이터,state데이터 변경 함수]가 기본으로 남게 된다.(아직 변경 함수는 모르겠습니다😂)

es6문법의 destructuring문법을 사용해

function app(){
	let [title,titlefunc] = useState('안녕하세요')
    //또는
    let [title,titlefunc] = useState(['안녕하세요','반갑습니다'])
    <h1> {title[1]} </h1>
}

이렇게 사용할 수 있다

destructuring문법이란

// 기존 변수명을 지정할때 
let abc = [1,2]
이렇게 해서 하나의 변수명으로만 컨트롤이 가능하였는데
let [abc,cde] = [1,2]
이렇게 하면 abc=1, cde=2 가 호출이 되고

react에서 이 문법을 쓰는 이유는 위에도 말했듯이 state를 쓰면 두개의 객체가 남는데 
이를 컨트롤 하기위해 
let [data,datafunc] = usestate(['안녕하세요','반갑습니다']);
와같이 사용을 해주는 것이다 사용하려면
 <h1>{date[1]}</h1>
 을 하면 첫번째는 state의 데이터를 담았기 때문에 index 1번인 반갑습니다가 출력이 됩니다.

state를 쓰는 이유

기본적으로 변수를 사용해 데이터가 바뀌면 새로고침을 해야 데이터가 바뀐내용이 나오는데
state를 쓰면 데이터가 변경되어도 html이 자동으로 재렌더링이 됩니다!(새로고침❎) 따라서 자주 바뀌거나,중요한 데이터 일때는 변수<<<<<STATE를 잊지 말아줍니다.