본문 바로가기

JavaScript82

[React] function - export가 없는 경우, export가 있는 경우: export, export default의 차이 export가 없는 경우, export가 있는 경우: export, export default의 차이export가 없는 경우exportexport default모듈의 내부에서만 사용 가능여러 개의 이름 있는 항목을 내보낼 수 있다.모듈당 하나의 기본 내보내기를 지정할 수 있다. import할 때는 반드시 해당 이름을 사용import할 때는 원하는 이름으로 사용export가 없는 경우, 해당 함수는 모듈의 내부에서만 사용 가능하며, 외부에서 접근할 수 없다.export가 있는 경우,export 키워드를 사용하면 해당 함수가 모듈의 외부에서 접근 가능하다는 것을 의미. // file-A.jsexport function Component() { ... }다른 파일이나 모듈에서 이 함수를 import하여 사용할.. 2025. 1. 12.
[React] React Hook[State, Effect, Ref, Context, Memo, Callback, Reducer, customHook] useStateconst [현재 상태, 상태 변경] = useState(초기값)무거운 작업을 하는 초기 값을 콜백함수로 불러오면 최초 한 번만 값을 불러온다.import React from 'react';import { useState } from 'react';// state: 컴포넌트의 상태// const [현재 상태, 상태 변경] = useState(초기값)const heavyWork = () => { console.log('무거운 작업'); return ['홍길동', '고길동'];};export default function useStateHooks() { // 클릭 시 시간 증가 시키기 const [time, setTime] = useState(1); const handleClick =.. 2025. 1. 11.
[React] react.dev > react 빠르게 시작하기 먼저 vite를 이용해서 리엑트를 설치했다.npm create vite@latest ./이후 react와 js를 선택했다. 최초 폴더구조는 사진과 달라서 정리하기 쉽도록 사진처럼 구조를 바꿔 주었다.react 흐름: index.html -> main.jsx (or index.jsx) -> App.jsx import { StrictMode } from 'react';import { createRoot } from 'react-dom/client';import './styles/index.css';import App from './App';createRoot(document.getElementById('root')).render( ,);import './styles/App.. 2025. 1. 10.
[React] .html에서 react 사용, React의 동작 원리 js로 ui 업데이트 하기 React - DOM 사용하기 컴포넌트로 ui구축 props 사용법 Props 사용법1) .을 사용한 객체 속성function Header(props) { return {props.title};}2) template literalfunction Header({ title }) { return {`Cool ${title}`};}3) 함수의 반환function createTitle(title) { if (title) { return title; } else { return 'Default title'.. 2025. 1. 9.
[JavaScript] 구조 분해 할당 1. 배열 구조 분해 할당1-1. 기본 배열 구조 분해 할당기존에는 배열의 특정 요소에 접근할 때 인덱스로 접근합니다.const animals = ['강아지', '고양이', '오리'];// 일반적인 방식: const dog = animals[0];구조 분해 할당을 사용하면, 배열의 각 요소를 변수에 직접 할당할 수 있습니다.예제:// dog에는 첫 번째 요소, duck에는 세 번째 요소를 할당const [dog, , duck] = animals;console.log(dog, duck); // 출력: 강아지 오리설명:[dog, , duck]에서 쉼표(,)는 두 번째 요소를 건너뛰겠다는 의미입니다.배열의 첫 번째 값 '강아지'가 dog에, 세 번째 값 '오리'가 duck에 할당됩니다.1-2. 기본값 사용하기.. 2024. 12. 22.
[JavaScript] Reduce 1. reduce의 기본 개념reduce는 배열의 각 요소를 순회하면서, 누적된 값(accumulator)과 현재 처리 중인 요소(currentValue)를 바탕으로 단일 값으로 "축소"하는 함수입니다. 이때, 사용자가 정의한 콜백 함수가 핵심 역할을 합니다.2. 함수 시그니처와 파라미터reduce의 기본 형태는 다음과 같습니다:array.reduce(callback, initialValue);callback: 배열의 각 요소마다 실행되는 함수입니다. 이 함수는 네 가지 인자를 받습니다.accumulator: 누적값으로, 콜백 함수가 반환한 값이 계속해서 이 변수에 누적됩니다.currentValue: 현재 처리 중인 배열 요소입니다.currentIndex (선택 사항): 현재 요소의 인덱스입니다.arra.. 2024. 12. 22.
[JavaScript] async & await 🚀 async / await 정리async / await는 비동기 작업을 쉽게 처리할 수 있도록 도와주는 최신 JavaScript 문법입니다.이를 사용하면 코드를 동기 방식처럼 읽기 쉽게 만들 수 있고, 콜백 지옥을 방지할 수 있습니다. 😊📌 async 키워드async 키워드가 붙은 함수는 항상 Promise를 반환합니다.반환값이 Promise가 아닐 경우, 자동으로 Promise.resolve(반환값)으로 감싸서 반환됩니다.✅ 예제: async 함수는 Promise를 반환한다async function get1() { return '1'; // 자동으로 Promise.resolve('1')로 변환됨}// 실행const one = get1();one.then((num) => console.log(n.. 2024. 12. 20.
[JavaScript] 콜백함수 📌 Callback 함수란?👉 **콜백 함수(callback function)**는 다른 함수의 인자로 전달되어 특정 조건에서 실행되는 함수입니다.📌 Callback 함수 예제function main(callback) { console.log('main 실행'); callback(); // 전달된 함수 실행}main(function () { console.log('✅ 콜백 함수 실행');});✔ main() 함수는 callback을 인자로 받아 실행합니다.✔ main()을 호출할 때 익명 함수를 전달하여 콜백 함수로 실행됩니다.📌 비동기 콜백 (Asynchronous Callback)👉 비동기 작업이 완료된 후에 실행되는 콜백 함수입니다.👉 비동기 코드는 실행 순서가 보장되지 않기 때문에.. 2024. 12. 20.
[JavaScript] Fetch, AJAX, Axios 웹에서 데이터를 요청하고 처리하는 주요 방법들을 비교 정리! 1. Fetch APIfetch()는 비동기 네트워크 요청을 보내고 응답을 처리하는 내장 API입니다.Promise를 기반으로 동작하며, 데이터를 가져와 JSON 변환 후 사용할 수 있습니다.Fetch 사용 예제fetch('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); // 응답 객체 출력 return response.json(); // JSON 변환 (Promise 반환) }) .then((data) => console.log(data)) // 변환된 JSON 데이터 출력 .catch((error) => cons.. 2024. 12. 20.

티스토리툴바