지난 React Part1에서는 React 시작에 앞서, 용어정리와 기본 개념 및 기본 문법위주로 살펴보고 정리를 했다. 이번엔 Codesandbox에서 코드 위주로 React를 직접적으로 다뤄보려 한다.
JSX는 HTML태그의 외양으로 'return' 함수 부분의 소괄호에 실행시킬 명령을 적는다. 즉, 이렇게 정리할 수 있다.
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> );
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>
);
function App(props) {
return(
<div className='App'>
<h1>Hello, {props.name}</h1>
</div>
);
-위와 같은 함수를 Class로 표기하면,
Class App extends React.Component {
render() {
return(
<div className='App'>
<h1>Hello, {this.props.name}</h1>
</div>
};
);
Class 표기가 보기에도 참 불편하다. 그러나, 이에 익숙해져야만 한다. Function Component보다 많은 이점을 지니기에, 돌아갈 길이 없다. Class 문법을 정면 돌파해야한다!
그렇다면, Class Component 작성에는 어떠한 이점이 있는가?
state ?? 그게 뭔데? -> React내의 데이터 보관 옵션중 하나! (1.변수 2. state에 담아 보관한다.)
-> 즉, 데이터는 1. 변수에 넣거나 // 2. state에 넣거나!
// 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이다. 우리말로는 '구조분해' 라고 한다.