개발노트

※React App 배포를 시작하기 전, 아래 링크에 들어가셔서 순서대로 진행 부탁드리겠습니다. https://mroh1226.tistory.com/84 GitHub Page 무료 호스팅 이용하기 1. GitHub Repository에 Web 프로젝트를 커밋, 푸시합니다. (리포짓토리를 Public으로 설정) 2. 설정에서 Repository의 Name을 설정합니다(Name이 도메인 뒷 주소가 될 예정) 3. Pages로 이동하여 위에서 생성한 Rep mroh1226.tistory.com React App GithubPage 설정하기. 1. 위 준비가 끝났다면 터미널로 돌아가서 아래와 같이 명령어를 작성하여 패키지를 설치해줍니다. npm install gh-pages 2. 설치가 완료되었다면, packa..

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 (선택 사항): 배열의 현재 ..

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은 개발 서버를 제공하여 애플리케이션을 개발하는 동안 빠르고 쉽게 변경 사항을 확인할 수 있습니다. 파일이 수정될 때마다..

Props ReactJS에서 props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터를 나타냅니다. Props는 컴포넌트 간에 데이터를 효율적으로 전달하고 상태를 공유하는 데 사용됩니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 일방적으로 전달됩니다. 부모 컴포넌트에서 자식 컴포넌트로 전달된 props는 자식 컴포넌트 내에서 읽기 전용으로 사용됩니다. 즉, 자식 컴포넌트는 props 값을 변경할 수 없고, 오로지 읽기만 가능합니다. Props를 사용하여 컴포넌트에 데이터를 전달할 수 있습니다. 이 데이터는 문자열, 숫자, 불리언, 객체, 배열 등 다양한 형태일 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때, 자식 컴포넌트에서 해당 props를 사용하여 UI를 동적으로..

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..

React JS 는 javascript를 더 간편하기 사용하기 위해 도움을 주는 라이브러리입니다. 메타(페이스북)에서 개발했으며, 가상 DOM(virtual DOM)을 사용하여 웹 성능을 향상시킵니다. 컴포넌트 개발방식으로 재사용이 가능하도록 모듈화된 코드를 작성할 수 있도록 도와줍니다. 특징. 컴포넌트 React 애플리케이션은 컴포넌트의 조합으로 이루어집니다. 컴포넌트는 재사용 가능하며 독립적인 코드 단위입니다. 각 컴포넌트는 자체적인 상태(state)와 속성(properties)을 가질 수 있습니다. JSX React에서는 JSX라는 문법을 사용하여 JavaScript 코드 안에 HTML과 비슷한 구문을 작성할 수 있습니다. JSX는 가독성이 높고 컴포넌트의 구조를 명확하게 표현할 수 있는 장점이 있..