State 관리 - 함수형 컴포넌트

함수형 컴포넌트에서 state 관리 - useState()

함수형 컴포넌트에서는 state가 없으므로, react hook 을 사용하면 state를 가질 수 있다.

 

네모칸 만드는 예제를 통해 사용방법에 대해 알아보자.

 

1. Nemo 컴포넌트 만들기 - 함수형컴포넌트 기본형태 

2. App.js 에 불러다가 쓸수있도록 임포트 해줍니다.

3. useState()로 count를 state로 등록

4. 반환할 리액트 요소를 만들자

Array.from() 함수는 어떠한 길이 만큼의 배열을 만들어주는 함수이다.

네모를 만들기위해서 인덱스 값을 에로우 함수로 넘겨준다고 생각하면된다.

5. 함수를 만들어서 연결하기 까지!

클래스형 컴포넌트와는 작성 방법 및 형태등이 다르다보니, 익숙해져보자.

if문 대신 삼항연산자도 유용하게 사용이되므로 자주 보고 익혀두자