3장 컴포넌트,Props,State

컴포넌트 선언 방식중 클래스와 함수형의 차이는 클래스형잉 state기능, 라이프 사이클, 임의 메서드 정의.

클래스형 컴포넌트

- render 함수가 필요.

 

Props: properties를 줄인 표현. 컴포넌트 속성을 설정할 때 사용하는 요소. props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 사용할 수있다, 부모 컴포넌트가 설정 하는 값.

 비구조화 할당 문법: 객체에서 값을 추출하는 문법.

 const{name} =props;   return ( {name} )

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용.

 

클래스형 컴포넌트에서: render 함수 안에서 this.props를 조회하면 된다.

 const{name, children} = this.props; 

 

 

State: 컴포넌트 내부에서 바뀔 수 있는 값. 

state를 설정할 때 constructor 메소드 사용.  constructor(props){ super(props); this.state={ number=0};} (많이 안씀)

 constructor는 컴포넌트의 생성자 메서드, super(props)를 생성해야한다. 이함수가 호출되면 현재 컴포넌트가 상속하는 리액트의 component 클래스가 지닌 생성자 함수를 호출한다.

state를 조회할때 this.state를 조회.

 state = { nubmer: 0} render(){ const {number} = this.state;

 

함수형 컴포넌트에서의 useState

배열 비구조화 할당 const array = [1,2]; const one= array[0]; const two = array[1];

->  const array=[1,2];  const [one,two] = array

useState 함수의 인자에는 상태의 초깃값을 넣어줘.[message, setMessaage]  첫번째는 현재 상태, 두번째는 상태를 바꾸어 주는 함수

 

state값을 바꾸어야 할때. setState, useState를 통해 전달받은 세터 함수를 사용해야한다.