2-1. 컴포넌트 종류와 props

조현준·2022년 5월 7일
0

React

목록 보기
2/5
post-thumbnail

1) React의 컴포넌트 종류는 두가지이다.

  • 클래스형 컴포넌트
    • state를 사용할 수 있다.
    • LifeCycle을 사용할 수 있다.
    • 임의 메서드를 정의할 수 있다.
  • 함수형 컴포넌트
    state와 Lifecycle을 사용할 수 없었으나, 리엑트 v16.8 이후 Hooks을 이용하여 사용이 가능해지게 되었다.

  • 함수형 컴포넌트
    함수형 컴포넌트를 선언 시 function을 사용하는 것과 화살표 함수 문법을 사용하는 것은 큰 차이가 없으며, 화살표 함수가 조금 더 간결하다.
    어떠한 방식을 선택할 지는 단지 각자의 취향에 달려있다.

/*방법 1.*/
function MyComponent(){ return  }
/*방법 2.*/
const  MyComponent = () => { return }
  • Es6 화살표 함수
    • name : function() 형식을 name : () => 형식으로 변환할 수 있다.
    • 이 때 function 형식은 일반 함수로 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 종속된 인스턴스를 가리키게 된다.
function Example(){
	this.name = "가나다”;
	return {
		name : ‘라마바’
	  , con1 : function() {	console.log( this.name + “입니다.” ); }
	  , con2 : () => { console.log( this.name + “이에요,” ); }
	}
}

const a = new Example();
a.con1; // 라마바입니다.
a.con2; // 가나다이에요,
  • 다음과 같이 function 의 경우 종속된 객체인 라마바를 this로 가리키지만, 화살표 함수의 경우 종속된 인스턴스를 가리키는 것이다.
  • 화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.
  • 모듈 내보내기와 불러오기
    • 모듈 내보내기 : export default Component; 는 다른 파일에서 이 파일을 임폴트 할 때 위에 선언된 컴포넌트 클래스를 불러오도록 설정한다.
    • 모듈 불러오기 : 컴포넌트에서 컴포넌트를 불러올 경우 <Component/ > 형식으로 불러올 수 있다.
  • props : properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
    • props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
  1. 함수형 컴포넌트를 사용할 때 props 지정하기
// 안녕하세요 Koboolean입니다.
/* 부모 */
<MyComponent name = “Koboolean” />
/* 자식 */
const MyCompoent = props => { return <h1>안녕하세요 {props.name}입니다.</h1> }
  • props 기본값 설정하기 : defaultProps를 지정하면 부모에서 자식으로 props값을 지정해주지 않았을 경우, 디폴트 값을 지정할 수 있다.
const MyComponent = props => { return <h1> 안녕하세요 {props.name}입니다.}
MyComponent.defaultProps = { name : “디폴트” }
  • children으로 값 가져오기
/* 부모 */
<MyComponent > Koboolean </MyComponent>
/* 자식 */
const MyComponent = props => {return <h1>안녕하세요 {props.children}입니다.</h1>}
  • Es6의 비구조화 할당 문법을 통해 props 내부 값을 추출해 내면 props. 형식을 사용하지 않고 편하게 내부값을 사용할 수 있다.
/* 방법 1 */
const MyComponent = props => { 
	const {name, children} = props;
	return (<h1>안녕하세요 저는 {name}이며 {children}입니다. </h1>)
}

/ *방법 2 */
const MyComponent = ({name, children}) => { 
	return (<h1>안녕하세요 저는 {name}이며 {children}입니다. </h1>)
}
  • propTypes를 이용하면 props의 타입을 지정할 수있다.
import PropTypes from ‘prop-types’;

const MyComponent = ({name, children}) => { 
	return (<h1>안녕하세요 저는 {name}이며 {children}입니다. </h1>)
}

// name을 문자열 타입으로 지정한다.
MyComponent.propTypes = { name : PropTypes.string }
  • isRequired를 이용하면 propTypes의 값이 지정되지 않았을 경우 경고를 나타낼 수 있다.
MyComponent.propTypes = { name : PropTypes.string.isRequired }
  1. 클래스형 컴포넌트를 사용할 때 props 지정하기
  • 클래스형 컴포넌트에 props를 설정하기 위해선 render함수에서 this.props를 조회해서 사용할 수 있다.
class MyComponent extends Component {
	render(){
		const { name , children } = this.props;
		return( <div>안녕하세요 {name}님 children 값은 {children}입니다. </div> )
	}
}

https://ko.reactjs.org/docs/react-component.html

profile
WEB 개발자의 끄적끄적 개발일기

0개의 댓글