[React] 4. 컴포넌트만들기, 5. props

컴포넌트만들기

사용자 정의 태그

• 리액트에서 제일 중요한 개념
• 리액트에서 사용자 정의 태그를 만들때는 반드시 대문자로 시작해야함
• ex.

컴포넌트(Component)

• 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
• 왜? 사용하는가
  • 가독성, 재사용성, 유지보수 용이성

props

Props

• 컴포넌트의 외부에서 사용하는 입력값(임의의 입력), 속성을 나타내는 데이터
• 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성
• 

Props 타입

1. 문자열 타입 프로퍼티

• 프로퍼티 타입이 문자열인 경우, 프로퍼티 값을 표현할 때는 큰 따옴표(““)를 사용함.
  • <MyComponent name="헬로리액트!">

2. 문자열 이외 타입의 프로퍼티

• 문자열 타입 이외의 프로퍼티 값은 중괄호({})를 사용함.
  • <MyComponent boolProp= {true} //boolean arrProp= {['a','b','c']} //배열 objProp= //객체 funcProp= {() => { alert('알림창'); }} //함수 />

PropTypes : 데이터 타입 검증하기

• PropTypes는 상위 컴포넌트로부터 전달받은 데이터의 타입을 확인하는 라이브러리
  • 상위 컴포넌트로부터 전달받은 props가 유효하지 않은 타입의 데이터가 전달되는 경우 콘솔에 에러 경고문이 출력됨.