프론트엔드 핵심 스킬은 React
“프론트엔드 개발자가 되기 위해서 익혀야 할 기술 스택 1순위는 React 입니다.“
React는 현존하는 JavaScript UI 라이브러리 중에서 가장 많이 사용하고 있습니다. 이미 현업에서 React는 중요한 기술 스택 중 하나로 자리 잡았으며 온라인상에 풍부한 자료와 예제 코드, 질문과 답변을 찾아보기 편리합니다. React는 아래와 같은 주요 특징을 가지고 있으며, 현대적이고 강력한 사용자 경험(UX)을 제공하는 접근성 높은 JavaScript 라이브러리로 자리 잡고 있습니다.
- 💡여기서 잠깐! 라이브러리란?💡
라이브러리란
코딩/프로그래밍에서 말하는 ‘라이브러리’는 말 그대로 도서관처럼 미리 지식/기능들을 모아둔 집합소에서 필요할 때마다 기록된 코드를 가져와서 재사용 할 수 있도록 만들어진 것을 말합니다.라이브러리를 사용하는 이유
- 코드 재사용성: 라이브러리를 사용하면 기능을 반복해서 구현할 필요 없이 기존에 작성된 코드를 활용할 수 있습니다. 이로써 개발 시간을 단축하고 코드의 일관성과 안정성을 유지할 수 있습니다.
- 성능: 잘 개발된 라이브러리는 최적화되어 있어서 일반적으로 더 빠른 실행 속도와 효율적인 자원 사용을 제공합니다. 이는 개발자가 개별적으로 구현하는 것보다 더 좋은 성능을 보장할 수 있습니다.
- 업데이트 및 유지 보수: 라이브러리는 개발자들에 의해 지속적으로 업데이트되며 유지 보수가 이루어집니다. 이는 새로운 기능 추가, 버그 수정, 보안 강화 등의 이점을 가져다 줍니다.
- 표준화: 많은 라이브러리는 업계 표준을 따르고 있습니다. 이는 코드의 일관성을 유지하고, 다른 개발자들과의 협업을 더욱 쉽게 만들어줍니다.
Q. 주로 사용하는 웹 프레임워크 또는 라이브러리는 무엇인가요? (직무별응답/프론트엔드)
출처: 프로그래머스(https://programmers.co.kr/pages/2023-dev-survey)
프로그래머스에서 진행한 “2023 프로그래머스 개발자 설문조사 리포트”에 따르면 React가 프론트엔드 개발자 사이에서 가장 많이 사용하는 기술 스택으로 조사되었습니다. 프론트엔드 개발자로 취업을 했다면 높은 확률로 React를 다루게 된다는 의미이기도 합니다.
따라서 채용 시장에서 주니어 개발자로서 경쟁력을 갖추기 위해서는 React는 선택이 아닌 필수입니다.
React의 주요 특징
- 가상 DOM을 통한 효율적인 렌더링
- 컴포넌트 기반의 재사용 가능한 UI
- 단방향 데이터 바인딩
- JSX 문법을 통한 직관적인 UI 작성
- SPA 개발 지원
- 활발한 커뮤니티와 생태계
React를 사용한 대표적인 웹 사이트
국내외 수많은 기업 및 서비스가 React를 많이 사용하고 있습니다.React로 개발을 하는 이유 : 코드의 일관성, SPA, 가상DOM
<Vanila JavaScript와 비교한 React를 사용하는 이유>
1. React의 코드 일관성이 더 높습니다.
- Vanilla JavaScript는 웹 개발에서 사용되는 순수 JavaScript를 가리킵니다. 이러한 순수 개발은 코드의 정해진 규격이 없다 보니, 코드의 일관성이 떨어지게 되며 협업 시 서로의 코드에 적응하기 어려울 수 있다는 단점이 있습니다.
//예시1: 변수 선언 및 네이밍
var name = 'John Oz';
let age=30;
const PROFESSION = "Developer";
// 일관성 없는 변수 선언과 네이밍
var user_address = '345 Main St';
let UserEmail = 'john.oz@example.com';
const phoneNumber = '123-456-7890';
→ 변수 선언(var, let, const) 방식이 일관되지 않고, 네이밍 규칙(camelCase, snake_case, PascalCase)이 혼합되어 사용된 예시
//예시2: 함수 선언
function calculateTotal(price, tax) {
return price + (price * tax);
}
var getUserName = function(userId) {
// 사용자 이름 조회 로직
}
const FetchData = () => {
// 데이터 가져오기 로직
}→ 함수를 선언하는 방식과 함수 이름에 대한 네이밍 규칙이 일관성 없이 사용된 예시
- 리액트(React)에서는 컴포넌트 구조, 네이밍 규칙, 파일 구조, 그리고 상태 관리 방식 등 여러 측면에서 일관된 규칙을 적용할 수 있습니다. 이를 통해 더욱 코드의 일관성을 높일 수 있으며, 프로젝트의 가독성과 유지보수성을 크게 향상할 수 있습니다.
// 컴포넌트 구조 예시
//Profile.jsx
import React from 'react';
const Profile = ({ user }) => (
<div className="user-profile">
<img src={user.profileUrl} />
<h2>{user.name}</h2
<p>{user.age}</p>
</div>
);
export default Profile;→ React 컴포넌트 네이밍 규칙
- 컴포넌트 이름은 항상 PascalCase를 사용합니다.
- 파일 이름을 컴포넌트 이름과 일치시킵니다.
2. React는 대표적인 SPA 프레임워크입니다
- SPA는 단일 페이지 애플리케이션으로, 페이지 로딩 시 초기에 필요한 모든 리소스를 로드 하고, 이후에는 새로운 콘텐츠를 동적으로 로드 하여 전체 페이지를 새로고침 하지 않고도 상호 작용할 수 있도록 합니다.
- SPA 개념에 관한 내용은 React의 장점과 특징에서 자세히 다루도록 하겠습니다.
3. React는 가상DOM을 사용합니다.
- Vanilla JavaScript는 실제 DOM을 조작하여 작업하다 보니 변경 사항이 생기면 전체 페이지를 다시 랜더링 하게 됩니다. 이는 페이지에 여러 정보와 코드가 쌓이게 되면 꽤 무거운 작업이 됩니다.
- 반면, React는 가상 DOM을 사용하는 가장 대표적인 예시 중 하나입니다. React는 컴포넌트의 상태가 변경될 때 가상 DOM에 먼저 이러한 변경 사항을 반영합니다.
- 가상 DOM은 실제 DOM의 가벼운 복제본으로, React에서 상태 변화에 따른 효율적인 UI 업데이트를 가능하도록 합니다. React는 상태 변화가 있을 때 가상 DOM을 업데이트하고, 실제 DOM에 필요한 변경 사항만을 적용하여 성능을 최적화합니다.
- 가상 DOM 개념에 관한 내용은 React의 장점과 특징에서 자세히 다루도록 하겠습니다.
