React 입문 - State

state?

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

 

JS에서 let으로 선언한다고 배웠는데 왜 State일까?

우리가 배운 component에서는 Lifecycle이라는 것이 있고

Lifecycle을 따라서 화면의 값이 변했을때 그 변화된 값을 화면에 다시 리렌더링 시켜주는 조건들이 있다.

 그 조건들 중 하나라 State가 변경되었을 때이다. let으로 변경 해줄 수도 있지만 그렇게 되면 리액트가 인식하지 못하기 때문에

리액트에서 변화를 인지하기 위해서는 State를 변경해 줘야한다고 한다.

 

변수를 생성해야할 때는 state로 생성을 해야하는데, state를 사용할때는 useState를 사용한다고 한다.

useState는 리액트에서 state를 만들기 위해서 있는 기능인데, 리액트에만 존재하는 개념이자 기능이라고 한다.

그리고 여기서부터는 이 기능을 훅이라고 표현한다.

 

const [value, setValue] = useState(초기값)

value - name

setValue - setName / 여기는 state를 변경할때 쓰는 함수이다.

 

useState(초기값) - 넣어줄 값(=initalState)

 

 

---

Hook?

 

Hook은 React 16.8에 새로 추가된 기능이다.

Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다고 한다.

 

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수이다.

Hook은 class 안에서는 동작하지 않고 대신 class 없이 React를 사용할 수 있게 해준다.

 

 

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

위 코드는 버튼을 클릭하면 카운터가 올라가는 코드이다.

count를 value값으로 넣어주고 useState에 숫자 0을 써주었다.

첫시작은 0번부터 시작해서 버튼을 클릭할때마다 숫자값이 올라가는 형식이다.

 

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

위 코드처럼 하나의 컴포넌트에 여러개의 변수를 선언할 수도 있다.

 

배열 구조 분해(destructuring) 문법은 useState로 호출된 state 변수들을 다른 변수명으로 할당할 수 있게 해준다. 이 변수명은 useState API와 관련이 없고 대신에 React는 매번 렌더링할 때 useState가 사용된 순서대로 실행한다.

 

 

▶️ 배열 구조 분해에 대해서는 아래 사이트 참고!

구조 분해 할당 - JavaScript | MDN

 

▶️ State외에도 Effect Hook이 있는데 이는 공식 문서를 이용해서 살펴보도록한다.

Hook 개요 – React

 

 

---

Hook 사용 규칙

• 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
• React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다.