React의 컴포넌트 생성방법과 props, state

컨포넌트의 종류

컨포넌트 생성 방법에는 클래스형과 함수형 컨포넌트가 있다.

함수형 컨포넌트는 state와 라이프사이클api 를 사용할 수 없으며, prop을 이용하여 값을 랜터링하여 출력만 가능하다.

클래스형 컨포넌트는 React 컨포넌트를 상속받은 클래스이며 라이프사이클api, state를 사용할 수 있다.

Props

props는 부모가 자식 컨포넌트를 호출(실행)할때 전달하는 "인자값"이며, 호출된(자식) 컴포넌트에서는 값을 변경할 수 없다.

defaultProps로 컨포넌트 블록 내부 또는 블록 외부에서 초기화가 가능하다.

또한 상속받은 컨포넌트는 생성자(constructor) 에서 부모 컨포넌트에 props를 전달해야 한다.

컨포넌트 호출시 컨포넌트 태그사이에 값(문자)가 있으면 자식 컨포넌트에서는 {this.props.children} 라는 예약어로 사용가능하다.

<Conponent>this is props children</Conponent>

State

state는 컨포넌트 내부 데이터 모음이며, 클래스형 컨포넌트에서만 사용가능하다.

데이터 값의 수정은 setState({key:value}) 를 이용해야 한다.

그런데 무슨 이유인지 오류가 발생하곤 하는데 실행시점의 차이(?) 인것 같은데 연구를 더 해봐야 할거 같다.