state

React에는 변수말고 값을 저장할 수 있는 곳이 있는데 바로 state이다. state는 React문법이다.

일단 위 import React, { useState } from "https://cdn.skypack.dev/react";에 이렇게 { useState }라는 코드를 추가해주어야 사용할 수 있다.

이제 useState();라는 함수를 사용할 수 있는데, useState("hello world!");라는 문구를 넣어보자.

useState("hello world!"); 이 함수는 배열을 반환하는데 (함수를 실행하면 배열이 남는다.) [a, b]
a -> 현재 진짜 데이터 > "hello world!"
b -> 이 데이터를 수정하기 위한 함수를 생성해준다.

그래서 이 값을 let [a, b] = useState("hello world!"); 이러한 형식으로 변수를 만들어서 그 배열의 값을 각각 저장할 수 있다. ( ES6 destructing 문법 )
[a, b]에서 변수의 이름은 [variable, setVariable]([변수, 변수변경])이라고 작성하는 것이 관례이다.
이제 변수를 만들어 이 값을 넣어보자. 문자, 숫자, 배열, 객체 모두 가능하다.
let [hi, setHi] = useState("hello world!");
그리고 이 변수를 데이터 바인딩을 통해 JSX에 넣어보면

const App = () => {
  return (
    <>
    	<div>
    		{ hi }
    	</div>
    </>
  );
};

이렇게 사용한다. 그럼 그냥 변수를 사용하면 되지 왜 state를 사용하는 것일까? 이유는 state는 상태를 관리해주는 기능이 있는데 변경이 될 때, 내 웹사이트에서 언어선택에 따라 인사가 한국어로 바뀐다고 할 때, state를 통해 바꾸면 HTML이 자동으로 재랜더링된다. 그냥 변수로 let hi = "hello world!"작성하고 이 변수를 코드를 이용해서 변경한다면 새로고침을 해야만 이 변경된 값이 반영된다. 하지만 state를 사용하면 새로고침이 없이도 재랜더링을 통해 값이 반영된다.
따라서 앱처럼 동작하는 웹, 웹 앱처럼 스무스하게 동작하는 웹 사이트를 만들기 위해서는 기능적으로 값이 변경되는 변수는 state를 사용하여 저장하는 것이 좋다.

onClick 이벤트 핸들러

onClick을 옛날 자바스크립트에서는 onClick="클릭될 때 실행할 JS코드"로 작성했다.
React에서도 onClick을 사용할 수 있는데 onClick = {클릭할 때 실행할 함수}로 사용한다. onClick이벤트 핸들러로는 함수만 전달할 수 있다.
하지만 함수의 형태라면 다양한 방식으로 작성이 가능하다.

function handleClick() {
  console.log('함수 실행됨!');
}
<button onClick={ handleClick }>Click Me</button>

<button onClick={ handleClick() }>Click Me</button>이렇게 handleClick()처럼 우리가 익히 알고 있는 함수 뒤에 괄호를 적지않는 이유는 이것은 함수가 즉시 실행됨으로써 실행된 결괏값(return값이 없으므로 undefined을 전달)을 전달하기 때문에 함수가 아닌 값을 전달하게 된다. 따라서 정상적으로 작동하지 않는다.

특정 인수를 전달하거나 로직을 추가하고 싶을 때는 화살표 함수를 사용한다.

<button onClick={() => console.log('함수 실행됨!')}>Click Me</button>

삼항 연산자 등을 이용해 조건에 따라 함수를 할당할 수도 있다.

const feelGood = true;

const hi = () => {
	console.log("안녕~");
}

const goAway = () => {
	console.log("꺼져");
}

<button onClick={feelGood ? hi : goAway}>
  feelGood변수가 true면 "안녕~"을 출력, false면 "꺼져"를 출력
</button>

활용 예제

증가, 감소 버튼을 누르면 숫자가 1씩 증가, 감소되는 것을 구현해보자.

이번에는 기록하는 기능 기록을 삭제하는 기능까지 구현해보자.
version1 삼항연산자 사용

version2 if문 사용