HTML 요소를 반환하는 함수나 클래스와 같다고 생각해도 된다. 따라서, 컴포넌트는 독립적이고, 재사용 가능한 코드의 조각이다.
컴포넌트의 종류로는, 1. 함수형 컴포넌트, 2. 클래스형 컴포넌트가 있다.
💡 함수형 컴포넌트
간단한 예로, 함수형 컴포넌트 형태를 보자.
function Introduce() {
return <h2>Hi, I am elice!</h2>;
}
ReactDOM.render(<Introduce />, document.getElementById('root'));
💡 클래스형 컴포넌트
함수형 컴포넌트와 비교했을 때, 약간 구조만 다른 정도다. 다만, class 선언 시, React.Component의 메소드들을 사용하기 위해, extends를 이용해, React.Component를 상속 render( ) 함수안에, 반환 할, HTML 요소를 return 으로 반환 간단한 예로, 클래스형 컴포넌트 형태를 보자.
class Introduce extends React.Component {
render() {
return <h2>Hi, I am elice!</h2>;
}
}
ReactDOM.render(<Introduce />, document.getElementById('root'));
💡 이 둘은 각각, 언제 사용하는가 ?
함수형 컴포넌트
단순히 HTML UI를 반환하는 간단한 자바스크립트 함수로 자주 사용한다.
단순히, 데이터를 받고, 렌더링 하면 끝이지 때문에, 비상태형 컴포넌트라고도 한다.
클래스 컴포넌트
클래스 컴포넌트는, "상태(State)"를 구현할 때 사용한다.
여기서, "상태(State)"란, React의 State를 의미하며, 쉽게 말하면, 컴포넌트의 현재 저장된 값
이런, "상타(State)"를 가지는, 클래스 컴포넌트를, 다른 말로, 상태형 컴포넌트라고도 한다.
HTML을 반환하는 render( ) 메소드가 구현되어, 복잡한 UI 로직을 구현할 때 클래스형 컴포넌트를 사용한다.
특히, State를 사용할 때, 반드시(?) 클래스형 컴포넌트로 구현이 되어야 한다.
그러나, 기술이 발달 되면서, 이제는, 사실, 클래스 컴포넌트에서만, 다룰 수 있던, 컴포넌트의 상태(State)를, 함수형 컴포넌트에서도 다룰 수 있게 되었고, 그러한 기술을 우리는, "훅(hook)" 이라고한다.
이것은, 뒤에서 설명하려고 한다. ( 아주 중요하기 때문 ! )
그리고, 요즘은 사실, 클래스형 컴포넌트보단, hook을 이용한, 함수형 컴포넌트로 React를 구현하는 것이 추세라고 한다.
JSX는 자바스크립트 XML의 약자. 즉, JSX는 자바스크립트를 확장한 문법이며, 그런 만큼, 자바스크립트와 사용법이 많이 비슷하다. HTML을 React에서 쉽게 쓰기 위해 사용한다.
React는 JSX 문법을 이용해 마크업 언어와 코드의 로직을 따로 분리하지 않고, 두 가지를 포함한 "컴포넌트"를 사용
💡 표현식
JSX에서는 "중괄호( { } )"를 이용해, 사용 가능한 표현식들이 있다.
먼저, 중괄호를 이용해, HTML 내에 변수를 표현할 수 있다.
const name = 'elice';
const element = <h1> Hello, {name}! </h1>;
중괄호를 이용해, 함수 표현식을 넣는 것도 가능하다.
function greeting(){
return "Hello, elice!";
}
const element = <h1>{greeting()}</h1>;
함수 내에서 표현식을 적용할 수도 있다.
function formatGreeting(name){
return "Hello" + ' ' + name;
}
function getGreeting(user) {
return <h1>Hello, {formatGreeting("elice!")}!</h1>;
}
💡 속성
큰 따옴표를 이용해 JSX의 속성을 지정할 수 있다.
const element = <a href = "https://kdt.elice.io/explore">엘리스로 이동</a>;
💡 자식 정의
자식 태그가 여러개 포함된 코드를 저장하기 위해서는, 자식 태그를 부모 태그로 감싸야 한다.
const element = (
<div>
<h1>Hello,</h1>
<h2>elice!</h2>
</div>
);
// <div> = 부모 태그
// <h1>,<h2> = 자식 태그
모든 태그는 반드시 닫혀야 한다. 다만, 원래 태그 이름을 맞춰서 </input> 처럼 닫아야 하지만 이름은 생략하고 />만 이용해서 닫아도 괜찮다.
const element = <input type="text" />;
💡 객체 표현
React.createElement( ) 메소드를 이용하면, JSX 문법을 이용하지 않고, 객체로 표현할 수 있다. 두 코드는 문법이 다르지만, 같은 내용을 담고 있다.
HTML 직접생성
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
React.createElement( ) 로 생성
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
📝 엘리먼트 렌더링
Element ( 엘리먼트 ) : React 앱의 가장 작은 단위, 컴포넌트(Component의 구성요소)
쉽게 말하면, HTML 요소라고 할 수 있다.
Rendering( 렌더링 ) : 이러한 element를 화면에 그리는 것
💡 ReactDOM과 렌더링
React는 가상(Virutal) DOM과 실제로, 표시되는 DOM을 유지한다.
React는 실제 DOM을 추상화하여, 가상 DOM에 만들어두고, 데이터가 업데이트되면 한 번에 렌더링한다.
결과적으로, 계속해서 DOM을 렌더링하는 것보다 속도가 빠르다.
ReactDOM.render( ) : 렌더링 함수
HTML 파일 안에 Id가 root인 요소가 있다고 해보자.
<div id="root"></div>
해당 HTML에 텍스트를 넣기 위해, ReactDOM.render( )을 이용해, 다음과 같이 렌더링 한다.
const element = <h1>Hello, elice</h1>;
ReactDOM.render(element, document.getElementById('root'));
// ReactDOM에 렌더링 할꺼다. element를, id = root 인 요소에다가 ~
💡 엘리먼트 업데이트
엘리먼트는 한 번 생성되면, 수정이 불가능한 불변 객체이다.
값을 변경하고 싶으면, 새로운 엘리먼트를 만들어 업데이트 해야 한다.
만약, 시간을 출력하는 기능을 구현하고 싶다면, 매 초마다 렌더링을 해줘야 할 것이다.
function tick() {
const element = (
<div>
<h1>{new Date().toLocaleTimeString()}</h1>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Date 객체의 toLocaleTimeString( ) 메소드를 이용하면, 시간을 반환해주는데, 실제로 시간이 변하는 것을 확인하기 위해서는 setInterval( ) 콜백을 이용해 tick을 계속 호출해야한다. setInterval( )의 매개변수인 1000은 1초를 의미한다.
/*
다음은 GroceryList 라는 컴포넌트는
이후 React DOM 라이브러리에 의해 "랜더링(Rendering)"되어 화면에 출력될 수 있다.
*/
function GroceryList(props) {
return (
<div>
<h1>Grocery List</h1>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
</div>
)
};
💡 앱에서 기능이 분할되는 방식
JS는 앱의 기능 또는 UI의 요소를 분할하는 방법에 대한 특별한 요구사항이 없다. 기본적인 출력은 HTML 파일에 정의한다.
그런 다음, 리스너 내부에서, 먼저 이전과 동일한 방법을 사용하여, 입력 상자의 값을 가져올 수 있을 것이다. 그런 다음, 식료품 목록에 새 항목을 추가하려면, DOM에서 목록을 찾고, 추가 할 새 항목을 만든 다음, 마지막으로 목록 끝에 추가해야 할 것이다. ( 이렇게만 봐도, 상당히 복잡함을 알 수 있다. )
강력한 MVC 웹 프레임워크들이 등장하고 발전하면서 우리는 빠르고 편리하게 웹사이트를 개발할 수 있게 되었습니다.
하지만 기술이 발달해서 어떤 필요를 충족하고 나면, 항상 또 다른 수요와 해결과제가 생기게 되죠 ?
기존 MVC 웹이 가졌던 아쉬움들 중에서 2가지 예시를 보면
1. 오래된 웹사이트일수록, 이것저것 많이 있는 웹사이트에서 한 게시글을 읽고, 내용이 마음에 들어 "좋아요"를 눌렀다.
👉 이거 하나 눌러서, 전체 좋아요 수가 증가하는 것을 업데이트하려고, 화면이 "깜빡"하면서 페이지가 새로 로딩된다.
게시물 페이지 접근시
게시물 페이지에 좋아요를 반영한 경우
좋아요를 눌렀을 경우, 위에 두 그림같은 과정이 매번 좋아요 버튼을 누를경우 반복될 것입니다.
바뀐건 좋아요 하나뿐인데, 위에 모든 작업을 매번 새로하다보니, 굉장히 비효율적이지요.
사이트에 로드할 정보들이나 이미지가 많으면, 데이터 낭비도 심할 것입니다.
결과적으로, 이건 옛날 방식 !
2. 옛날에는, PC용 웹사이트 하나만 만들면 되었지만, 요즘같은 모바일 시대에서는, 앱이나 스마트폰 브라우저로 서비스들을 이용하면서, 이제는 어느정도 갖춰진 사업을 하는 회사에서는, PC용 웹사이트, 모바일용 사이트,안드로이드,ios 서버까지 개발하게 되었습니다.
👉 반응형 웹사이트를 만든것이 아니라는 전제하에, PC나 모바일 페이지에 접속하는 방식은 위 그림과 비슷한 과정을 보이며, 안드로이드나 ios에서는 자체적인 OS환경에서 페이지가 로딩되도록, 따로 프로그래밍을 해야합니다.
사이트 하나만 만들면 되던 예전보다, 개발 인력이 배로 들것입니다.
여기서, 겹치는 부분을 최소화하고, 업무를 좀 더 깔끔하게 분할할 수는 없을까요 ?
예를들어, 안드로이드와 ios에는 자체적인 SW와 시스템이 있어서, 서버로부터 데이터만 전송받으면 화면이 보여질 수 있으니, 웹에서도 그게 가능하다면, 즉 서버에서 데이터만 보내줘도, 그걸 서버가 아닌"사용자의 브라우저"에서 HTML/CSS/JS로 렌더링해낼 수 있다면, 서버는 어디서 정보를 요청하든, 동일한 작업을 수행해서 데이터만 전송하면 될 것 입니다.
사용자 컴퓨터의 브라우저에서 돌아가는 👉 프론트엔트(Front_End) 서버에서 돌아가는 👉 백앤드(Back_End)
로 철저하게 분리하는 것이지요.
📢 Angular, React, Vue 는 SPA Framework
브라우저에서도 동작하는 "JavaScript" 로 강력한 라이브러리나 프레임워크를 만든 것이 바로
👉 Angular, React, Vue 같은 "SPA 프레임워크" 입니다.
SPA = Single Page Application 이라고 하는데요.
비유를 하면, 종업원들이 고기와 쌈재료를 가져다주면, 주방장이 아닌, 손님이 직접 불판에 구워먹는 고기집이라고 생각하면 됩니다.
게시물 페이지 SPA 방식
이렇게 되면 사이트에서 뭘 할 때마다 새로 접속하지 않고, 한 번 로드된 화면에서 많은 기능을 수행 할 수 있게 됩니다.
그래서 Single Page Application, SPA 라고 불리는 것입니다.
📢 마무리
왼쪽에서부터 React / Angular / Vue
Angular, React, Vue 에 대한 자세한 설명까지하는것은 이 글의 취지는 아니어서 생략하겠습니다.
다만, 대표적인 이 3가지의 SPA 프레임워크는 방식들은 조금씩 다르지만, 기본 원리와 아이디어는 유사합니다.
특징만 간단히 말하자면
Vue : 코드가 깔끔하고 배우기 쉽다. Angular, React에 비해 후발주자지만 빠르게 성장하고 있습니다.
React : Facebook에서 만들었는데, 막강한 커뮤니티와 자료들을 갖추고 있습니다. 다른 서비스에 잘 녹아들어 유연함을 요하는 서비스들에 권장됩니다.
Angular : Google에서 만들었고, TypeScript라는, JavaScript를 보완한 언어로, 매우 안정적이고 탄탄한 프론트엔드 앱을 만들 수 있다고 합니다. 대신 상대적으로 무겁고 배우기 어렵다고 하네요.
