Components 👌

component 는 함수와도 같은데 (붕어빵틀)

입력값으로 props 를 받아 (팥,슈크림.. ) // 속성

element라는 출력을 한다. (붕어빵)

• function Componetns
• Class Components (많이 이용)
• Component를 만들 때는 항상 대문자로 시작해야 한다.
  • 소문자면
    이런 식으로 인식
• Component 안 Component도 가능

Component rendering 방식

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'));

Props

props 는 바꿀수 없음 (Read only)

• 붕어빵을 다 구웠는데 속재료를 바꿀수 없다
• props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄 것!

댓글 컴포넌트 만들기

1. 새로운 파일 만들기 src/Comment.js

2. 기본 형식 만들기

   import React from "react";
   class Comment extends React.Component{ 새로운 Component 만들기
     render(){     보여주는 곳
   }}
   export default Comment -> 다른곳에서 사용하겠다.

Props 보내기

App.js 에서
<Comment name={'hong'} content={'내용'}/> 으로 보내고

<div> {this.props.name}    </div>
<div> {this.props.content} </div> 로 사용가능

여러개 보내기(map 사용)

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>

CSS 분리

const styles = {
	1번 : { 
		width:'20%'..},
	2번 : {
	  height:20px..},
 ...}
<div style= {styles.1번}>