1-5
리액트는 퍼즐을 맞춰준다
컴포넌트는 퍼즐조각이고
정말 간단하지만 여기에도 퍼즐 조각들이 들어가 있다
1. 겉을 감싸는 조각
2. 이름과 색상을 구현한 조각
코드를 보자
import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
function App() {
return (
<>
<Wrapper>
<Hello name="react" color="red" />
<Hello color='pink'/>
</Wrapper>
</>
);
}
export default App;
React의 구성품을 사용하려면 첫번째로 React를 인용해야 한다
두번째는 Wrapper
세번째는 Hello
<Wrapper>
<Hello name="react" color="red" />
<Hello color='pink'/>
</Wrapper>
그럼 어디가 Wrapper이고 어디가 Hello인지 간단하게 알 수 있다
검은테두리가 Wrapper
밑의 글씨들이 Hello
Wrapper의 코드를 살펴보자
import React from 'react';
function Wrapper({children}) {
const style = {
border: '2px solid black',
padding: '16px',
};
return (
<div style={style}>
{children}
</div>
)
}
export default Wrapper;
children는 컴포넌트 사이의 값을 조회할수 있도록 해준다
import React from 'react';
function Hello({color, name}) {
return <div style={{color}}>안녕하세요 {name} </div>
}
Hello.defaultProps = {
name: '이름없음'
}
export default Hello;
color, name 값을 지정한 모습이고
디폴트 값으로 name에 이름없음을 지정해준 모습
디폴트 값은 말 그대로 값을 정의 하지 않았을때의 값을 이야기 한다
그럼 다시 이 코드를 보면
import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
function App() {
return (
<>
<Wrapper>
<Hello name="react" color="red" />
<Hello color='pink'/>
</Wrapper>
</>
);
}
export default App;
Wrapper로 감싸고
Hello 이름 react 컬러는 레드인 글씨와
Hello 디폴트 이름없음 컬러는 핑크인 글씨를 나타낸다
