부모컴포넌트에서 자식컴포넌트에게 함수를 넘겨주려면?

//Login.js
<Grid padding="16px 0px">
    <Input
        label="아이디"
        placeholder="아이디를 입력해주세요."
        _onChange={() => {
            console.log("아이디 입력했어!");
        }}
	/>
</Grid>

Login 컴포넌트가 부모컴포넌트, Input 컴포넌트가 자식컴포넌트인 상황입니다. 이럴때에 부모컴포넌트에서는 prop(예시에는 _onChange)로 사용할 함수를 입력하고, 자식컴포넌트에서 부모로부터 props 받아서 이벤트함수에 props를 적용시킵니다. 아래처럼 말이죠!

 

defaultProps로 콜백을 넘겨주는 이유는, 컴포넌트 내에서 쓰고 있는 무언가를 props로 넘겨받지 못했을 경우 오류나는 걸 방지하기 위함입니다 

//Input.js
import React from "react";
import styled from "styled-components";

import { Text, Grid } from "./index";

const Input = props => {
    const { label, placeholder, _onChange } = props;
    return (
        <React.Fragment>
            <Grid>
                <Text margin="0px">{label}</Text>
                {/* onChange가 되면 _onChange라는 함수를 넘겨준다. */}
                <ElInput placeholder={placeholder} onChange={_onChange} />
            </Grid>
        </React.Fragment>
    );
};

Input.defaultProps = {
    label: "텍스트",
    placeholder: "텍스트를 입력해주세요.",
    _onChange: () => {},
};

const ElInput = styled.input`
    border: 1px solid #212121;
    width: 100%;
    padding: 12px 4px;
    box-sizing: border-box;
`;

export default Input;