State를 알려드리기 전에 일단 리액트가 무엇인지부터 알아야합니다.

리액트란..?

리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다.
리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다.
그리고 가상 돔이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다!
리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니, 싱글 페이지 애플리케이션 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다.
예를 들어 리액트는 페이지 전환 기능을 제공하지 않기 때문에, 리액트를 사용하여 페이지 전환을 해야한다면, react-router와 같은 추가적인 라이브러리를 사용해야 합니다.

요근래에 가장 개발자들이 많이 사용하는 라이브러리로 , React, Vue, Anglur 등이 있는데 그 중 위코드에서 사용할 React를 알아보도록 하겠습니다.

JSX

리액트에서는 JSX라는 독특한 문법을 가지고 있습니다.
JSX는 자바스크립트와 HTML을 동시에 사용하고, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어입니다.

ex)

const App = () => {
 const hello = 'Hello World';
 return <div>{hello}</div>;
 };

리액트는 위와 같이 자바스크립트에서 HTML 태그를 사용할 수 있으며, 자바스크립트 변수를 HTML 태그에서 바로 호출하여 사용할 수 있습니다.
또 몇가지 특징으로는

-HTML요소에 class 말고, className써야합니다.
-selfclosing tag입니다.
-중첩된 요소를 만들려면 소괄호로 감싸야합니다 !

const right = (
<div>
<p>list1</p>
<p>list2</p>
</div>
);

또한 return문 안에 {}(braket)을 쓰면 JS문법을 사용할 수 있습니다!

Component?

간단하게 설명하자면 리액트로 만들어진 앱을 이루는 최소한의 단위입니다.
컴포넌트는 데이터를 입력받아 상태에 따라 DOM Node를 출력하는 함수입니다.
이것을 설계할 때 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어서 코딩해야합니다.
컴포넌트에는 두가지 종류가 있습니다.
함수형 컴포넌트, 클래스형 컴포넌트

1)함수형 컴포넌트

가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것입니다.
ex)

import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

export default MyComponent;

import와 export의 개념은 나중에 설명하도록 하겠습니다.

2)클래스형 컴포넌트
컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있습니다.
프로퍼티, state , 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용합니다.

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

둘다 비슷한 것 같지만 자바스크립트 세션이 있었기 때문에 함수형 컴포넌트를 사용하기가 더 쉬운 것 같습니다만.. 클래스형으로도 사용할 수 있다니 둘다 꼭! 알아놓읍시다.

State란 무엇인가..?

일단 리액트에서 아주 중요하면서 대비되는 큰 개념이 두가지가 있는데
props와 state입니다.
오늘 저희는 state를 알아보도록 하겠습니다.
state는 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다. 이 state가 변경되면 컴포넌트는 리렌더링 됩니다.

오늘은

useState! 를 알아보도록 하겠습니다.

그 말대로 state를 사용하는 메소드 입니다.
이것을 사용하면 컴포넌트에서 state를 관리할 수 있습니다.
예제를 보겠습니다.
아주 흔한 예제로 1씩 올라가는 카운터를 만들어보겠습니다

import { useState, react } from "react";
import ReactDOM from "react-dom";

function App() {
  const [counter, setCounter] = useState(0);
  //여기서 counter는 상태값 저장 변수,
	setCounter는 상태값 갱신함수 
	useState()안에 있는 0은  상태의 초기값입니다.
	이렇게 함수를 만들어주고
    onClick 이라는 함수를 선언해서 setCounter가 1씩 증가하게 했습니다.
  const onClick = () => {
    setCounter((current) => current + 1);
  };
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>+1</button>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

state를 사용함으로써 유지보수가 쉬워집니다 ㅎㅎ , 효율을 올리는 개발자가 되어봅시다!!