[React] - 컴포넌트(props, propschildren)

컴포넌트

• 재사용이 가능한 구성요소
• 컴포넌트 결합해서 만들어지는 것 = React
• HTML + CSS + JS = React Component
• 복잡한 사용자 인터페이스를 관리하기 쉽도록 작게 분리해 UI 다른 위치에 사용할 수 있음

react에서 컴포넌트로 인식하기 위한 2가지 규칙

1. 함수의 제목은 대문자로 시작

2. 함수에서 렌더링 가능한 값 반환

 

컴포넌트 생성 및 활용

• 컴포넌트 정의

-js 함수 작성, 함수의 제목은 대문자

-새로 생성된 헤더 함수에 값이 반환되어야 함 -> 반환된 값, return (컴포넌트 통해 화면에 보여지는 내용)

function Content() {
	return (
		화면에 보여질 코드 (html)
	);
}

• 컴포넌트 사용 < >

function App() {
	return (
		<Content></Content>
	);
}

 

props

데이터 -> 컴포넌트 전달 -> 데이터 사용

-컴포넌트 설정하는 개념

 

• 커스텀 컴포넌트 + 커스텀 속성 

function Content(props) {
	return (
	<h1> {props.name} </h1>
        <p> {props.age} </p>
        <img src={props.img} alt={props.name}/>
	);
}

function App() {
	return (
	<Content name="paper" age={} img={}/>
        <Content/>
        <Content/>
	);
}

String value = "String"

Numver value = {20}

Array value = {{color: 'blue'}}

Object value = {['hamburger', 'pizza']}

 

 

-객체 구조 분해 문법

function Content({name, age, img}) {
	return (
	<h1> {name} </h1>
        <p> {age} </p>
        <img src={img} alt={name}/>
	);
}

 

 

* 별도의 컴포넌트는 별도의 파일에 각각 저장하는 것이 좋음

 

props.children

-컴포넌트 텍스트 사이 내용

<Button>Components</Button>

function Button({children}) {
	return <button>{children}</button>
}

<Button label="Components"></Button>

function Button({ label }) {
	return <button>{ label }</button>
}