component 는 함수와도 같은데 (붕어빵틀)
입력값으로 props 를 받아 (팥,슈크림.. ) // 속성
element라는 출력을 한다. (붕어빵)
function Welcome(props){ 받아온 props 중 name의 값을 사용
return <h1>안녕,{props.name}</h1>}
const element = **<Welcome name="Sara"/> Welcome 함수 component에 props로 {name:sara} 들고감**
ReactDOM.render(
**element, 출력**
document.getElementById('root'));
새로운 파일 만들기 src/Comment.js
기본 형식 만들기
import React from "react";
class Comment extends React.Component{ 새로운 Component 만들기
render(){ 보여주는 곳
}}
export default Comment -> 다른곳에서 사용하겠다.
App.js 에서
<Comment name={'hong'} content={'내용'}/> 으로 보내고
<div> {this.props.name} </div>
<div> {this.props.content} </div> 로 사용가능
const comments=[
{name:'hong', content:'홍'},
{name:'onhg', content:'온흑'},
{name:'nhgo', content:'느흑고'},
]
<div>
{comments.map((comment,index)=>{
return (
<Comment name={comment.name} content={comment.content}/>
)
})}
</div>
const styles = {
1번 : {
width:'20%'..},
2번 : {
height:20px..},
...}
<div style= {styles.1번}>