지난 React Part1에서는 React 시작에 앞서, 용어정리와 기본 개념 및 기본 문법위주로 살펴보고 정리를 했다. 이번엔 Codesandbox에서 코드 위주로 React를 직접적으로 다뤄보려 한다.

#3. JSX 문법이 적용된 코드

JSX는 HTML태그의 외양으로 'return' 함수 부분의 소괄호에 실행시킬 명령을 적는다. 즉, 이렇게 정리할 수 있다.

1. 함수 내의 'return()'에서 '()'안에 적는다.
2. 반드시 한개의 Element Tag에 적는다.

Ex.) div 태그 1개만을 사용하여 올바르게 작성한 예시

function App(props) {
	return(
    <div className='App'>
    <h1>Hello, {props.name}</h1>
    </div>
);

Ex.) div 태그 2개를 사용하여 잘못 작성한 예시

function App(props) {
	return(
    <div className='App'>
    <h1>Hello, {props.name}</h1>
    </div>
    <div className='App'>
    <h1>Hi, {props.name}</h1>
    </div>
);

3. 엘리먼트 태그 사이에 일반 텍스트를 쓰는 자리에, 중괄호 '{ }'를 사용하면 변수를 사용할수도 있다. (데이터 바인딩에 엄청난 효율을 지닌다.)

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = { //사용에 용이하게 변수지정
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}! // Hello, Harper Perez!가 출력될 것이다.
  </h1>
);

// 출력 담당 부: 'root'라는 이름의 id를 가진 엘리먼트를 render하겠다!
ReactDOM.render(
  element,
  document.getElementById('root')
);

여기서, 만약 위의 name이라는 변수가 서버에서 가져온 데이터라 가정해본다.

이는, document.getElementById().innerHTML = ''? 해가며 자바스크림트 데이터 바인딩 하던 방식에 비해 달랑 줄괄호 하나를 쓰는걸로 해결 가능하다. 옛 방식에 비해 엄~청난 효율을 지닐 수 있다.

function App(props) {
	return(
    <div className='App'>
    <h1>Hello, {props.name}</h1>
    </div>
);

#4. Function과 Class 문법 차이

1. Function Component

• 기본적인 우리가 그간 봐오던, 알던 문법이다.

function App(props) {
	return(
    <div className='App'>
    <h1>Hello, {props.name}</h1>
    </div>
);

2. Class Component

-위와 같은 함수를 Class로 표기하면,

Class App extends React.Component {
	render() {
    return(
    <div className='App'>
    <h1>Hello, {this.props.name}</h1>
    </div>
    };
);

Class 표기가 보기에도 참 불편하다. 그러나, 이에 익숙해져야만 한다. Function Component보다 많은 이점을 지니기에, 돌아갈 길이 없다. Class 문법을 정면 돌파해야한다!

그렇다면, Class Component 작성에는 어떠한 이점이 있는가?

#5. Class Component의 장점

1. Class Coponent는 stateful하다, -> state를 사용할 수 있다!
2. 함수 컴포넌트에서도 state를 사용할 수 있다!

state ?? 그게 뭔데? -> React내의 데이터 보관 옵션중 하나! (1.변수 2. state에 담아 보관한다.)

-> 즉, 데이터는 1. 변수에 넣거나 // 2. state에 넣거나!

3. 방법은?

// 1. 최상단 React, CSS 등 파일 연결부에
import React, {useState} from 'react'; //이 코드를 상단에 첨부하면 끝!
// 의미는 내장 함수를 하나 가져다 쓰겠습니다~ 하는 것

import React from 'react';
import './styles.css';

function App() {

	useState('Class Component의 장점'); // 2. 이렇게 State를 만들면 된다!
    
	let name = Velog;
	return(
    <div className='App'>
    <h1>Hello, {name}</h1>
    </div>
);

좀더 Specific하게는,

useState()를 실행하고 나면, Array, [a, b]가 생성된다.
a의 값은 중괄호, ('Class component의 장점')의 값이며, 
b의 값은 a값('Class component의 장점') state를 정정해주는 함수 이다.

그래서 중요하게, 선언과 더불어 배열에 담는다.

이렇게 말이다!

let [a,b] = useState('Class Component의 장점','Class Component의 장점을 수정하는 함수');

ES6의 신 문법중 하나인, destructuring이다. 우리말로는 '구조분해' 라고 한다.