React Hooks로 함수형 컴포넌트 적용

컴포넌트 선언 형식

기존 클래스형에서는 export default로 외부 접근 허용 형식과

Component를 상속받는 클래스로 선언

함수 자체를 외부 접근 허용 형식으로 선언하면 완료

렌더링

클래스형 경우 render() 안에 return()

함수형 경우 render() 없이 바로 return()

state

클래스형 경우 state라는 키워드로 선언 후 데이터 객체 생성

함수형 경우 react에서 제공되는 useState import 후

useState함수 내 데이터 객체를 저장 후 이에 대한 데이터 값과 state 값 리턴받을 배열 선언

todoData : 첫 번째 인수이자 변수 이름

setTodoData : 두 번째 인수이자 State를 정하는 함수

데이터 처리

클래스형 경우 state내에서 직접 접근하는 것이므로 가리키는 this 키워드와 함께 선언 필요

함수형 경우 리턴받아 할당된 변수를 접근하면 되기에 해당 변수만 선언하면 해결

데이터 업데이트

클래스형 경우 this.setState({value: ""})로 새로운 데이터 객체를 넣어주는 형식

함수형 경우 이미 선언된 setValue("") 함수로 새로운 데이터 객체 할당

함수 정의 및 적용

클래스형 경우 기존 함수에 대한 이름만 정의 후 이에 대해 조작문 정의

대신 접근하려면 함수를 가리키는 this키워드 선언 필요

함수형 경우 함수 이름에 타입 지정

this로 가리킬 필요없이 함수 자체에 접근 가능하기에 이름만 선언