리액트를 사용하여 Application의 interface를 설계 할 때, 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트(Components)로 구성됩니다.
컴포넌트의 속성 값을 지닌 props와 상태값을 지닌 state를 사용하는 방법에 대해 알아 보겠습니다.
간단히 설명하자면 props는 부모 컴포넌트가 자식 컴포넌트에게 값을 줍니다.
자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정이 불가능
state는 컴포넌트 내부에서 선어나며 내부에서 값을 변경 가능.
Components and Props
클래스형 컴포넌트 특징
render 함수 필수
state 기능 사용가능
라이프사이클 기능 사용 가능
임의 메서드 정의 가능
함수형 컴포넌트 장점
클래스형 선언하기가 편함
메모리 자원도 클래스형 컴포넌트보다 덜 사용
프로젝트 완성하여 빌드한 후 배포시에도 함수형 컴포넌트를 사용하면 결과물의 파일 크기가 더 작음. (성능과 파일 크기면에서 사실상 큰 차이는 없)
함수형 컴포넌트 단점
state와 라이프사이클 API의 사용이 불가능했지만,
(리액트 v16.8 업데이트 후 Hooks라는 기능의 도입으로 해결.)
728x90
300x250
