[React] Props

 

 

 

Props

 

 

- 자식 컴포넌트에게 props를 전달해주면 객체로 묶여서 자식 컴포넌트에 매개변수로 전달됨

 

 

 

 

 

- 프롭스로 color 값을 넘겨서 스타일 설정도 가능함

- 하지만 모든 코드에 color가 들어가지 않을 수 있으므로 코드 개선이 필요함

 

 

 

const Button = (props) => {

    return (
    <button style={{color : props.color}}>{props.text}</button>
    )
}


Button.defaultProps = {
    color : "blue"
}

export default Button

 

- 그럴 땐 위와 같이 default 값을 넘겨주면 됨

 

 

 

- 객체로 전달받기 때문에 점 표기법으로 값을 꺼내오는데 이게 불편하면 매개변수를 아예 나눠서 받는 방법도 있음

 

 

 

- 여러개를 props 해야 할 때에는  스프레드 연산자를 활용할 수 있음

 

 

 

- html요소나 react 컴포넌트로 props 할 수 있음

 

 

 

 

결과

 

 

1. html 요소

 

2. component

 

 

 

 

 

출처 : 인프런 ) 한 입 크기로 잘라 먹는 리액트 - 이정환