React의 기초

1. 라이브러리? 프레임워크?

Web Application을 위해 필요한 기능들에는 라우팅, 전역상태관리, API호출, 빌드시스템 등이 필요합니다.

대표적으로 앵귤러와 같은 Web Application Framework는 이러한 기술들을 내장하여 제공합니다.

하지만 리액트는 라이브러리 이기 때문에 이와 같은 기능들을 직접 구현하거나 구축 해야 합니다

대체적으로는

• 라우팅: react-router
• 전역상태관리
  • redux
  • recoil
  • redux-thunk
  • redux-saga
• API 호출
  • axios

장점: 각자 환경에 맞거나, 마음에 드는 라이브러리를 선택하여 시스템을 구축할 수 있다.
단점: 여러가지 라이브러리를 접하고 배워야해서 초기 진입 장벽이 있다.

React 는 쓰고 싶지만, 여러가지 라이브러리도 추가해서 쓰기 싫다면 React 를 Angular 등의 프레임위크와 함께 쓸 수도 있습니다.

2. 리액트 함수

React.createElement(component, props, ...children)

: reactElement를 반환해주는 함수.

1. component : 문자열 또는 리액트 컴포넌트

• 문자열일 때는 HTML 태그를 의미합니다. (ex)"div")
• 리액트 컴포넌트(FollowingButton)를 넣을 수도 있습니다.

2. props : component가 가질 수 있는 옵션

• 객체형식으로 넣습니다.
• ex) style, className

3. ...children component가 감싸고 있는 내부 컴포넌트

• ex) "following" 등의 텍스트
• 리액트컴포넌트 ex)FollowingButton
• React.createElement로 만든 컴포넌트

// React Component!
// Follow <-> following
function FollowButton() {
  return React.createElement("div", {}, "Follow");
}

//Dom컨테이너를 가지고 옵니다.
const domContainer = document.querySelector('#follow_button_container');

ReactDOM.render(React.createElement(FollowButton), domContainer);

ReactDOM.render()

reactElement를 루트의 DOM노드에 렌더링하기 위해 사용

---

CRA를 이용한 React

$ npx create-react-app my-app