React 기초 문법

→ JSX와 ES6 문법을 주로 사용

Component

: 사용자와의 인터렉션을 통해 비즈니스 로직을 실행하거나 시각적인 부분을 표현하는 UI(User Interface)를 적절하게 나눈 것

→ 속성들을 입력 받아 React Element를 생성하고 리턴해주는 역할

Props

: React Component의 속성
= Component에 전달할 정보를 담고 있는 JavaScript 객체

Element

: React 앱의 가장 작은 구성 요소
= HTML 요소를 기술한 JavaScript 객체

virtual DOM의 리액트 엘리먼트 =render=> Browser DOM의 엘리먼트

Component 종류

1. 함수 컴포넌트

import React from 'react';

function App() {
  return (
    <div>
      Hello React!
    </div>
  );
}
export default App;

2. 클래스 컴포넌트

import React from 'react';

class App extends React.Component{
  render() {
    return (
      <div>
        Hello React!
      </div>
    );
  }
}
export default App;

 

---

JSX

: JavaScript와 XML/HTML을 함께 사용할 수 있는 JavaScript 확장 문법

→ React Babel은 JSX 코드를 브라우저가 이해할 수 있도록 JavaScript의
    createElement()함수를 사용하는 코드로 변환

React Babel : JavaScript Compiler

// 개발자가 작성한 코드
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// Babel로 트랜스 파일된 코드
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 위 코드로 생성된 객체
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}

 

🪄 규칙 및 특징

1. Component 이름은 대문자로 시작
   (DOM 태그로 인식하지 않게 하기 위해)

2. 태그는 반드시 닫혀 있어야 함 (ex. <br/>)

3. 두 개 이상의 태그(컴포넌트)는 하나의 태그로 감싸져 있어야 함
   (Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록)

   → 그럼에도 복수의 엘리먼트를 리턴할 경우 (무분멸한 div 태그 사용 막기 위해)

   • 자식 요소에 key 속성과 고유값 지정하기
   • <React.Fragment> 또는 축약 버전 <>을 사용하여 감싸주기
     (Fragment 컴포넌트는 실제 DOM엘리먼트로 생성되지 않음)

4. 중괄호{ }를 사용하여 JS 코드 삽입

5. Props에 값을 넣을 때도 중괄호 사용 (문자열은 상관없음)

6. React DOM 엘리먼트에서는 기존 HTML 속성이 아닌 camelCase로 작성된 속성명을 사용 (ex. class → className)

7. 인라인 스타일링의 경우 style 속성 안에 직접 CSS를 포함할 수 없으므로, 스타일 정보를 담은 객체를 참조함

8. return문 내 JSX에서 if문 사용 불가하므로 아래의 조건부 렌더링 사용

   • 삼항 연산자 {조건식 ? (참일 때):(거짓일 때)}
   • AND 연산자 {조건식 && 참일 때 렌더링할 코드}
   • OR 연산자 {변수 || undefined나 null일 때 대신할 값}

import "./App.css";

function App() {
  const hello = "안녕!";
  const element = <h1>{hello}</h1>

  return (
    <>
      {element}

      {/* comment */}

      <div style={{color:'blue'}}>inline</div>

      <div className='Mycolor'>external</div>
    </>
  );
}
export default App;

 

---

ES6 (ECMAScript6)

: 정보통신 표준화 기구인 European Computer Manufactures Association International이 발표한 JavaScript 표준의 6번째 버전

🪄 주요 문법

1. 화살표 함수 (Arrow function)
   : 기존 함수보다 간단하고 유연하게 사용 가능

   • function, return 키워드 없이 함수 정의 가능
     (객체를 반환할 경우 return 생략 불가)

   • 매개변수 혹은 리턴식이 하나일 경우 해당 괄호 생략 가능

   • 기본 매개변수(Default Parameter) 설정 가능

   • this 키워드는 함수를 호출한 객체를 의미
     (기존 함수에서는 바인딩하는 객체를 의미)

      

const ArrowFunc1 = x => console.log(x);

const ArrowFunc2 = (props = "props") => {
  return (
    <div>
      Hello React!
    </div>
  );
}

// 화살표 함수에서의 this === 호출한 객체
const obj1 = {
  a : () => {
    console.log(this);			// window
  }
};
obj1.a();

// 기존 함수에서의 this === 바인딩하는 객체
const obj2 = {
  a : function () {
      console.log(this);		// {a: f}

      const b = function() {
        console.log(this);		// window
        // 바인딩할 대상이 없으니 자동으로 전역객체를 바인딩
      };
      b();
  }
};
obj2.a();

2. 비구조화 할당
   : 객체의 속성값을 변수에 쉽게 할당 가능

const obj = {
  a : 1,
  b : 2,
  c : 3
};

const {a, b, c} = obj;		// 비구조화 할당

console.log(a, b, c);		// 1 2 3