[React] 5. State

1. 컴포넌트에 대한 이해

---

React 2번째 글에 컴포넌트에는 ‘함수형’ 컴포넌트와 ‘클래스형’ 컴포넌트가 있다고 작성했었다.

구분하는 방법은 간단하다! 그냥 class로 시작하면 컴포넌트 클래스이고, function으로 시작해서 return이 있으면 함수형 컴포넌트 이다.

2. State

---

일반적으로 함수형 컴포넌트에서는 state가 없는 컴포넌트 라고 알려져 있다.

하지만, HOOK 의 등장으로 달라졌다!

(나는 노마드코더님의 강의를 들으면서 진행했는데, 이분은 클래스 컴포넌트를 아예 알려주지도 않았다. )

함수형 컴포넌트에서 state를 사용하려면 가장 기초가 되는useState()라는 훅을 이용하면 된다.

const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev + 1);

특징은 다음과 같다.

1. 인자로 넘겨주는 것 (나의 경우는 0) 은 초기값인데, 숫자와 문자타입이 가능하다.

2. state 변수를 갱신할 수 있는 함수 (나의 경우는 setValue) 를 반환한다.

3. 함수형 컴포넌트의 state는 직접적으로 사용할 수 있다. (나의 경우는 {counter})

Uploaded by N2T