React 초보자를 위한 기초
Source: Dev.to
React 학습 첫 걸음
웹 개발을 시작했을 때, 나는 HTML, CSS, 그리고 기본 JavaScript를 알고 있었습니다. 간단한 웹사이트는 만들 수 있었지만, 프로젝트가 커질수록 같은 코드를 반복하게 되었고 모든 것을 관리하기가 어려워졌습니다.
그때 React를 배우기 시작했습니다. 처음엔 헷갈렸지만, 차츰 기본 개념을 이해하게 되었고 훨씬 수월해졌습니다.
React란?
React는 사용자 인터페이스를 만들기 위해 사용되는 JavaScript 라이브러리입니다. Facebook에서 만들었습니다.
쉽게 말해, React는 웹사이트를 컴포넌트라고 불리는 작은 부분들로 나누어 구축하도록 도와줍니다. 각 컴포넌트는 헤더, 푸터, 콘텐츠 영역 등 페이지의 한 부분을 담당합니다.
React를 사용하는 이유
React는 개발을 더 쉽고 깔끔하게 만들어 줍니다.
- 코드를 체계적으로 정리할 수 있음
- 컴포넌트를 재사용할 수 있음
- 업데이트와 유지보수가 쉬움
- 성능이 향상됨
React는 페이지에서 변경된 부분만 업데이트하므로 전통적인 웹사이트보다 빠릅니다.
재사용 가능한 컴포넌트란?
재사용 가능한 컴포넌트는 코드를 한 번 작성하고 여러 번 사용할 수 있다는 뜻입니다.
다음과 같이 코드를 반복하는 대신:
Click
Click
Click하나의 컴포넌트를 만들 수 있습니다:
function Button() {
return Click;
}그리고 이렇게 재사용합니다:
이렇게 하면 코드가 간단하고 깔끔해집니다.
블로그에서 재사용 컴포넌트 사용하기
블로그에서는 모든 포스트가 비슷한 형태이므로 하나의 컴포넌트를 만들어 재사용할 수 있습니다.
function PostCard(props) {
return (
## {props.title}
{props.content}
);
}이제 이렇게 사용합니다:
시간을 절약하고 중복을 방지할 수 있습니다.
SPA와 MPA
- SPA (Single Page Application) 은 하나의 페이지를 로드하고 페이지를 새로 고치지 않고 내용만 업데이트합니다. React는 이 방식을 사용해 빠른 느낌을 줍니다.
- MPA (Multi Page Application) 은 링크를 클릭할 때마다 새 페이지를 로드하는데, SPA에 비해 느립니다.
주요 차이점: SPA는 페이지를 새로 고치지 않지만, MPA는 각 네비게이션마다 페이지를 새로 고칩니다.
라이브러리와 프레임워크
- 라이브러리: 특정 작업을 수행하도록 도와주는 도구이며, 우리는 어떻게 사용할지 직접 제어합니다. React는 라이브러리입니다.
- 프레임워크: 애플리케이션을 만들기 위한 전체 구조를 제공하며 흐름을 제어합니다. 예로 Angular와 Django가 있습니다.
주요 차이점: 라이브러리에서는 우리가 코드를 제어하고, 프레임워크에서는 프레임워크가 전체 흐름을 제어합니다.