React) Component & Props

Component 종류

⊙ 함수형 component

: 짧고 직관적이다. vanilla js 와 같은 기본적인 function 구조를 이용해 직관적이며 추상적이다. 메모리 자원을 덜 사용한다.

 

⊙ 클래스형 component

: State와 라이프 사이클 기능 이용가능하다. Render함수 필수이다. 

 

 

클래스형 component

구조 암기해주자

render하는 함수는 무조건 사용한다. 그안에 있는 함수를 return하는 것이기 때문이다. 

import React, { Component } from 'react';

class ClassComponent extends Component {
    render() {
        return(
        	<h1> ClassComponent</h1>
        );
    }
}
export default ClassComponent;

 

 

 

함수형 Component

import React from 'react';

const FunctionComponent = () => {
	reutrn <div>새로운 MyComponent</div>
};

export default FunctionComponent;

위의 클래스형 component 구조를 화살표함수로 바꿔준것뿐이다. 

 

 

Props란?

properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소. props는 컴포넌트끼리 값을 전달하는 수단이다. 

 

<Header title="제목" content="내용"></Header>

 

function ClassComponent (props) {
    return(
        <div>
        	<h1>Hello {props.title}</h1>
        </div>
    )
}

props는 부모가 자식을 호출할때 보내는 값이다. 값을 불러낼때에는 파라미터로 불러온다. 함수 괄호안에 불러오듯.

 

값을 아무것도 보내지 않는다면, defualtprops를 설정할 수 도 있다.

ClassComponent.defaultProps = {
    title: "기본제목"
    content: "기본내용"
}