[ReactJS] Props _영화 웹 서비스 만들기

1. 함수형 컴포넌트

App.js

function SaveBtn() {
	return <button> Svae Changes </button>;
}
function ConfirmBtn() {
	return <button> Confirm </button>;
}
function App() {
	return(
    	<div>
        	<SaveBtn />
            <ConfirmBtn />
        </div>
    );
}

 

<SaveBtn />과 <ConfirmBtn /> 과 같은 컴포넌트를 함수형 컴포넌트라고 한다.

 

2. 컴포넌트 변경하기 by using Props

props를 이용하면 같은 버튼을 두 개 만들 필요가 없다.

Btn이라는 함수형 컴포넌트를 하나만 만들고 text만 바꿔주면 위와 같은 두가지 버튼을 얻을 수 있다.

function Btn() {
	return <button> </button>;
}
function App() {
	return(
    	<div>
	        <Btn />
    	    <Btn />
        </div>
    );
}

 

1. Btn에 text 속성 추가하기

function Btn() {
	return <button> </button>;
}
function App() {
	return(
    	<div>
	        <Btn text="Save Changes" />
    	    <Btn text="Confirm" />
        </div>
    );
}

props로 전달될 속성의 이름은 text 뿐만 아니라 마음대로 설정할 수 있다. banana="Save Changes" 도 가능

 

2. props 인자 전달해주기

Btn({text: "Save Changes" })
<Btn text="Save Changes" />

// 위 두 줄은 똑같은 구문임

Btn은 '함수형' 컴포넌트이기 때문에 사실 함수임.

그렇기 때문에 text="랄라" 를 속성에 넣어주는 것은 함수 인자로 전달해주는 것과 같다.

그리고 컴포넌트에서 props를 통해 그 인자를 전달받는 것임.

function Btn(props) {
	return <button> props.text </button>;
}
// 잘 안쓰는 방식

function Btn({text}) {
	return <button> {text} </button>;
}
// 권장됨

 

3. props는 사실 '오브젝트' 이다.

function App() {
	return(
    	<div>
	        <Btn text="Save Changes" x="tomato" wonju="3.14" />
    	    <Btn text="Confirm" />
        </div>
    );
}

Btn 하나에 여러 속성을 넣어주었을 때 props를 console.log에 띄워보면

{text: 'Save Changes', x: 'tomato', wonju: '3.14'}

위와 같이 뜨는 것을 볼 수 있다.

따라서 props는 오브젝트이다.

 

3. Memo : 쓸데없는 리렌더링를 막아준다.

사용법

const MemorizedBtn = React.memo(Btn);

function App() {
	return(
    	<div>
	        <MemorizedBtn text="Save Changes" />
    	    <MemorizedBtn text="Confirm" />
        </div>
    );
}

<Btn />을 <MemorizedBtn />으로 바꿔주면 끝.

클릭된 컴포넌트만 리렌더링 된다.

 

4. PropType : 어떤 타입의 prop을 받고 있는지 체크해준다.

사용법

Btn.propTypes = { 
	// 이 안에 우리가 사용할 props의 타입과 내용을 명시해둘 수 있음
}

예.

Btn.propTypes = { 
	text: PropTypes.string;
	fontSize: PropTypes.number,
}

명시된 타입과 다른 타입을 props에 사용했을 때 콘솔에 오류가 나면서 알려준다. 타입을 오입력하는 등의 실수를 방지해준다.