props란?

props란?

• properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 • props는 컴포넌트끼리 값을 전달하는 수단 • 상위 컴포넌트에서 하위 컴포넌트로 전달 (단방향 데이터 흐름)

 

함수형 컴포넌트 props

<FuncComponent name = "부모"> </FuncComponent> // 부모 컴포넌트에서의 모습

const Funccomponent = (props) => {
	return (
    	<>
        <div> 안녕? {props.name} </div>
        <div> 반가워! </div>
        </>
    );
} //자식 컴포넌트에서의 모습

Funccomponent.defaultProps = {
	name : '홍길동'
} //자식 컴포넌트에서 기본값 설정

• 부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터 로 전달받으며, JSX 내부에서 { } 기호로 감싸서 사용한다.

• 자식 컴포넌트에 Props가 전달되지 않을 경우, 기본값 설정 가능

 

props.children

 

• 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열

• FuncComponent를 껍데기로 하여, 내부의 다른 컴포넌트를 쓰고 싶을 때 사용하는 방법이라고 보면 됨.

• 즉, 여러 개의 게시판이 있을 때 내부의 내용만 바꾸어 손쉽게 게시판 설계가 가능함

 

 

propTypes

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

• JavaScript의 “유연한 특성” 을 해결하기 위해 권장되는 기능

• 정해진 타입이 아닌 다른 타입으로 정보가 전달될 시, 제대로 동작은 하지만 console에 오류가 나온다

• 요즘은 해당 방식 보다는 TypeScript를 사용하는 쪽으로 바뀌어 가고 있음

 

클래스형 컴포넌트 props

 

자식 컴포넌트에서 props를 불러오기 위하여 props를 함수의 변수 형태가 아닌 this.props로 자기 자신의 props를 가리킨다는 차이를 가지고 있음

그 외 다른 부분에서는 함수형 컴포넌트와 크게 다르지 않음