React의 정의와 특징
1. React의 정의
- 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
- 리액트를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해준다.
- 이로 인해 우리는 데이터 기반의 선언적 개발이 가능해지며, 자동으로 UI를 업데이트하는 과정에서 Virtual DOM(가상 돔) 을 통해 최적화된 업데이트를 할 수 있다.
- 또한 Component(컴포넌트) 기반의 개발을 통해 복잡한 UI를 효과적으로 구성할 수 있으며 JSX 문법으로 컴포넌트를 편리하게 작성할 수 있다.
2. React의 특징
개발을 선언적으로 할 수 있게 해줄수 있는데, 아래 이미지와 같이 형태만 선언 해주면 된다.
2-1. Virtual DOM
이전 UI 상태를 메모리에 유지하는 가상 DOM을 통해 변경될 UI의 최소 집합을 계산하여 DOM 처리 횟수를 최소화하고 효율적으로 진행한다.
2-2 컴포넌트
독립적이고, 재사용할 수 있는 소프트웨어 구성요소로서, UI를 여러 조각으로 나누고, 각 조각을 개별적으로 사용할 수 있다.
2-2-1 특징
-
필요한 곳에서 재사용할 수 있다.
함수도 기능이 독립적이고 한번 선언해두면 필요할 때마다 호출하면서 재사용할 수 있듯이, 컴포넌트도 함수처럼 필요한 곳에 가져와서 사용할 수 있다. -
독립적으로 사용할 수 있기 때문에 코드의 유지보수에 좋다.
-
컴포넌트는 또 다른 컴포넌트(부모 컴포넌트 - 자식 컴포넌트)를 포함하여 구성할 수 있다.
-
해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다.
2-2-2 컴포넌트의 사용
리액트는 소문자로 시작하는 요소를 HTML 태그로 인식하기 때문에 컴포넌트명은 항상 첫 글자가 대문자가 되도록 작 성해야 한다. 예를 들어 <div/>는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타낸다. 선언한 컴포넌트는 다른 곳에서 import하여 사용할 수 있다.
// src/pages/Curriculum/Curriculum.js
import GNB from '../components/GNB/GNB';
import LNB from './LNB/LNB';
import Session from './Session/Session'; // 아래 Session컴포넌트를 import해서 사용
const Curriculum = () => {
return (
<>
<GNB />
<div className="curriculum">
<LNB />
<Session /> //컴포넌트이기 때문에 대문자로 작성
</div>
</>
);
};
export default Curriculum;
// src/pages/Curriculum/Session/Session.js
import SessionTitle from './SessionTitle/SessionTitle';
import SessionContent from './SessionContent/SessionContent';
const Session = () => {
return (
<>
<SessionTitle />
<SessionContent />
</>
);
};
export default Session;2-3 JSX
JSX는 HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한 문법이다.
2-3-1 JSX의 특징
JSX는 HTML 태그와 유사한 형태로 사용하기 때문에 보기 쉽고 익숙하다. 또한, 별도의 .html, .js 파일이 아닌 하나의 자바스크립트 파일에서 HTML 마크업과 자바스크립트 로직을 동시에 작성할 수 있기 때문에 편리하다.
2-3-2 JSX 문법
1). JSX element
JSX 문법을 통해 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성할 수 있다. 아래 예시처럼 변수에 저장할 수도 있고, 함수의 인자로 넘길 수도 있다.
const hi = <p>Hi</p>;2). Javascript 표현식
JSX 내부에서 자바스크립트 값을 출력하고 싶다면, { ... JavaScript... } 와 같이 { } 안에 유효한 자바스크립트 표현식을 작성할 수 있다.
// Greetings.js
import React from 'react';
const Greetings = () => {
const name = '김개발';
return <h1>{name}님, Welcome to Wecode!</h1>;
};
export default Greetings;3). JSX attribute
태그의 attribute name(속성명)은 camelCase로 작성해야 한다. 또, attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있으니 React 공식문서를 참고. 예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다.
/* HTML
<h1 class="greetings">Welcome to Wecode!</h1>
/* JSX
<h1 className="greetings"> Welcome to Wecode!</h1>4). Event 처리하기
JSX에서는, 태그를 작성할 때 직접 이벤트와 이벤트 핸들러(Event Handler)를 부여할 수 있다.
// JS
const title = document.getElementsByClassName("title")[0];
title.addEventListener("click", handleClick);
// JSX
<h1 className="title" onClick={handleClick}>
// 이벤트 앞에 on을 붙여 camelCase로 작성, 문자열이 아닌 함수로 이벤트 핸들러를 전달
Welcome to Wecode!
</h1>5). Inline Styling
style 속성은 HTML에서 문자열로 받는 것과 달리 camelCase를 요소로 가지는 자바스크립트 객체를 받는다. 그렇기 때문에 아래처럼 중괄호를 두 번 겹쳐서 쓰는 형태로 사용한다.
//HTML
<h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>
//JSX
<h1 style={{color: "red", backgroundImage: "yellow"}}>
//바깥의 { }는 JSX 문법을 의미하며 안쪽의 { }는 자바스크립트 객체를 의미
Welcome to Wecode!
</h1>**참고사항
style 속성을 사용하는 inline styling은 css보다 성능이 낮고 우선순위가 높기 때문에, 동적으로 계산하여 스타일링하는 경우 이외에는 사용을 지양하는 것이 좋다.
6). Self-Closing Tag
<img>와 같이 하나의 태그가 요소인 경우, 기존 HTML은 /으로 끝내지 않아도 되지만 JSX에서는 <img />와 같이 항상 /으로 끝내줘야 한다. <div />와 <div></div>는 같은 표현이다.
7). Nested JSX
반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다.
//Bad
const Greetings = () => {
return(
<h1>김개발님!</h1>
<h2>환영합니다!</h2>
//h1 태그와 h2 태그를 감싸고 있는 태그가 없기 때문에 에러가 발생
);
}
//Good
const Greetings = () =>{
return(
<div>
<h1>김개발님!</h1>
<h2>환영합니다!</h2>
</div>
);
}8). React.Fragment
위에 내용에서 최상위를 감싸고 있는 태그에 특별한 의미나 스타일이 없다면 불필요한 요소를 생성하게 된다. 이 때 사용되는 것이 <React.Fragment>이다. Fragment는 추가적인 DOM element를 생성하지 않고 하나의 컴포넌트 안에 여러 요소(자식)를 간단하게 그룹화할 수 있는 기능이다.
사용되지 않는 <div>를 쓰는 이유는 리액트에서 정의한 render() 함수는 반환 값의 루트 요소는 하나만 정의되어야 하기 때문이다.
const Greetings = () => {
return (
<React.Fragment>
<h1>김개발님!</h1>
<h2>환영합니다!</h2>
</React.Fragment>
);
};
// 축약형인 <> ... </> 문법으로도 동일하게 사용할 수 있다.
const Greetings = () => {
return (
<>
<h1>김개발님!</h1>
<h2>환영합니다!</h2>
</>
);
};