[React 기초 문법] #2 클래스형 컴포넌트 + props

컴포넌트의 기능

 

데이터를 바탕으로 UI를 만들어 줌.

 

라이프사이클 API를 이용하여 컴포넌트가 화면에 렌더링 될 때(didmount), 사라질 때(unmount),

 

업데이트 될 때(didupdate) 주어진 작업을 처리할 수 있음.

 

legacy가 되어버린, 하지만 배워야하는 클래스형 컴포넌트

 

현재 코드스테이츠에서는 함수형 컴포넌트를 알려주고, 이를 바탕으로 스프린트를 진행한다.

 

하지만 리액트관련하여 검색해보면 대부분의 자료가... 클래스형이다! 특히 stackoverflow에서는!

 

취업을 하려면 둘 다 할 줄 알아야할 것이다. 분명.

 

아무튼 클래스형은 아래와 같은 형태로 되어있는데...

 

import React, {Component} from 'react';

class App extends Component {
	render(){
        return <div className='react'> 클래스형 컴포넌트 </div>;
    }
}

export default App;

함수형 컴포넌트와의 구조적 차이점은 Component를 import해 와야하는 부분과

 

render(){}안에 return문이 들어 있는 부분 같다.

 

또한 기능적으로는 state와 라이프사이클 기능을 사용할 수 있다는 점이다. 

 

props(함수형으로 설명)

 

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소.

 

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할 수 있다. 

 

JSX에서 props를 렌더링하기 위해서는 JSX내부에서 {}로 감싸서 사용해야함. 

 

부모컴포넌트에서 자식컴포넌트로 넘겨주는 props가 없을 경우, 자식 컴포넌트에서 JSX 내부에 props를 넣는다 해도

 

아무것도 출력되지 않을 것이다. 

 

이 경우 기본값을 대신하여 보여줄 수 있는데 이를 defaultProps라고 한다. 

 

자식컴포넌트에서 아래와 같이 지정해 줄 수 있다.

 

import React from 'react';

const ComponentName = props => {
	return <div> My name is {props.name}.</div>
}

ComponentName.defaultProps = {
	name: 'Park'
};

export default ComponentName;

부모컴포넌트에서 아무런 props를 넘겨주지 않아도 자식컴포넌트는 My name is Park.을 출력한다. 

 

+ 컴포넌트 태그 사이의 내용을 보여 주는 Children {props.children}

이와 같은 형식으로 자식컴포넌트에서 부모컴포넌트에서 자식컴포넌트로 감싼 내용을 불러올 수 있다. 

 

컴포넌트의 props의 타입을 지정할 때는 propTypes를 사용.

import PropTypes from 'prop-types'; //로 import해야하며



ComponentName.propTypes = {
	name: PropTypes.string
};

export default ComponentName;

name의 type이 string이 아닐경우 console에 경고창을 띄워준다. 

 

클래스형 컴포넌트에서 prop를 사용하려면 render 함수에서 this.props를 구조분해할당한 후
return문 안에서  사용해야한다.