리액트
리액트는 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리
리액트 특징
-
선언형
한 페이지를 작성하기 위해 HTML/CSS/JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용한 선언형 프로그래밍 지향 -
컴포넌트 기반
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발
-> 컴포넌트를 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발 가능 -
범용성이 높음
프레임워크를 사용할 경우 해당 생태계에 종속되어 사용하지만 리액트는 라이브러리이기 때문에 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있음
-> 추가로 리액트 네이티브를 사용하면 모바일 앱도 개발이 가능 -
SPA
기존 브라우저 페이지를 렌더링하기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야했던 것과 달리 깜빡임 없이 변화된 부분만 부분적으로 렌더링할 수 있도록 함
1. JSX
React에서 UI를 구성할 때 사용하는 문법으로 Javascript를 확장한 문법
- Babel(JSX를 브라우저가 이해할 수 있는 Javascript로 컴파일하는 라이브러리)을 이용하여 컴파일
- JSX를 사용하면 DOM 코드보다 명시적으로 코드 작성할 수 있음
JSX 규칙
function Title() {
const name = 'kim';
const menu = ['home', 'profile', 'setting'];
return (
<div className="titleContainer">
<h1>hello, {name ? name : '사용자'}님</h1>
{menu.map(v => <MenuItem key={v} item={v} />)}
</div>
)
}
export default Title;- opening tag와 closing tag로 감싸주어야 함
- class 속성을 사용하기 위해서는 className으로 표기해야 함
- JSX에서 Javascript를 사용하려면 꼭 중괄호를 사용해야 함
- React의 엘리먼트는 대문자로 시작해야 함(JSX로 작성될 경우)
- 조건부 렌더링은 if 문이 아닌 삼항연산자를 이용해야 함
- 여러개의 엘리먼트를 표시하기 위해 map함수를 사용해야 하며, 각 JSX 항목에 key 속성이 반드시 필요
2. 컴포넌트 기반 개발
리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러개 만들고 조합하여 애플리케이션을 만들 수 있음
리액트 프로젝트 생성
사용하고 싶은 패키지매니저를 사용하여 리액트 앱을 만들 수 있으며,
이미 만들어진 템플릿을 활용하여 만들 수도 있고, [template-name]에 typescript를 작성하면 타입스크립트 프로젝트로 구성할 수 있다.
4. SPA
SPA는 Single Page Application이라는 의미로 문서 전체가 아닌 업데이트에 필요한 데이터만 서버에서 전달받아 자바스크립트가 동적으로 HTML 요소를 생성하여 화면에 보여주는 방식이다.
출처 개인블로그 - SPA(Single Page Application)란?
장점
- 새로운 페이지 요청 시 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다.
- 새롭게 갱신되는 부분만 렌더하기 때문에 새로고침이 발생하지 않아 화면 깜빡임 없이 빠른 화면 이동이 가능하다.
- 트래픽의 감소와 속도,반응성의 향상으로 인해 앱처럼 자연스러운 사용자 경험(UX)를 제공하며 모바일 사용이 증가하는 시점에 이는 큰 장점이 된다.
- 모듈화 또는 컴포넌트별 개발이 용이하다.
- 백엔드와 프론트엔드가 비교적 명확하게 구분된다.
단점
- 웹 애플리케이션에 필요한 정적 리소스를 한번에 다운로드 하기 때문에 초기 구동 속도가 느리다.
- SPA 구조 상 데이터 처리를 클라이언트에서 하는 경우가 많은데, 해당 로직들은 JavaScript를 통해 구현되므로 코드가 외부에 노출되는 보안적인 문제가 있다.
- 검색엔진 최적화(SEO)가 어렵다.
SPA가 검색엔진 최적화(SEO)에 부적합한 이유
검색 엔진이 크롤링할 때 JavaScript를 실행하지 않고 어플리케이션이 로드되기 전의 빈 상태의 코드를 크롤링하기 때문에 인덱싱이 제대로 이루어지지 않는다.
추가)
구글 검색엔진에서 2018년 이후 자바스크립트 웹 어플리케이션에 대한 url 라우팅을 따라 크롤링하여 SPA도 SEO가 가능할 수 있다.
SEO와 첫 페이지 로딩 속도 개선을 위해 SPA 라이브러리에서 SSR을 동시에 지원하기도 한다.
(첫 페이지만 SSR로 받아오는 방법으로 해결)
- MPA: Multiple Page Application(가장 전통적인 방식)
- SPA: Single Page Application
- SSR: Server Side Rendering
SPA & Routing
라우팅(Routing): url 주소에 따라 다른 뷰를 보여주는 것을 의미
- React에 Routing과 관련된 기능이 내장되어 있지 않아 라이브러리를 사용함
React Router의 주요 컴포넌트
- BrowserRouter: 라우터 역할
- Routes, Route: 경로를 매칭
- Link: 경로를 변경하는 역할
React State & Props
- state: 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값
- props: 컴포넌트 외부로부터 전달받은 값
state hook, useState
React docs - Hook의 개요
Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
특징
- 선택적 사용: 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있습니다.
- 100% 이전 버전과의 호환성: Hook은 호환성을 깨뜨리는 변화가 없습니다.
- Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공합니다.
즉, 리액트에서 클래스 컴포넌트를 사용하며 상태관리, 생명주기 등 개발을 하는데 겪었던 불편함이나 어려움을 해결하기 위해 hook을 도입하였다는 의미이다.
그 중 useState는 상태 관리와 관련된 hook 중 하나로 "컴포넌트 내에서 바로 업데이트할 수 있는 state와 state set 함수"를 사용할 수 있다.
이벤트 처리
- React에서 이벤트는 소문자 대신 카멜 케이스(camelCase)를 사용합니다.
- 속성명 예시) onclick이 아닌 onClick
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달합니다.
2023.05.17 리뷰
오늘 풀었던 알고리즘 문제 중에
연속된 공백으로만 이루어진 문자열은 length가 0인 것을 활용하여 푸는 문제가 있었다.
문제
문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자가 대문자인 문자열을 리턴해야 합니다.
입력인자
string 타입의 공백이 있는 알파벳 문자열
출력
string 타입을 리턴해야 합니다.
주의사항
단어는 공백으로 구분합니다.
연속된 공백이 존재할 수 있습니다.
빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다.
풀이
function letterCapitalize(str) {
return str.split(' ')
.map(v => v.length === 0 ? v : `${v[0].toUpperCase()}${v.slice(1, v.length)}`)
.join(' ');
}이 문제를 어떻게 풀지 고민하던 중 페어 분께 "연속된 공백으로만 이루어진 문자열은 length가 0"이라는 힌트를 얻었다.
왜 "연속된 공백으로만 이루어진 문자열은 length가 0"일까?
다음 글에서 이 부분에 대해 정리해보고자 한다.
