React 특징과 기초문법

React란?

React는 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리로 SPA(Single Page Application)를 만드는데 편리함을 제공합니다.

📃리액트의 특징

1. Component
   React는 여러 컴포넌트들을 조합해서 UI를 만듭니다. 쉽게 말하면 페이지를 구성하는 요소들을 각각 컴포넌트로 나눈 뒤 그것들을 합쳐서 하나의 페이지를 만든다고 할 수 있습니다.
   아래 보시는 것과 같이 하나의 페이지를 Header 컴포넌트, Content 컴포넌트, Footer 컴포넌트의 조합으로 만든 것을 볼 수 있습니다.
   (사실 App도 하나의 컴포넌트!
   즉, 컴포넌트끼리 조합해서 컴포넌트를 구성할 수 있음.)

function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

• 컴포넌트의 특징
  1) Component는 대문자로 시작한다.(HTML의 기본적인 태그와 구분)
  2) Class 컴포넌트와 Function 컴포넌트가 있지만 현재는 함수형 컴포넌트를 주로 사용.

2. Virtual DOM
   Virtual DOM이란, 말 그대로 가상의 DOM으로 React는 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 비교한 후 바뀐 부분만을 다시 그려줌으로써 최적화를 진행합니다.

3. Data Flow
   React는 단방향 데이터 흐름(부모 -> 자식)을 통해 안정적인 코드를 제공합니다.

4. JSX
   React에서는 JSX를 주로 사용하는데, HTML과 비슷하게 생겼지만 훨씬 편리하다. 특히 { }안에 JS표현식을 넣을 수 있다는 특징이 있다.

const name = "Bob"
const title = <h1>Hello, {name}</h1>; // Hello, Bob

• JSX의 특징
  1) { }안에 JS표현식을 넣을 수 있다.
  2) 닫는 태그가 필수이다.
  <input />, <Header></Header> 또는 <Header />
  3) 최상단의 element는 반드시 하나.
  <div> 또는 <React.Fragment>(=<></>)로 감싸줍니다.
  위의 컴포넌트 파트에서 작성한 코드에도 <div>태그로 묶여있는 것을 볼 수 있다.
  4) HTML의 class가 JSX에서는 className

  <div className="App"></div>

5. Props & State

• Props
  1) 기본적으로 컴포넌트에 원하는 값을 넘겨줄 때 사용
  2) 값은 변수, 함수, 객체 등 JS요소라면 제한이 없다.
  3) 컴포넌트의 재사용성을 위하여 사용
  4) props가 변경되면 해당 컴포넌트가 다시 렌더링됩니다.
  5) 읽기 전용이기 때문에 값을 임의로 변경해서는 안됩니다!
• State
  1) state는 컴포넌트 내에서 자주, 유동적으로 바뀌는 값을 저장
  2) state가 변경되면, 페이지 새로고침 없이 자동으로 렌더링됩니다.
  3) 직접 변경하게되면 React가 렌더링 타이밍을 알아차리지 못하기 때문에 set~~함수 등을 이용해 값을 변경해주어야합니다. 이 내용은 추후에 useState를 정리할 때 다시 알아보겠습니다!