React 컴포넌트에 props 넣어주기

React 컴포넌트들은 사실 함수라는 것을 이야기 했었습니다.

그렇기에 React 컴포넌트에도 인자들을 넣어줄 수 있다는 생각을 해볼 수 있습니다.

function Btn(){
	return <button>안녕하세요</button> 
    

이런 버튼 컴포넌트가 있다고 해봅시다.

이 컴포넌트를 App 컴포넌트에 넣어주고 App 컴포넌트를 rendering해줄겁니다.

function App(){
	return (
    <div>
    <Btn />
    <Btn />
    </div>

이렇게 여러개의 컴포넌트를 넣어준다고 가정할 때, 이 컴포넌트들은 각각 함수이므로 인자값을 받을 수가 있습니다.

function App(){
	return (
    <div>
    <Btn text="안녕하세요" />
    <Btn text="안녕히가세요"/>
    </div>

이렇게 컴포넌트의 property를 이용해 넣어준 값들은 컴포넌트의 인자로 받을 수 있는데, 여러가지 값이 JSON타입으로 들어가게 됩니다.

다시 Btn컴포넌트를 보도록 하겠습니다.

function Btn(props){
	return <btn>{props.text}<btn>

그렇게 인자로 받은 text값을 버튼의 텍스트에 넣어보도록 하겠습니다.

그럼 두개의 버튼이 나오지만 각 각 button의 text 값은 다르게 나오는 걸 확인할 수 있습니다.

props로 받고 그 값을 키를 통해 얻는 방법 말고 직접 키를 입력하는 방법도 있습니다.

function Btn({text}){
	return <btn>{text}<btn>

이렇게 중괄호에 키를 넣어주면 object의 키 안에 있는 value값을 바로 가져와 사용할 수 있습니다.

물론 이 props를 통해 함수도 넣어줄 수 있습니다.

const [title, setTitle] = React.useState("제목입니다.")
const onClickEvent = () => {
	setTitle("제목이 바뀌었습니다.")
}
function App(){
	return (
    <div>
    <Btn text={title} onClickEvent={onClickEvent}/>
    <Btn text="안녕히가세요"/>
    </div>

이렇게 state 값을 만든 뒤, state값을 이용하여 title값을 텍스트에 넣어주도록 합니다.

그런 뒤 onClickEvent라는 property를 활용하여 onCLick이벤트가 발생할 시에 실행할 함수를 정의해줍니다.

다시 Btn 컴포넌트로 돌아가보도록 하겠습니다.

function Btn(props){
	return <btn onClick={props.onClickEvent}>{props.text}<btn>

이렇게 onClick 이벤트를 property를 이용해 넣어봤습니다.

정리
1. 컴포넌트를 자식으로 사용할 때, 컴포넌트 태그의 property 값을 각 컴포넌트에 인자로 제공해줄 수 있다.

2. 컴포넌트에 값들은 object 즉, JSON타입으로 들어가며 key값을 통해 꺼내올 수 있다.

3. 인자 안에 {key값}을 사용해서 바로 변수처럼 사용할 수도 있다.

4. props에는 변수 뿐만 아니라 함수도 들어갈 수 있다.

5. props 안에 변수를 이상하게 넣을 경우 에러가 발생하도록 할 수도 있다.

<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

위 cdn을 넣어준 뒤,

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

이렇게 컴포넌트.propTypes 오브젝트를 만들어 타입들을 설정해주면 타입이 안 맞는 props 값들을 받는것을 막을 수 있다.