Elice) Component

 

Component

 

 1. Component 란?

- React에서 페이지를 구성하는 최소단위

- Component의 이름은 대문자로 시작

- Class Component / Function Component로 나뉨

 

const NewComponent = ({Test}) => {
	return <div style = {{
    padding : 10,
    color : "red"
    }}>
    {Test}
    </div>
    }
    
   // Tip : padding 등 style을 사용시에는 px를 생략 가능하다.
   // NewComponent의 object에 {Test}를 넣어서 사용
   
   
const Test = () => {
	return (
    <div>
    	<p>이건</p>
        <NewComponent>TEST</NewComponent>
        <p>입니다.</p>
    </div>
    )
   }

Component를 만든 후 다른 Component에서 자유롭게 활용 할 수 있다.

! Component의 이름은 항상 대문자로 시작한다.

 

 

 

---

 

 

 

2. Class Component와 Function Component

 

// Class Component

class Test extends Component {
	render () {
    const { name } = this.props
    return <div>{name}입니다.</div>
    }
   }
   
   
// Function Component

const Test = (props) => {
	const { name } = props
    return <div>{name}입니다.</div>
    }

 

초기의 React에서는 Component가 모두 Class Component였지만 현재는 Function Component가 주로 사용된다.

 

 

 

---

 

 

3. Component의 특징

 

<NewComponent user = {{ name : "동탁" }} color = "red">
	<div> 안녕 </div>
</NewComponent>

Component에서 Attribute에 해당하는 부분을 Props로 하고

컴포넌트안에 작성된 하위 Element를 children이라고 한다.

children도 결국에는 props중 하나이다.

 

 

const NewComponent = (props) => {
	const { user , color , children } = props
    
    return (
    <div style = {{ color }}>
    <p>{user.name}님의 하위 element는</p>
    {children} 입니다.
    </div>
    )
}

상위 Element로부터 전달받은 Props를 활용하는 코드이다.

 

이 컴포넌트의 자식 (children) 요소 역시 props 로부터 값을 받아오는 것을 볼 수 있다.