Rendering

html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다.

첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Component와 Props

component(컴포넌트)란 재사용 가능한 UI단위이다.

Component만들기
React는 Component를 만들고 관리하기 정말 좋은 라이브러리 입니다.

Component 사용
위처럼 정의한 컴포넌트는 함수/class 이름으로 사용할 수 있다.
태그처럼 으로 작성한다.

state
state란 말 그대로 컴포넌트의 상태 값입니다.

state와 props는 둘 다 object이고,
화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.

props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(parameter 처럼),
state는 컴포넌트 내에서 정의하고 사용한다.