JSX and Component
JSX: JavaScriptXML : JS에 XML을 추가한 확장형 문법.
JSX는 하나의 파일에 JavaScript와 HTML(XML에 포함)을 동시에 작성할 수 있어 편리하다.
render() {} 함수 내에 HTML처럼 작성하는데, JSX는 HTML이 아닌 XML의 문법을 따르므로, < />를 꼭 표시해 주어야 한다.
JSX와 기존 개발 방식의 차이
index.js 파일이 React로 서버를 구동했을 때, 가장 처음 실행된다. ReactDOM.render( document.getElementById('root'));
-> id가 root인 Element에 App 컴포넌트를 표시하는 코드이다,.
- getElementById: document에서 해당 id를 가진 Element를 찾아 변수로 반환하는 코드이다.
App Component를 사용하지 않을 경우 index.js파일에 모두 변수로 작성해서 append한 다음 넣어야 한다.
(App.js Component를 사용하지 않는 경우)
var img = document.createElement('img');
img.setAttribute('src', 'https://cdn.pixabay.com/photo/2021/10/07/15/12/wine-6688901_960_720.jpg')
var divEl = document.createElement('div');
divEl.innerText = '안녕하세요';
var welcomeEl = document.createElement('div');
welcomeEl.append(img);
welcomeEl.append(divEl);
var root = document.getElementById('root');
root.append(welcomeEl);
App.js를 사용할 경우
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
3개의 모듈을 기본적으로 import하면 된다.
React.createElement()함수에서는 리액트 함수를 JS의 document.createElement()함수로 변환하여 실행된다.
컴포넌트와 구성 요소
기존의 웹 프레임워크는 MVC 방식으로 관리
M: model(정보)
V: view(화면)
C: control(구동 담당)
각 요소의 의존성이 높아 재활용 어려움
컴포넌트: 뷰를 독립적으로 구성하여 재사용도 할 수 있고, 컴포넌트를 통해 새로운 컴포넌트를 만드는 것도 가능하다.
컴포넌트의 주요 구성 요소:
Property, State, Context
property: 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터
state: 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터
context: 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터이다.
프로퍼티: 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때, 사용한다.
property에 값을 전달할 때는, attribute형태로 전달하면 된다.
const name = this.props.name;(해당 attribute로 지정된 프로퍼티를 불러올 때 사용한다.)
단방향으로만 데이터가 흐르며, 읽기 전용이다는 것이 중요
프로퍼티에서는 js의 모든 자료형을 사용할 수 있다.
자료형을 미리 선언하면 값의 변화를 미리 감지할 수 있고, 개발자의 실수로 원하지 않는 자료형이나 지정되지 않은 자료형이 들어가는 오류를 방지할 수 있다.
'prop-types'모듈을 이용하여 프로퍼티의 자료형을 선언할 수 있다.
PropsComponent.propTypes = {
name = PropTypes.string,
};
프로퍼티에 값을 전달할 때는 문자열의 경우 큰따음표롤 사용하나, 문자열 이외의 값을 전달할 때에는 {}를 사용하여 전달한다.
{}의 이중 중괄호 시 혼동의 우려가 있으므로, 미리 변수에 선언하여 넣은 후 전달하는 것이 좋다.
property의 기본값을 지정할 때는 (클래스이름).defaultProps로 기본값을 지정할 수 있다.
property를 생략하면 undefined가 전달된다.
?조건문에서는 false와 undefined를 같은 것으로 인식하므로 혼동 방지를 위해 기본값 false를 확실히 지정해줄 필요가 있다.
