[REACT.03] Component & Props

1. Component

: 작은 컴포넌트들이 모여 큰 컴포넌트를 만들고, 큰 컴포넌트들이 페이지들을 만든다. 

React component : function으로 생각하면 된다.

(Props) 속성들을 입력 받아, 그에 맞는 react element를 만든다.

 

 

2. Props (Property: 속성)

: React component의 속성을 의미한다. 
붕어빵틀에서 들어가는 재료

-> 컴포넌트에 전달할 다양한 정보를 담고 있는 js 객체

 

네개의 틀이 비슷하고, 형태가 비슷하지만 각각 다른 이미지와 텍스트를 사용한걸 보면, 각각의 props를 사용한 걸로 알 수 있다.

 

 

3. Property 특징 및 적용

특징: Read only -> 값을 변경 할 수 없다

//Pure Code
function sum(a,b){
	return a+b;
}

//Impure Code
function withdraw(account, amount){
	account.total -=amount;
}

- 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줘야한다!

 

4. Component 생성 & Rendering

function Welcome(props){
	return <h1> 앙뇽, {props.name}</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name = "Mink"/>
root.render(element);

1) <Welcome name="Mink" /> element로 root.render호촐
2)Reacts는 {name: 'Mink'}를 props로 하여 Welcome component를 호출
3) 

function Welcome(props){
	return <h1> 앙뇽, {props.name}</h1>
}

const element = <Welcome name = "Mink"/>
ReactDom.render(
	element,
	document.getElementById('root')
)