[TIL][React] React 시작과 컴포넌트

리액트를 시작하였다.

리액트는 페이스북에서 만든 라이브러리 이며, 페이스북 및 인스타그램 등.. 요즈음 모던한 웹들의
프론트를 담당하는 사용자가 가장많은 웹 프레임워크이다.
이런 상투적인 말 및 기초 내용들은 공식문서에 아주 쉽고 자세하게 한국어로 설명되어있다!
https://ko.reactjs.org/ //----- React 공식문서

또다시 생소한 개념들로 머리가 가득차고, 이전에 익혔던 것들은 머리속에서 사라지기 시작한다..
대표적으로 클래스 및 함수를 이용한 컴포넌트 생성과 응용에 대해서는 어느정도 이해가 가지만
State 및 Lifecycle을 고려하는 부분에서 동맥경화가 시작되었다.

---

React 시작

리액트는 npm 으로 손쉽게 시작할 수 있다.

npx create-react-app my-app
cd my-app
npm start

해당 명령어를 입력하는것 만으로도 쉽게 react 개발 환경이 셋팅된다!
이외에도 yarn 을 통하여 시작하는 방법 등이 있으나, 가장 대중적인 방법으로 시작하였다.

---

React Component

리액트는 기본적으로 바닐라 자바스크립트 코드로도 개발이 가능하나, 가장 대중적이고 널리 쓰이는 방법은 JSX 문법을 사용하는 것이다!

JSX문법은 JS와 HTML을 합친것과 같은 형태를 취하는데, 가장 큰 이점은 각각을 컴포넌트화 하여 HTML 태그처럼 사용할 수 있으며, HTML 태그 안에 { }을 사용하여 JS 코드를 사용 가능하다.
ES6+ 문법이 거의 필수적으로 사용 됨으로 ES6+ 문법에 대하여 좀더 복습하고 확실하게 익히는 시간이 필요할것 같았다. Destructuring 및 rest parameter 등...

// 함수형 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 또는
let Welcome = () => <h1>Hello, {props.name}</h1>
.
.
.
// ES6 클래스형 컴포넌트 정의
class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

컴포넌트를 만드는 방법은 크게 함수형과 클래스형 두가지가 있는데, 이것을 처음 봤을 때 당연히 좀더 최신 문법으로 이루어지는 클래스형이 주를 이룰줄 알았다. 그러나 React Hook의 등장으로 가장 뜨고있는 방식은 함수형이다. 그렇다 해도 역시나 만연한 레거시 코드 덕분에 모든 방법을 알고 이해해야 할것같다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
// 또한 다음과 같이 컴포넌트 안에서 컴포넌트를 사용하는 것 또한 가능하며
// 이것이 리액트의 핵심 개념이다.