TIL # 34 (React intro)

1. Why react?

애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서 이전의 방법(DOM, jQuery)으로는 애플리케이션을 개발하고 코드를 유지 보수 하는 것이 어려워졌다. 규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리를 더욱 편리하게 하기 위해 다양한 Framework(Library)가 등장 했다.

2. Framework(Library)

:: Angular
구글에서 개발한 Framework. TypeScript 기반으로 안정적이며 다양한 기능이 내장되어 있지만 무겁고 배우기 어렵다.

::Vue
중국에서 개발한 Framework. 코드가 깔끔하고 배우기 쉽기 때문에 성장 속도가 빠르다.

::React
Facebook에서 개박한 Library. 내장되어 있는 기능이 부족해 third-party 라이브러리를 함께 사용한다. 지속적인 관리와 함께 생태계가 활성화 되어 있으며 다양한 자료로 인해 사용자가 꾸준히 증가한다.

3. What is React?

사용자 인터페이스 (UI)를 만들기 위한 JS 라이브러리이다. 가상 돔을 통해 UI를 빠르게 자동으로 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다.

4. Component의 정의

재활용 가능한 UI 구성 단위이며 코드 유지보수에 좋다. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)
예를 들어, westagram main 페이지를 컴포넌트로 나누면, 크게 nav, main, feed, mainright 컴포넌트로 나눌 수 있다.

5. Class vs. Functional 컴포넌트 🎈

1) Class 컴포넌트
render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환한다.

import React from 'react'

class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>This is Class Component!</h1>
       </div>
      )
  }
}

export default Component

2) Functional 컴포넌트
보기에 훨씬 간단하고 작성하기 편리하다.

import React from 'react'

const Component = () => {
  return (
    <div>
      <h1> This is Functional Component!</h1>
     </div>
    )
};

export default Component

6. JSX의 정의 (JS syntax extension)

리액트에서 사용하는 JS 확장 문법이다. JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하다.

7. JSX의 특징

• { ... javascript... }
• className
• Inline Styling : <div style={{color : "red"}}>Hello React</div>
• Self Closing tag : <div></div> vs. <div />
• 모든 요소를 감싸는 최상위 요소 (cf. React Fragments : <> ... </>)
  Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능. 요소들을 감싸는 div 태그의 불필요한 생성을 막을 수 있어 유용하게 사용된다.

<>
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>