1. React란?
React는 페이스북에서 개발하고 관리하는 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는데 쓰입니다. React는 가상 DOM(Virtual DOM)을 사용합니다. 이는 실제 DOM을 업데이트하는 대신, 바뀐 부분만 찾아 실제 DOM에 반영함으로써 빠른 렌더링 속도를 자랑하는 특징이 있습니다.
React의 기본 코드 구조
React의 기본적인 코드 구조는 아래와 같습니다.
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return (
Hello, world!
);
}
}
ReactDOM.render(
위의 코드는 가장 기본적인 React 컴포넌트를 생성하는 방법입니다. 여기서 `Hello`라는 컴포넌트를 만들고 있으며, 이 컴포넌트는 “Hello, world!”라는 문구를 화면에 출력합니다. `ReactDOM.render` 메서드는 우리가 작성한 컴포넌트를 페이지에 렌더링하는 역할을 합니다. 즉, ‘root’라는 id를 가진 HTML 요소 안에 ‘Hello’ 컴포넌트를 삽입하는 것입니다.
2. React 시작하기
React를 시작하기 전에 필요한 개발 환경 설정 및 도구에 대해서 알아보겠습니다. 주로 사용되는 개발 도구는 Node.js와 npm, 그리고 선택적으로 Yarn이 있습니다.
2.1. 개발 환경 설정
첫 번째로, Node.js와 npm을 설치해야 합니다. 먼저 Node.js 공식 웹사이트에 접속하여 다운로드 페이지에서 자신의 OS에 맞는 LTS 버전을 다운로드 받아 설치합니다.
2.2. React 설치 및 실행
개발 환경 설정이 끝났다면, 이제 React를 설치해보겠습니다. 터미널에 아래의 명령어를 입력하여 create-react-app을 설치합니다.
npm install -g create-react-app
위의 명령어를 성공적으로 실행했다면, 이제 React 프로젝트를 생성할 수 있습니다. 다음과 같이 명령어를 입력하여 React 프로젝트를 생성하고, 생성한 프로젝트로 디렉터리를 이동합니다.
npx create-react-app my-app
cd my-app
마지막으로 아래의 명령어를 실행하여 우리의 첫 React 애플리케이션을 실행해봅니다.
npm start
2.3. 개발 도구 활용하기
React를 개발하는 데 있어서 중요한 도구 중 하나가 바로 개발자 도구입니다. 이는 브라우저 기반의 개발 도구로, 특히 크롬의 개발자 도구는 React 개발에 효과적입니다. React Developer Tools라는 확장 프로그램을 설치하면, React 컴포넌트를 디버깅하거나 애플리케이션의 상태를 확인하는 등 다양한 기능을 활용할 수 있습니다.
3. JSX와 컴포넌트 이해하기
React에서는 JSX라는 문법을 사용하여 JavaScript 내에서 마크업 코드를 작성할 수 있습니다. JSX는 JavaScript XML의 약어로, HTML처럼 태그 형식으로 코드를 작성할 수 있게 해주는 React의 문법입니다.
JSX 기본 구조
JSX의 기본적인 구조는 아래와 같습니다.
const element = Hello, world!
;
여기서 element는 React element, 즉 렌더링 될 때 어떤 것들을 UI에 나타낼지를 정의하는 객체입니다. 위 예시에서는 h1 태그 안에 “Hello, world!”라는 텍스트를 렌더링하도록 설정했습니다.
컴포넌트 이해하기
React에서 가장 중요하게 다루는 개념 중 하나는 바로 컴포넌트입니다. 컴포넌트는 UI를 구성하는 개별적인 단위로, 재사용이 가능한 코드 블록입니다. 하나의 앱은 여러 개의 컴포넌트가 모여 만들어진 것이라고 할 수 있습니다. 아래는 컴포넌트를 작성하는 기본적인 방법입니다.
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
위의 코드에서는 “Welcome”이라는 컴포넌트를 만들고 있습니다. 이 컴포넌트는 화면에 “Hello, [props.name]”이라는 문구를 출력합니다. 여기서 props는 받아온 속성을 나타내며, `{this.props.name}`은 전달받은 props 중에 name을 표현하는 방법입니다.
4. React의 주요 개념
React를 사용하기 위해서는 몇 가지 주요 개념을 잘 이해하고 있어야 합니다. 여기서는 Virtual DOM과 실제 DOM에 대한 개념, State와 Props, 그리고 Life Cycle Method에 대해서 설명하겠습니다.
4.1. Virtual DOM과 실제 DOM
React의 핵심 특징 중 하나는 Virtual DOM을 사용한다는 것입니다. 원래의 DOM(Document Object Model)은 웹페이지를 구성하는 요소들을 표현하는 객체 모델입니다. HTML, XML 문서의 프로그래밍 interface로, 프로그램과 스크립트가 문서 구조, 스타일, 내용 등을 조작할 수 있게 해줍니다.
React는 이 DOM에 직접적으로 접근하여 변화를 주는 대신, 변화를 주고 싶은 요소가 있는 부분만을 Virtual DOM에서 먼저 업데이트하고, 이를 실제 DOM에 반영합니다. 이 덕분에 불필요한 업데이트 과정을 생략하고, 효율적으로 웹페이지를 렌더링할 수 있습니다.
4.2. State와 Props
React에서 데이터를 다루는 주요 방법은 State와 Props를 사용하는 것입니다. State는 컴포넌트 내부에서 선언하며, 내부에서 값을 변경할 수 있습니다. 반면, Props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로, 자식 컴포넌트에서는 Props를 받아오기만 하고 바꿀 수는 없습니다.
아래의 코드 예제를 보겠습니다.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {example: "Hello World"};
}
render() {
return {this.state.example}
;
}
}
위의 코드에서는 `state`를 사용하여 “Hello World”라는 값을 저장하고, 이를 화면에 출력하고 있습니다.
4.3. Life Cycle Method
React 컴포넌트는 여러 생명주기 메서드를 가지고 있습니다. 예를 들면, 새로운 컴포넌트가 하나의 DOM 위에 마운트될 때, 또는 업데이트되거나 제거될 때 실행되는 메서드들입니다. 이를 이해하는 것은 React 어플리케이션의 성능을 최적화하거나, 어플리케이션 간의 상태를 조정하는데 큰 도움이 됩니다.
Life Cycle Method의 예로는 `componentDidMount()`, `componentDidUpdate()`, `componentWillUnmount()` 등이 있습니다.
class Example extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate() {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return Hello world
;
}
}
위 코드에서 `componentDidMount()`은 컴포넌트가 마운트된 직후 즉, 출력물이 DOM에 나타난 직후에 실행됩니다. `componentDidUpdate()`는 업데이트가 일어난 직후에 실행됩니다. `componentWillUnmount()`는 컴포넌트가 마운트 해제되어 제거되기 직전에 실행됩니다.
5. React로 웹사이트 구축하기
React는 쉽고 효과적인 웹 사이트 구축을 가능하게 하는 프레임워크입니다. 이번 장에서는 React 설정 및 환경 구축법과 컴포넌트 생성 및 구조화에 대해 집중적으로 알아보겠습니다.
5.1. 초기 설정 및 환경 구축
먼저, 새로운 React 프로젝트를 시작하려면 Node.js가 설치되어 있어야 합니다. Node.js가 설치된 후에는 터미널을 열어 ‘create-react-app’을 이용하여 새 프로젝트를 생성할 수 있습니다.
npx create-react-app my-app
위의 코드를 실행하면 ‘my-app’이라는 이름의 새로운 React 애플리케이션을 생성합니다.
5.2. 컴포넌트 생성 및 구조화
React 애플리케이션은 여러 개의 컴포넌트로 구성됩니다. 컴포넌트는 UI의 독립적인, 재사용 가능한 부분을 나타냅니다.
예를 들어, 아래 코드는 ‘HelloWorld’라는 컴포넌트를 생성하는 코드입니다.
function HelloWorld() {
return Hello, world!
;
}
ReactDOM.render(‘HelloWorld’는 함수형 컴포넌트로, JSX를 반환하는 함수입니다. 이 컴포넌트는 ‘ReactDOM.render’함수를 통해 페이지에 렌더링하고 있습니다. ‘document.getElementById(‘root’)’는 index.html 파일 내에 렌더링할 위치를 지정합니다.
이처럼 한 애플리케이션은 여러 개의 컴포넌트를 포함하고, 각 컴포넌트는 다른 컴포넌트를 포함하거나, 또는 포함하고 있지 않을 수 있습니다. 이를 통해 애플리케이션 전체 아키텍처를 효과적으로 구조화할 수 있습니다.
6. React Router를 활용한 페이지 이동
React Router는 SPA(Single Page Application)에서 페이지를 라우팅할 수 있게 하는 라이브러리입니다. React Router를 사용하면 사용자가 서로 다른 페이지로 탐색할 수 있게 되며, 이는 각 페이지가 직접 렌더링 단계를 거치지 않고 즉시 교체되는 것처럼 보입니다.
React Router 설치
React Router는 별도의 라이브러리로 제공되기 때문에 우선 설치가 필요합니다. 설치는 npm 또는 yarn을 이용하여 다음과 같이 수행할 수 있습니다.
npm install react-router-dom
// or
yarn add react-router-dom
React Router 사용
React Router를 사용하기 위해서는 먼저 `BrowserRouter`를 import하고, 이를 최상위 컴포넌트로 감싸주어야 합니다. 그리고 각 라우트를 `Route` 컴포넌트를 이용해 정의해주면 됩니다. 예를 들면 아래와 같습니다.
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
);
}
export default App;
위 예제 코드에서는 두 개의 라우트를 정의하고 있습니다. 하나는 ‘/’경로에 대응하는 ‘Home’ 컴포넌트와, 또 다른 하나는 ‘/about’ 경로에 대응하는 ‘About’ 컴포넌트입니다. 이렇게 설정하면 사용자가 주소 창에 ‘/about’을 입력하면 ‘About’ 컴포넌트가 나타나게 됩니다. 함께 사용되는 `exact` 속성은 path가 완전히 일치할 때만 해당 컴포넌트를 렌더링하도록 제한하였습니다.
7. State 관리를 위한 Redux와 MobX 활용하기
React에서 state를 관리하는 사용례는 매우 다양합니다. 복잡한 애플리케이션에서는 종종 Redux나 MobX와 같은 상태 라이브러리를 사용하여 상태를 관리합니다. 이러한 라이브러리들은 복잡한 상황에서 상태를 보다 효과적으로 관리하게 도와줍니다.
Redux 활용하기
Redux는 JavaScript 애플리케이션에서 상태를 관리하기 위한 도구입니다. 이용자는 응용 프로그램의 상태를 업데이트하기 위해 “액션”을 Dispatch 하며, 상태 변경 로직은 중앙 집중화 된 store에서 제어됩니다.
아래 예제 코드는 Redux를 사용하는 간단한 카운터 애플리케이션을 보여줍니다.
import { createStore } from 'redux';
// 카운터라는 state의 기본 상태와 액션에 대한 리듀서 함수
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
default:
return state;
}
}
let store = createStore(counter); // Redux store 생성
store.subscribe(() => console.log(store.getState())); //상태 변경을 구독하고, 콘솔에 상태를 표시
store.dispatch({ type: 'INCREMENT' }); // 액션 호출
이 코드에서, `createStore` 함수를 사용하여 앱의 상태를 유지하는 Redux store를 생성합니다. `store.dispatch`는 액션을 실행하는데 사용되며, `store.subscribe`는 상태 변경에 반응하게 됩니다.
MobX 활용하기
MobX는 상태 변화를 자동으로 추적하고 관련된 코드를 업데이트하는 라이브러리입니다. Redux와 달리, MobX는 더 선언적인 코드를 작성 할 수 있도록 하며, boilerplate 코드가 덜 필요합니다.
아래 예제 코드는 간단한 MobX 카운터 애플리케이션을 보여줍니다.
import { observable, action } from 'mobx';
class CounterStore {
@observable counter = 0;
@action increment() {
this.counter++;
}
}
const store = new CounterStore();
// 반응 함수 생성
autorun(() => {
console.log(store.counter);
});
store.increment(); // 카운터 증가
이 코드에서, `@observable` 데코레이터를 사용하면 `counter` 상태를 관찰하게 됩니다. `@action` 데코레이터를 사용하여 상태를 변경하는 `increment` 메소드를 지정했습니다. `autorun` 함수는 상태가 변경될 때마다 자동으로 호출됩니다.
8. API 통신을 통한 데이터 호출과 화면 출력
React에서 API 통신을 이용해 데이터를 호출하고 화면에 그 결과를 출력하는 일은 매우 자주 발생하는 작업입니다. 이를 위해 많은 React 개발자들은 fetch API 혹은 axios와 같은 라이브러리를 이용합니다.
fetch API 사용 예시
fetch API는 브라우저에서 기본적으로 제공하는 API로, 비동기적으로 리소스를 가져오는데 이용됩니다.
import React, { useEffect, useState } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/items')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
{data && data.map((item, index) => (
{item.name}
))}
);
}
export default App;
위 코드에선, `useEffect` 훅 내에서 fetch API를 이용해 데이터를 호출하고, 그 결과를 React state에 저장하는 것을 보여줍니다. 그리고 React 컴포넌트 내에서 이 state를 이용해 화면에 데이터를 출력합니다.
axios 라이브러리 사용 예시
axios는 http 요청을 보낼 수 있는 인기 있는 라이브러리입니다. fetch API와는 달리, 자동으로 JSON 응답 데이터를 파싱해주며, 오류 처리를 더 쉽게 할 수 있습니다.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
axios.get('https://api.example.com/items')
.then(response => setData(response.data));
}, []);
return (
{data && data.map((item, index) => (
{item.name}
))}
);
}
export default App;
axios를 이용한 코드는 fetch API를 이용한 것과 대체로 유사합니다. `axios.get` 메소드를 이용해 API로부터 데이터를 가져와서 state에 저장하고, 그리고 이를 이용해 화면에 출력합니다.
9. React를 활용한 효율적인 프론트엔드 개발 방법
React는 컴포넌트 기반의 프론트엔드 라이브러리로서, 효율적이고 간단한 방법으로 사용자 인터페이스를 구축하는 데 사용됩니다. React가 제공하는 기능들을 적절히 활용하면 효율적인 프론트엔드 개발이 가능해집니다.
컴포넌트 재사용
React의 가장 큰 강점 중 하나는 컴포넌트 재사용이 가능하다는 것입니다. 동일한 구조를 가진 컴포넌트를 여러 번 사용해야 할 때, React 컴포넌트를 재사용함으로써 코드 중복을 줄일 수 있고, 유지보수가 용이해집니다.
import React from 'react';
// 컴포넌트 선언
function MyComponent({ text }) {
return {text};
}
// 컴포넌트 재사용
function App() {
return (
React Hook
React Hook는 함수형 컴포넌트에서 state와 lifecycle 메소드를 이용할 수 있게 해주는 기능입니다. Hook을 이용하면 클래스 컴포넌트를 사용하지 않아도 됩니다. 이는 코드 가독성을 높이고, 이해하고 사용하기 쉽게 만들어줍니다.
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
);
}
export default App;
위 코드는 `useState` Hook을 사용해 함수형 컴포넌트에서 상태 관리를 하는 것을 보여주고 있습니다. 사용자가 버튼을 클릭할 때마다 카운트가 증가하는 간단한 예시입니다.
10. 최종 웹사이트 디버깅 및 배포
웹사이트를 개발하고 난 후에는 프로덕션 환경으로 배포하기 전에 디버깅을 해서 에러를 찾고 수정하는 과정이 필요합니다. 또한, 웹사이트를 인터넷 상에 배포해 사용자들이 접할 수 있게 하는 작업도 필요합니다.
디버깅
디버깅은 코드에서 버그를 찾고 고치는 과정입니다. 브라우저에 내장되어 있는 개발자 도구를 이용하거나, 코드 에디터에서 제공하는 디버깅 도구를 이용할 수 있습니다. JavaScript에는 `console.log`와 같은 간단한 디버깅 도구가 내장되어 있습니다.
function exampleFunction() {
let a = 1;
let b = 2;
console.log('a:', a);
console.log('b:', b);
if (a + b !== 3) {
console.error('Something went wrong!');
}
}
exampleFunction();
배포
React 애플리케이션을 배포하기 위해서는 빌드 과정이 필요합니다. `npm run build`를 이용하면 최적화된 프로덕션 빌드를 생성할 수 있습니다. 그리고 이 빌드 결과를 웹 서버에 업로드하면 웹사이트를 인터넷에 배포한 것이 됩니다.
/*
터미널에서 아래 명령어를 입력하여 빌드를 생성합니다.
빌드 결과물은 프로젝트의 'build' 폴더에 저장됩니다.
*/
npm run build
빌드 결과물을 웹 서버에 업로드하는 방법은 서버의 종류와 설정에 따라 다르지만, FTP 클라이언트를 이용하거나 git 같은 버전 관리 시스템을 활용하는 일반적인 방법들이 있습니다.