쓰이는 곳(App.js)에서 값을 정한다 = props(부모)

쓰임 당하는 곳(Hello.js나 Wrapper.js)에서 값을 정한다 = children

말이 좀 어렵다.. 그러니까 props는 원래 컴포넌트에 참조값을 전달하기위해서 만들어진 예약어고 children은 부모 컴포넌트로부터 값을 전달받아와서 그 값을 수정하여 사용하기 위해 만들어진 그런 아이인듯하다.
그 말인 즉슨, props.children은 부모 컴포넌트의 참조값을 내가 바꿔서 사용할 수도 있다 인줄 알았는데 오전달된 내용인듯하다.
만일 저 말이 맞다면 children 객체를 쓰고 스타일을 바꿔서 적용한 사례가 있어야할텐데 난 그 사례를 본적이없다. 저 말은 신경쓰지 않아도 되는듯하다.

핵심은

Props.children
컴포넌트 태그 사이에 값이 있을때 'children'이란 예약어를 사용한다.

그냥 이게 다라고 한다.. 허무+++

import React from 'react'

function Wrapper(props) {

const style = {
    border: '2px solid black',
    padding: '16px'
};

return (
    <div style={style}>
        {props.children}
    </div>
)
}

export default Wrapper

props 는 properties 의 줄임말 (어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용)

여러개의 props는 비구조화 할당으로 간결하게 작성
defaultProps 로 기본값 설정가능
props.children
컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children

이부분은 매우 중요한 부분이라서 알아둘 필요가 있다. 컴포넌트 태그로 감싸져있는 대상에게는 props를 적용해서 내용을 보여줄수 없기 때문이다. 때문에 children이 필요하다.