리액트는 컴포넌트들을 사용하는 라이브러리이다.
데이터가 업데이트되면 Re-render 된다.
컴포넌트란, 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 한다.
LifeCycle
을 통해 컴포넌트에 이벤트를 발생시키는 작업들을 수행할 수도 있다.
State
, LifeCycle
기능 사용이 가능하다.render
안에서 JSX
을 반환하여 보여준다.함수형 컴포넌트는 State
, LifeCycle
대신 Hooks
를 사용하여 선언한다.
일반 함수형과, 화살표 함수형을 사용하여 선언할 수 있다.
index.js
ReactDom.render(
<App />,
document.getElementById('root)
);
ReactDom
이라는 라이브러리를 사용해서 root
라는 아이디를 가진 엘리먼트와 App
이라는 최상위 컴포넌트를 연결해주는 작업을 한다.
컴포넌트의 생명주기.
컴포넌트가 실행되거나 업데이트 되거나 제거될때 특정한 이벤트가 발생하는것을 말한다.
Constructor
→ Render
→ ComponentDidMount
→ ComponentDidUpdata
→ ComponentWillIUnmount
컴포넌트가 새로 그려질때 위의 순서로 렌더링된다.
개별 컴포넌트는 props
라는 매개변수를 받아오고 render함수를 통해 표시할
뷰 계층 구조(화면에 보이는 UI)를 반환한다.
import React from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
color: 'red'
};
}
render() {
return (
<div>
<h1>Class Component | State</h1>
</div>
);
}
}
export default State;
state
오브젝트.state
라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render
함수를 호출한다.state
와는 다르게, props
은 컴포넌트 외부에서 데이터를 제공받는다.흐름 파악하기
상위 컴포넌트 → props
→ 하위 컴포넌트하위 컴포넌트 → 이벤트 실행 → 상위 컴포넌트의 state
호출 → state
값 수정