JS의 확장 문법인 JSX와 JS의 함수와 유사한 Component에 대해 공부한 내용을 정리해 보려고 한다!

📍 JSX

Java Script의 확장 문법으로 JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨(Babel)을 사용해 일반 자바스크립트 형태의 코드로 변환된다. JSX의 장점은 HTML태그를 그대로 사용하기 때문에 보기 쉽고 HTML태그를 사용하는 동시에 DOM, Event과 같은 자바스크립트도 JSX 안에서 동작하게 할 수 있다.

//App이라는 Component를 마치 HTML 태그 쓰듯이 그냥 작성함.
ReactDOM.render(<App />, document.getElementById('root'));

:: JSX 문법

1. 반드시 하나의 부모요소 감싼다.

이는 virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교하기 위해 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

❌ 틀린 작성법

import React from 'react';

function App() {
 return (
   <p>hello</p>
   <p>world</p>
 )
}

⭕️ 맞는 작성법

꼭 <div>를 쓰고 싶지 않다면 <fragment> 혹은 <>으로 표현 가능하다. 하지만 주로 <div>를 사용하고 className으로 해당 컴포넌트의 이름을 넣어 구분하기도 한다.

import React from 'react';

function App() {
 return (
   <div className="AppMain">  
     <p>hello</p>
     <p>world</p>
   </div>
 )
}

2. 변경되는 속성명에 주의한다.

JSX는 HTML태그 안에 JS 작성이 가능하기 때문에 혼동이 될 수 있는 요소의 속성명을 수정해 주어야 한다.

• class => className
  요소의 속성인 class와 컴포넌트를 생성하는 class를 혼동할 수 있어 수정한다.
• for => htmlFor
  반복문의 for와 <label>과<input>을 연결하는 for가 혼동될 수 있어 수정한다.

import React from 'react';

function App() {
 return (
   <div className="AppMain">  
     <p>hello, world!</p>
     <div>
       <label htmlFor="username">이름:</label>
       <input id="username" />
     </div>
   </div>
 )
}

3. 모든 태그는 꼭 닫아주어야 한다.

HTML 코드를 작성하다보면 <input>, <img> 등의 태그의 경우 닫지 않은 상태로 작성하기도 하지만 React에서는 이러한 태그도 self closing으로 모두 닫아주어야 한다. 단, 기존에 열고 닫는 태그가 모두 사용되는 태그의 경우도 self closing이 가능하다.

import React from 'react';

function App() {
 return (
   <div className="AppMain">  
     <p>hello, world!</p>
   	 <img alt="greeting" src="/images/main.jpg" />  // <img> 태그 self closing
     <div>
       <label htmlFor="username">이름:</label>
       <input id="username" />  // <input> 태그 self closing
     </div>
   </div>
 )
}

4. 자바스크립트 표현 시 {}를 사용한다.

import React from 'react';

function App() {
 const name ='신코딩';
 return (
   <div className="AppMain">  
     <h1>{name} 안녕!</h1>
   </div>
 )
}

5. 인라인 스타일링 시 카멜 표기법을 사용한다.

React에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣지 않고 객체 형태로 넣기 때문에 카멜 표기법으로 작성해야 한다.

import React from 'react';

function App() {
 return (
   <div
     style={{
       backgroundColor: 'yello';  // background-color => backgroundColor
       fontSize: '10px';  // font-Size => fontSize
       fontWeight: 'bold'  // font-weight => fontWeight
     }}
   >
     hello world!
   </div>
 )
}

📍 컴포넌트(Component)

Component는 재사용이 가능한 UI의 구성단위이다. 예를들어 HTML을 통해 페이지의 header-nav-section-aside-footer 등의 코드를 단일 파일에 작성했다면 Component는 그 구성을 하나하나 개별적으로 작성한 것이다. 하지만 Component 단순히 UI를 만들어 주는 것 뿐만 아니라 라이프사이클 API를 이용하여 컴포넌트가 화면에 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙이는 등 다양하게 활용이 가능하다.

:: 컴포넌트의 특징

• 재활용하여 사용할 수 있다.
• 코드 유지보수에 좋다.
• 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
• 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

:: 컴포넌트 선언 방식

컴포넌트 선언 방식에는 클래스형과 함수형 두 가지 방식이 있다.

🧷 클래스(class)형

• 반드시 render 함수가 있어야 한다.
• state와 라이프사이클 API의 사용이 가능하다.
• 내부에 임의 메서드 정의가 가능하다.

import React, { Component} from 'react'; 

class App extends Component {
  render() {
  const name = '신코딩';
  return <div className="myName">{name}</div>
  }
}

export defalut App;

🧷 함수(function)형

• 클래스형에 비해 선언하기 편하다.
• 메모리 자원도 덜 사용한다.
• state와 라이프사이클 API의 사용이 불가능하다.
  but, Hooks라는 기능이 도입되면서 유사한 방식으로 작업이 가능해졌다.

import React from 'react'; 

function App() {
  const name = '신코딩';
  return <div className="myName">{name}</div>
}

export defalut App;