728x90

React! 는 값의 변화에 react 반응하다란 컨셉에 걸맞게

변수 값이 바뀔 때 마다 getElementById~ innerText~ 일일히 해주던걸 해주지 않아도 된다.

값이 변하면 UI도 자동으로 바꿔준다. ->

State

state가 변하면 UI가 변하게 한다.

터미널 프로젝트

만들고 싶은 폴더 생성 mkdir react-test

cd react-test

npx create-react-app 폴더명 나같은 경우는 npx create-react-app rsp 로 함

생성하는데 시간 좀 걸림.

cd rsp

code . 하면 바로 세팅된 비쥬얼 스튜디오 코드 프로젝트가 열린다.

1. App.js App.css 정리

App.css 파일 안에 있는 모든 내용 지워준다.

아래와 같이 정리해준다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

2. React hook인 useState 에 대한 이해

useState를 import 해준다

import { useState } from 'react';

아래와 같이 코드를 작성해주고 react run start

import { useState } from 'react';
import './App.css';

function App() {
	//리액트의 컴포넌트 : 관련있는 html과 js를 함께 쓸 수 있다. 코드 관리, 파일 관리 용이
	//자배스크립트 단
	//리액트에서 제공해주는 useState라는 함수를 통해 state를 만듬
	//참고로, 리액트에서 제공해주는 유용한 함수들을 react hook이라고 하고 그 중 하나가 useState인 것
	//useState(0)의 매개변수는 초깃값, 배열 반환 [초기값이 담긴 state, state 값을 변경해주는 함수]
	const [counter, setcounter] = useState(0);
	const increase = () => {
		setcounter(counter + 1); //setcounter2 이 함수만을 이용해서 counter2값을 바꿔준다
	}
	return (
		//html단
		<div>
			<button onClick={increase}>{counter}</button>
		</div>
	);
}

export default App;

클릭 수를 그대로 보여주는 버튼이 보인다.

UI에 보여줘야 하는 값은 state로 만들어야 함 : 다만 비동기적으로 작동해서 동기에 비해 state바뀌는건 시간이 좀 걸림

state 바꾸는 함수가 바로 실행이 되는게 아니라 함수가 끝날 때까지 기다렸다가 state 바꾸는 함수들을 모아서 한번에 실행

또한 state는 그 전의 값을 기억함

컴포넌트 안에 있는 state가 바뀌면 UI에 업데이트된 state 값이 보인다.

컴포넌트 안에 있는 일반 변수들은 아예 다시 초기화됨

<정리>

* 변수는 re render 될 때마다 초기화가 된다.

* state 값은 비동기적으로 처리된다.

state는 const로 선언

state의 값은 계속 바뀌는데 const로 선언

function MyReact{
    function (){
        let val
        useState(inivialValue){
          val = val | inivialValue
          function setState(newValue){
              val = newValue
          }
          return [val,setState]
        }
    }
}

const [counter,setCounter]=MyReact.useState(0)

state는 일반 변수와 달리 setState 함수를 이용하여 값을 변경
(함수 내부의 변수가 함수 수명이 끝나더라도, 변수의 참조가 계속 된다면 그 변수의 수명은 계속 된다.- 클로저
이렇게 컴포넌트가 render 가 되더라도 state를 기억할 수 있다.)

setState를 사용한 변수 변경만 허락하기위해 const로 선언
(const로 선언하면 변수형태의 재 할당을 막을 수 있다.)

3. 결론

웬만한 값은 state를 쓰되, 잠깐 기억해야하는 값만 변수를 쓴다.