개발노트

React Router React v6부터는 문법 변동 사항이 있습니다. - 참고링크: https://reactrouter.com/en/6.12.1 Home v6.12.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com React Router 패키지 설치하기. React Router는 react-router-dom이라는 패키지로 제공되므로, 프로젝트 디..

map() map()은 JavaScript 배열에서 사용되는 메서드로, 배열의 각 요소를 순회하면서 각 요소에 대해 지정된 동작을 수행하고 그 결과를 새로운 배열로 반환합니다. map()은 원본 배열을 변경하지 않고 새로운 배열을 생성합니다. array.map((currentValue, index, array) => { // 동작 수행 return transformedValue; }); map()은 주어진 함수를 배열의 각 요소에 대해 순차적으로 호출하고, 각 요소에 대해 함수의 반환 값을 새로운 배열에 저장합니다. 그리고 최종적으로 새로운 배열을 반환합니다. array: map()을 호출하는 배열 자체입니다. currentValue: 배열의 현재 요소 값입니다. index (선택 사항): 배열의 현재 ..

fetch fetch() 함수는 JavaScript에서 네트워크 요청을 보내고 응답을 받을 수 있는 기능을 제공하는 웹 API입니다. fetch() 함수를 사용하여 서버와 데이터를 주고받을 수 있습니다. fetch(url) .then(response => { // 응답을 처리하는 코드 }) .catch(error => { // 에러 처리 코드 }); fetch() 함수는 첫 번째 인수로 요청을 보낼 URL을 받습니다. 요청을 보내면 Promise 객체가 반환됩니다. 이후 then() 메서드를 사용하여 응답을 처리하거나 catch() 메서드를 사용하여 에러를 처리할 수 있습니다. Fetch()로 JSON 데이터 받기 fetch('https://api.example.com/data') .then(respon..

useEffect useEffect는 React의 훅(Hook) 중 하나로, 컴포넌트가 렌더링될 때나 특정 상태가 변경될 때 특정 작업을 수행할 수 있도록 도와줍니다. useEffect를 사용하여 컴포넌트의 생명주기 메서드나 사이드 이펙트 로직을 작성할 수 있습니다. import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { // 컴포넌트가 마운트될 때 실행되는 작업 console.log('컴포넌트가 마운트됨'); return () => { // 컴포넌트가 언마운트될 때 실행되는 작업 (정리(clean-up) 함수) console.log('컴포넌트가 언마운트됨'); }; }, []); useEffect(() =>..

Create React App은 React 애플리케이션을 빠르고 간단하게 설정할 수 있는 공식적인 도구입니다. 이 도구는 React 애플리케이션을 구성하는 데 필요한 모든 설정 및 빌드 작업을 자동화하여 개발자가 더욱 편리하게 개발할 수 있도록 도와줍니다. Create React App을 사용한 React JS개발 특징 제로 구성: Create React App은 초기 설정과 빌드 설정에 대한 복잡한 작업을 최소화합니다. 개발자는 바로 React 애플리케이션을 작성하고 실행할 수 있습니다. 설정 파일을 작성하거나 환경을 구성할 필요가 없습니다. 개발 서버: Create React App은 개발 서버를 제공하여 애플리케이션을 개발하는 동안 빠르고 쉽게 변경 사항을 확인할 수 있습니다. 파일이 수정될 때마다..

State에 들어가기 앞서 구조 분해 할당을 이해해야합니다. Dstructuring assignment(구조 분해 할당) 구조 분해 할당을 통해 배열이나 객체의 요소를 변수로 추출할 수 있습니다. 이때 추출된 변수들은 할당 연산자(=)를 사용하여 우측의 배열이나 객체에서 해당 위치 또는 속성의 값을 가져옵니다. 구조 분해 할당은 배열이나 객체의 일부분만을 추출할 수도 있습니다. 이때는 추출하지 않을 요소는 쉼표(,)로 무시하면 됩니다. 1. 배열 구조 분해 할당 (Array) const array = [1, 2, 3]; // 기존 방식 const a = array[0]; const b = array[1]; const c = array[2]; // 구조 분해 할당 const [a, b, c] = array..