React 리액트 정리

기본 셋팅

Node.js 설치

Other Downloads > Installing Node.js via package manager > Debian and Ubuntu based Linux distributions > Node.js binary distributions 로 이동

프로젝트 시작

  • 터미널에 명령어 실행
npx create-reatc-app "프로젝트명"

기초 사용법

HTML과 비슷하게 생긴 JSX 문법 사용

터미널 warning 제거

  • App.js 제일 상단에 코드 추가
/* exlint-disable */
  • 태그에 class 지정하는 방법
<div className="클래스 명"></div>

바인딩

//1. 변수지정
let 클래스변수 = "주제"
<div className={클래스변수}></div>

//2. 함수
function 함수명(){
    return "주제"
}
<div className={함수명()}></div>

style 변경

// 중괄호{} 안에 object 형으로
<div style={{color:'white', fontSize:'20px'}}>내용</div>

useState

  • 변수 지정하는 방식
  • 사용 이유 : 페이지 내에서 내용 변경시 HTML이 자동으로 재렌더링 됨, 새로고침 없이 변경됨
  • 문자, 숫자, array, object 모두 가능
  • 자주 바뀌는 데이터에 사용
import React, {useState} from 'react';

let [a,b] = useState('변수');

// a는 변수가, b는 변수를 정정할 수 있는 함수

b(변경내용);
// 변경 내용의 값으로 a를 교체

값 변경 방법

  • useState 의 값 직접 변경 X
// 이런거 안됨
let [a,b] = useState('변수');
a = '변수2'
  • 변경 함수 생성 후 deep copy 한다음 수정 후 변경 함수에 넣기
let [변수,변경함수] = useState(['값1', '값2','값3']);

function 바꾸기(){
    var newArray = [...변수]; # deep copy
    newArray[0] = '값4';
    변경함수(newArray);
}

클릭 이벤트

  • span, button
  • onClick 이용
  • 중괄호 안에는 함수만
<span onClick={ 함수 }>내용</span>

component

  • 일종의 함수화라고 생각하면 될듯
function App(){

    변수선언 등

    return(
        HTML, JSX 코드

        <Component></Component>
        or
        <Component />
    )
}

function Component(){
    return (
        <div>
            내용
        </div>
    )   
}