react props 실습으로 알아보기 (props)

react의 props는 부모가 자식에게 유전자를 물려주는 기능이라고 보면 된다.

여기서 부모와 자식관계는 어떤 하나의 컴포넌트가 다른 컴포넌트를 호출했다면

호출한 컴포넌트는 부모

호출받은 컴포넌트는 자식

으로 비유되며, 이 때 props는

호출한 컴포넌트와 호출받은 컴포넌트의 데이터 송수신을 하는 수단이라고 생각하면 된다.

 

간단한 실습으로 props을 알아보자

import React, { useState } from 'react'

function Father() {

    const [DNA, setDNA] = useState("");

    const onChangeInput = (e) => {
        setDNA(e.target.value);
    }
    return (
        <>
            <span>나는 무슨 아빠인가요 :</span> <input value={DNA} onChange={onChangeInput} style={{ width:"400px" }}></input>
            <img src="./father.jpg" style={{display:"block", marginTop:"10px"}} height="200px"/>
            <p>안녕 나는 {DNA} 아빠</p>
        </>
    )
}
export default Father

마우스 우클릭 -> 이미지를 다른 이름으로 저장

 

다음 코드를 입력한 후 결과를 알아보자

그러면 이렇게 input 입력창의 입력한 값이 바뀔 때마다 바로 아래 하단에 입력값이 출력하게 된다.

DNA state가 input태그의 onChange이벤트가 발생할때마다 바뀌게 되니 매번 랜더링이 되는 것이다.

자 그럼 자식 컴포넌트도 만들어보자

 

import React, { useState } from 'react';
import Son from './Son'
function Father() {

    const [DNA, setDNA] = useState("");

    const onChangeInput = (e) => {
        setDNA(e.target.value);
    }
    return (
        <>
            <span>나는 무슨 아빠인가요 :</span> <input value={DNA} onChange={onChangeInput} style={{ width:"400px" }}></input>
            <img src="./father.jpg" style={{display:"block", marginTop:"10px"}} height="200px"/>
            <p>안녕 나는 {DNA} 아빠</p>
            <Son/>
        </>
    )
}
export default Father;

 

import React from 'react';

function Son(props) {
    return (
        <div>
            <img src="./son.jpg" height="200px"/>
            <p>응애 나는 아들</p>
        </div>
    )
}

export default Son;

마우스 우클릭 -> 이미지를 다른 이름으로 저장

 

실행결과는 다음과 같다

 

내가 원하는 것은 부모 컴포넌트 안에 Input 입력창에 입력한 값을 자식 컴포넌트에 출력하고 싶다.

이런 경우에 props를 사용하면 된다.

 <Son receiveDNA={DNA} />

 

props는 자식 컴포넌트 태그 안에 PropsName={Value} 형식으로 입력하면 된다.

여기서 PropsName은 자식 컴포넌트에서 사용할 이름이고 Value는 전달할 값이다.

우리는 state인 DNA를 전달할 것이고 자식 컴포넌트에선 receiveDNA 라는 이름으로 그 값을 이용할 것이다.

 

import React from 'react'

function Son(props) {
    return (
        <div>
            <img src="./son.jpg" height="200px"/>
            <p>응애 나는 {props.receiveDNA} 아들</p>
        </div>
    )
}

export default Son

 

자식 컴포넌트에서 props를 사용할려면 입력인자에 props란 이름을 사용해야한다.

다른 이름으로는 안되며 무조건 props로 해야한다.

(보낸 값이 객체 혹은 배열일 경우 구조분해를 통해 받을 수 있다.)

 

그리고 우리는 receiveDNA라는 이름으로 사용하기로 약속했으니 

사용하고 싶은 곳에 props.receiveDNA를 입력하면 부모한테 값을 물려받아 사용하게 되는 것이다.

 

 

그러면 입력창에 입력값이 바뀔때마다 부모와 자식 컴포넌트 값이 바뀌어지게 된다.

 

이런식으로 props의 사용법을 간단한 실습을 통해 배우게 되었다.

 

그리고 이제 props의 중요한 규칙을 배워보겠다.

 

 

 

 

React 공식문서를 보면 props에 대해 이렇게 나와있다.

즉 props는 값을 변경해선 안된다.

props값을 변경한다해서 부모 컴포넌트의 값이 변경되지 않을뿐더러

그 자체가 동작이 되지 않는다.

 

그럼 자식 컴포넌트에서 props를 사용하고 싶을땐 어떻게 해야하나요?

 

 

const [conversion, setConversion] = useState(props.receiveDNA);

 

이런식으로 state를 사용해서 props 값으로 초기화하면 된다.

몰론 이 방식도 props를 바꾼 것이 아니라 state로 그 값을 이어받아 사용하는 것이다.