리액트 9강

• hello.js에 있는 name을 아무리 바꿔도 app.js에 있는 name은 바뀌지 않음
  • props는 “부모 컴포넌트”에서 “자식 컴포넌트”로 보내주는 값이기에 자식 컴포넌트를 바꿔도 부모 컴포넌트는 바뀌지 않음 
• 함수의 파라미터로 변수를 전달해주는 것이기에 app에 있는 name의 값이 복사
• alt + shift + f -> 코드정리
• 우리가 만든 컴포넌트로 다른 컴포넌트를 감싸주려면 반드시 감싸는 컴포넌트가 프롭스로 children을 받아온 후 자신의 jsx표현식 안에 넣어줘야 함 

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
    return (
        <Wrapper>
            <Hello name="React!!!!" /> 
            <Hello name="React!!!!" /> 
        </Wrapper> //우리가 만든 부모컴포넌트 위에꺼는 자식컴포넌트
    );
}

export default App;

//Hello.js
import React from 'react';

function Hello({ name }) {
    return <h1>Hello, {name}</h1> //name 바꿔도 암~것도 안바뀜, 자식 컴포넌트라서
}

Hello.defaultProps = { //defaultProps를 통해 name의 값을 기본적으로 할당함
    name: "React!!"
}

export default Hello;

import React from "react";

function Wrapper({children}){ //감싸는 컴포넌트는 props로 children을 해줘야함
    const  style = {
        border:'1px solid red',
        padding: '12px',
    };

    return <div style = {style}>{children}</div> //jsx문법에 children표시를 해줘야 함
}

export default Wrapper;