[React]Props

props는 자식컴포넌트에게 데이터를 전달하는 방식이다.

 

버튼컴포넌트를 만들고 각각의 목적에 맞게 버튼의 텍스트를 바꿔주고 싶다는 상황을 가정하자.

import './Body.css'
import Button from './Button';

export default function Body() {
    const number = 42;
    const bool = true;
    const obj = { a: 42, };

    return (
        <div className='body'>
            <h1>BODY</h1>
            <Button text={`1번버튼`}/>
            <Button text={'2번버튼'}/>
            <Button text={'3번버튼'}/>
            <Button text={'4번버튼'}/>
            <Button text={'5번버튼'}/>
            <Button text={'6번버튼'}/>
        </div>
    )
}

 

import './Button.css';

export default function Button(props) {
    return (
        <button className='button'>{props.text}</button>
    )
}

 

위와 같이 props를 이용하여 버튼에 나타내고자 하는 text를 다르게 하여 버튼에 나타나는 text를 바꿀 수 있다.

props는 넘겨주는 대로 받아오는 객체라는 점을 이해하고 이를 유연하게 사용하자. 또한 css에서도 사용가능 하다.

<Button text={`1번버튼`} color={'red'}/>

export default function Button(props) {
    return (
        <button 
        style={{backgroundColor: props.color}}
        className='button'
        >
            {props.text}
        </button>
    )
}

 

데이터를 많이 넘겨야 하는 상황이 올 경우 props가 길어지는 경우가 생길 수 있다. 하지만 react에서는 리턴문을 통해 컴포넌트의 존재이유를 파악 및 유추하기 좋기에 props를 넘기는 부분이 너무 길어지면 코드의 가독성이 떨어질 수 있다.

export default function Body() {
    const number = 42;
    const bool = true;
    const obj = { a: 42, };

    return (
        <div className='body'>
            <h1>BODY</h1>
            <Button text={`1번버튼`} 
            color={'red'} 
            a={1} 
            b={2} 
            c={3}
            />
            <Button text={'2번버튼'}/>
            <Button text={'3번버튼'}/>
            <Button text={'4번버튼'}/>
            <Button text={'5번버튼'}/>
            <Button text={'6번버튼'}/>
        </div>
    )
}

보기 불편하다...

import './Body.css'
import Button from './Button';

export default function Body() {
    const buttonProps = { text: `1번 버튼`, color: `red`, a: 1, b: 2, c: 3, };

    return (
        <div className='body'>
            <h1>BODY</h1>
            <Button {...buttonProps}/>
            <Button text={'2번버튼'}/>
            <Button text={'3번버튼'}/>
            <Button text={'4번버튼'}/>
            <Button text={'5번버튼'}/>
            <Button text={'6번버튼'}/>
        </div>
    )
}

이처럼 props를 객체에 집어넣고 ...buttonProps(전개연산자)를 이용하여 넘겨주면 된다.

import './Button.css';

export default function Button({text, color}) {
    return (
        <button 
        style={{backgroundColor: color}}
        className='button'
        >
            {text}
        </button>
    )
}

받는 쪽도 이렇게 받는것이 가능하다.

 

 

html요소들도 넘겨 줄 수 있다.

<Button {...buttonProps}>
    <div>버튼</div>
</Button>

Button컴포넌트를 열고 그 안에 html태그들을 집어넣고 나서 Button컴포넌트를 닫으면(열고 닫는 걸 확인 못 해서 조금 헤맸다.)

export default function Button({text, color ,children}) {
    return (
        <button 
        style={{backgroundColor: color}}
        className='button'
        >
            {children}
        </button>
    )
}

children이라는 props로 넘어오게 된다!

 

또한 컴포넌트도 자식에게 props로 넘겨줄 수 있다.

import './Body.css'
import Button from './Button';

function ButtonChild() {
    return (
        <div>BUTTON CHILD</div>
    )
}

export default function Body() {
    const buttonProps = { text: `1번 버튼`, color: `red`, a: 1, b: 2, c: 3, };

    return (
        <div className='body'>
            <h1>BODY</h1>
            <Button {...buttonProps}>
                <ButtonChild />
            </Button>
            <Button text={'2번버튼'}/>
            <Button text={'3번버튼'}/>
            <Button text={'4번버튼'}/>
            <Button text={'5번버튼'}/>
            <Button text={'6번버튼'}/>
        </div>
    )
}

임시로 ButtonChild라는 컴포넌트를 만들어서 Button에게 넘겨주었다.

이는 위와 똑같이 children props로 넘어가게 된다! (컴포넌트를 넘기는 건 아직 어떻게 활용해야 할지 감이 오지는 않는다)

 

+)

fuction Child(props) {
	return <div>props.text</div>;
}

Child.defaultProps = {
	text: "default text"
};

위와같이 작성할 경우 어떠한 props도 전달되지 않을경우 "default text"가 기본값으로 전달된다.