[React] 컴포넌트(Component)

리액트는 컴포넌트(component)를 중심으로 움직인다.
컴포넌트 만들고 컴포넌트가 데이터를 보여준다.

What is component?

- HTML 을 반환하는 함수!
- "App"이라는 함수가 있으면 <App />로 사용한다.
- 이걸 JSX라고 하는데 react에서만 사용한다.

Component 특징

- Index.js에서는 하나의 component(App)만 render할 수 있게 한다.
- 다른 js 파일에서 component import하는 것은 아무 문제 없음.

Props(Properties)

function Hello(props){ return <h1>Hello World</h1>; } function App(){ return ( <div> <Hello name="first"/> </div> ); } 

이런 식으로 Hello Component 안에 name="first"처럼 있는 것을 "kimchi"라는 value로 prop name을 주었다고 표현.
name 말고 원하는 props를 정의할 수도 있다.
그러면 Hello가 props를 받는다.

Prop 받는 방법(in function argument)

- props
- props.name
- {name}