JongDDA의 한걸음 한걸음씩

map() 함수란? : 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수 예제) const foods = ["순대국","뼈다귀해장국","육개장"] const todos = [{ content:"잠자기", prior: "하", time: "23:00" },{ content:"밥먹기", prior: "중", time: "19:00" },{ content:"공부하기", prior: "상", time: "20:00" }] const FoodList = ()=>{ return 음식 목록 {/* 배열 각 요소를 인자로 전달받아 새로운 배열을 생성 및 반환한다! */} {foods.map((food, idx) =>{ return {food} })} 할일 ..

useEffect useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook. component가 mount 되었을 때나 unmount 또는 update 되었을때 특정 작업 처리 즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이라 보면 된다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방 예제) select를 이용한 항목 변경 import { useState, useEffect } from 'react' // useEffect : 생명주기 메소드를 대체할 수 있는 훅(완전 동일할 순 없다) const Info = () =>{ c..

화살표 함수 : 화살표 함수는 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다. 기본 형태 const Func = () => { console.log("화살표 함수 호출!") } Func(); 특징 - function 표현식에 비해 구문이 짧다. - this나 super등의 객체를 바인딩하지 않는다. - 기본적으로 익명 함수이다. 따라서 메소드가 아닌 개별 함수로 더 적합하다. - return 키워드의 생략이 가능하다.(제한적) -> 호이스팅(함수 선언보다 먼저 호출)이 불가 Func(); // 여기선 호출 불가 const Func = () => { console.log("화살표 함수 호출!") } Func(); // 여기서 호출 가능 -> 반환값만 존재한느 경우, 중괄호와 ret..

프로미스(Promise) : 프로미스(promise) 객체는 비동기 작업에 대한 약속이다. 비동기 작업 이후 발생할 완료 또는 실패, 그리고 그 결과값을 나타낸다. 비동기 작업이란? : 언제 끝날지 알 수 없는 작업. 작업의 상태가 시작, 진행중, 완료 인 것과 무관하게 프로그램은 게속해서 실행되어야 한다. 프로미스 생성방법 1. 다음과 같은 비동기 작업을 수행하는 함수가 있다. () => { console.log("비동기 함수라고 치자") } 2. 이를 Promise 객체를 생성하면서 인자로 전달한다. new Promise(() => { console.log("비동기 함수라고 치자") }) 3. Promise 객체에 전달된 함수는 두 가지 콜백 함수를 인자로 받는다. 하나는 작업 성공 시 실행된느 함수..