[React] props 전달받기 예제 - 떽떽대는 개발공부

 

 

 

react 를 공부하는데 있어 props 값이 기본이지만 이해하는데 어려움이 있었다.

 

이번엔 컴포넌트 3개를 이용하여 container, input, result  각각 작성하여 props 값 넘기기 예제를 작성해 보았다.

먼저, 아래와 같이 컴포넌트 3개를 작성한다.

src/BoardContainer.js

import React from 'react';

import BoardInput from '@BoardNew/BoardInput'
import BoardResult from '@BoardNew/BoardResult'

function BoardContainer() {
    return(
        <div>
            <div>
                <BoardInput />
            </div>
            <hr />
            <div>
                <BoardResult />
            </div>
        </div>
    )
}

export default BoardContainer;

 

src/BoardInput.js

import React from 'react';

function BoardInput() {
    return (
        <div>
            <div>
                내용: <input type="text" />
                <button>input</button>
            </div>
        </div>
    );
}

export default BoardInput;

 

src/BoardResult.js

import React from 'react';

function BoardResult(props) {
    return(
        <div>
            결과: <input type="text"/>
        </div>
    )
}

export default BoardResult;

 

작성 됐다면 아래와 같이 나타난다.

먼저, BoardContainer.js 에선 useState 를 사용하여 inputData 관리를 하고, BoardInput.js 에서 input 버튼을 누르면 값을 전달 받아서 setInputData 하여 BoardResult.js 에 전달 한다.

src/BoardContainer.js

import React, { useState } from 'react';

import BoardInput from '@BoardNew/BoardInput'
import BoardResult from '@BoardNew/BoardResult'

function BoardContainer() {

    const [inputData, setInputData] = useState({
        content: ''
    });

    const onCopy = (data) => {
        setInputData(data.content)
    }

    return(
        <div>
            <div>
                <BoardInput onCopy={onCopy} />
            </div>
            <hr />
            <div>
                <BoardResult inputData={inputData}/>
            </div>
        </div>
    )
}

export default BoardContainer;

 

BoardInput.js 에서도 별도로 useState 로 content 를 관리하고, input 란으로 입력되는 값을 handleContent 로 setContent 해준다.

input 버튼을 클릭하면 부모 컴포넌트인 BoardContainer.js 와 동일한 형식으로 데이터를 저장하여 props 로 전달받은 함수를 이용하여 onCopy 함수를 호출하고, input 란의 값은 지운다.

 

src/BoardInput.js

import React, { useState } from 'react';

function BoardInput(props) {
    const { onCopy } = props
    const [content, setContent] = useState('')

    const handleContent = (e) => {
        setContent(e.target.value)
    }

    const onSubmit = () => {
        const _inputData = {
            content: {content}
        }
        onCopy(_inputData)
        setContent('')
    }

    return (
        <div>
            <div>
                내용: <input type="text" name="content" onChange={handleContent} value={content} />
                <button onClick={onSubmit}>input</button>
            </div>
        </div>
    );
}

export default BoardInput;

 

BoardResult.js 는 간단하게 BoardContainer.js 로부터 prop 받은 값을 value 로 나타내 주기만 하면 끝이다.

src/BoardResult.js

import React from 'react';

function BoardResult(props) {
    const { inputData } = props

    return(
        <div>
            결과: <input type="text" value={inputData.content}/>
        </div>
    )
}

export default BoardResult;

 

이로써 너무나 간단하게 props 전달하는 예제를 완료 하였다. 이 예제로 redux 를 이용한 방식도 해봐야겠다.