리액트

[React] 라우팅

라우팅 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것 리액트에서 라우트 시스템을 구축하는 방법 1. 리액트 라우터 가장 많이 사용되는 라이브러리 컴포넌트 기반으로 라우팅 시스템을 설정 2. Next.js 리액트 프로젝트의 프레임워크 파일 경로 기반으로 작동 리액트 라우터의 대안으로 많이 사용됨 멀티 페이지 애플리케이션 (MPA) 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여줌 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합 but..

[React] 컴포넌트의 라이프사이클 메서드

모든 리액트 컴포넌트에는 라이프사이클이 존재 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드 + 에러가 나타났을 때 호출되는 메서드 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능 함수컴포넌트에서는 사용할 수 없음 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있음 앞으로 사용할 일이 별로 없어 이 개념에 너무 많은 시간을 쏟지 말 것. 마운트(mount) DOM이 생성되고 웹 브라우저상에 나타나는 것 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 co..

[React] 컴포넌트 반복

반복적인 내용을 효율적으로 보여주고 관리하는 방법 map() 함수 자바스크립트 배열 객체의 내장 함수 기존 배열로 새로운 배열을 만드는 역할 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성 문법 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 예제 const numbers = [1, 2, 3, 4, 5]; const processed = numbers..