Front-end 썸네일형 리스트형 [React] 훅(Hook) - useCallback 1. 정의 - useMemo() 훅과 유사한 역할, 차이점은 값이 아닌 함수를 반환한다는 것 - 특정 변수의 값이 변한 경우에만 함수를 다시 정의하게 되므로 함수가 다시 정의되지 않는 경우에 자식 컴포넌트도 재렌더링이 일어나지 않음 2. 사용 방법 - 함수와 의존성 배열을 파라미터로 받음 - 파라미터로 받는 함수를 콜백이라고 부름 - 의존성 배열에 있는 변수 중 하나라도 변경되면 Memoized 콜백 함수 반환 useCallback(function, dependencies) const memoizedCallback = useCallbck( () => { doSomething(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] ); 메모이제이션(Memoization) 비용이 높은(연산.. 더보기 [React] 훅(Hook) - useMemo 1. 정의 - 컴포넌트가 재렌더링 되면 그 속에 자식 컴포넌트도 항상 함께 재렌더링 됨 -> 자식컴포넌트가 동작이 오래걸리는 무거운 컴포넌트인 경우 부모 컴포넌트를 렌더링 할 때 마다 속도 저하가 발생할 수 있음! 이런 상황에 자식 컴포넌트를 memo로 감싸 놓으면 됨! -> 재렌더링을 막기위한 훅 - 컴포넌트 로드시 1회만 실행하고 싶은 코드가 있는 경우 useMemo에 담아서 사용 할 수 있음 -> 예를 들어 반복문을 10억번 돌려야 하는 경우, 그 함수를 useMemo 안에 넣어두면 컴포넌트 로드시 1회만 실행됨 - useEffect처럼 dependency도 넣을 수 있기 때문에 특정 state, props가 변할 때만 실행 가능 -> 따라서 useMemo훅에 의존성 배열을 넣지 않는 경우 렌더링이.. 더보기 [React] 훅(Hook) - useEffect 1. 정의 - useState()와 더불어 가장 많이 사용되는 훅 - 클래스 컴포넌트에서 제공하는 함수인 componentDidMount(), componentDidUpdate(), componentWillUnmount()를 통합한 기능을 제공 - 리액트의 함수 컴포넌트에서 사이드 이펙트(Side Effect)를 수행하기 위한 훅 사이드 이펙트(Side Effect) - 사전적으로는 부작용이라는 뜻 - 컴퓨터 프로그래밍에서는 개발자가 의도치 않은 코드가 실행되면서 버그가 나타나면 사이드 이펙트가 발생했다고 함 - 리액트에서의 사이드 이펙트는 효과 혹은 영향을 뜻하는 이펙트(Effect)의 의미에 가까움 (서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미, 작업이 다른 컴포넌트에 영.. 더보기 [React] 훅(Hook) - useState 1. 정의 - 가장 대표적이고 많이 사용되는 훅 - 클래스 컴포넌트가 state를 사용하는 것처럼 함수 컴포넌트에서는 useState() 훅을 사용함 2. 사용방법 - useState()를 호출할 때 파라미터로 선언할 state의 초기값이 들어감 - useState(초기값)을 호출하면 배열을 리턴함 - 리턴한 배열에는 state로 선언된 변수, state의 set함수 두 가지 항목이 들어있음 const[변수명, set함수명] = useState(초기값); 3. useState 사용했을 때와 사용하지 않았을 때 비교 - useState를 사용하지 않은 코드 import React, { useState } from "react"; // Counter 함수 컴포넌트 function Counter(props) .. 더보기 [HTML] <img> 태그에 alt 옵션 alt alternitives 대체, 대신 alt 옵션의 역할 1) 이미지 파일이 없는 경우 대체해서 보여줌 2) 검색 키워드가 됨 3) screen reader로 읽혀짐 -> 웹 접근성 더보기 [JavaScript] 템플릿 리터럴(Template literals), 태그드 리터럴(tagged literals) 1. 템플릿 리터럴(template literals) - 자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법 - 따옴표 대신 backquote, backtick 이라는 `백틱` 기호를 사용해서 문자를 만드는 형태 2. 템플릿 리터럴의 장점 1) 문자 중간 엔터키 입력 가능 - 자바스크립트 문자열은 문자 중간에 엔터키치면 안되는데 백틱으로 문자를 만들면 엔터키 자유롭게 가능 var 문자 = `안녕 하세요`; 2)문자 중간에 변수를 집어넣을 때 편리함 - 자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야 하는데 백틱으로 문자를 만들면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있음 var 이름 = '김하늘'; var 문자 = `안녕하세요 ${이름.. 더보기 [JavaScript ES6] 변수(variable) var let const 와 Hoisting, 전역변수, 참조 1. 변수(variable) - 변수: 자료를 임시로 저장하는 공간 - 오브젝트, 배열, 함수 등 모든 자료들을 담을 수 있음 - 자바 스크립트에서 변수를 만들 때 var, let, const라는 3개 키워드를 사용할 수 있음 var let const 재선언 O X X 재할당 O O X 범위 function {} {} 2. 변수의 선언 1) 선언 방법 var 이름; let 나이; const 성별; 2) 차이점: var는 재선언 가능 / let, const는 재선언 불가능 - let, const로 만들면 같은 이름의 변수 재선언 불가(에러 발생) - 변수 이름을 중복해서 만드는 실수를 방지해 줌 let 나이; let 나이; //에러 const 성별 = '여자'; const 성별 = '남자'; //에러 .. 더보기 [JavaScript] Arrow function 화살표 함수 1. Arrow function 문법 ES6 문법 이후 새롭게 등장한 함수를 만들 수 있는 문법 1) 자바스크립트에서 함수 만드는 기존 문법 (1) function 예쁜함수(){ //어쩌구 } (2) var 예쁜함수 = function(){ //어쩌구 } 함수 사용법 예쁜함수(); 2) ES6 신문법 Arrow function 으로 함수 만들기 - function이라는 길고 복잡한 키워드 대신에 () => {} 의 형태로 만드는 함수 var 예쁜함수 = () => { //어쩌구 } 2. Arrow function의 장점 1) 함수 본연의 입출력 기능을 직관적으로 표현하는 문법 cf) function 문법을 사용하는 이유 1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 .. 더보기 이전 1 2 3 4 5 6 다음 목록 더보기
