✨ Front-end67 [JavaScript] Spread 연산자의 개념과 사용방법 Spread 연산자 스프레드 연산자는 이터러블 오브젝트와 엘리먼트를 하나씩 분리하여 전개할 때 쓰이는 연산자이다. 전개한 결과를 변수에 할당하거나 호출하는 함수의 파라미터 값으로 사용할 수 있다. 함수 파라미터 매개변수로 값을 받을 때마다 각각 하나씩 출력되며, 보다 많은 매개변수를 넣으면 아래와 같이 undefined가 뜬다. Rest파라미터 호출받는 함수 파라미터에 function(...rest)와 같이 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 한다. ex1) ex2) ex3) ex4) Array-Like Array는 아니지만, Array처럼 사용할 수 있는 Object를 Array-Like라고 한다. 순차적으로 작성되야하는데, 10과 zoo가 0, 1이 아니라 undefi.. 2023. 9. 21. [JavaScript] ES6 화살표 함수 arrow arrow 함수란? ES6에서 도입된 새로운 함수 표현 방식이다. 화살표 함수는 함수를 간결하고 명료하게 작성할 수 있도록 도와주며, 주로 익명 함수의 선언과 사용에 활용된다. 파라미터 매개변수 왼쪽과 같이 function(one, two) 가 (one, two) => 로 바뀌게 되는 것이다. 만약 function add(one , two) 나 function add2(one, two), function add3(one, two) 처럼 함수 명을 간단하게 없애버리고, 익명으로 대체하여 변수에 넣어주기 편하다. 파라미터가 하나일 경우 ( ) 를 생략할 수 있으며, 만약 파라미터가 없을 경우 ( ) 만 쓰고 함수 선언 가능. 객체 {key : value} 형태의 Object를 반환하기 위해서는 소괄호 ( ).. 2023. 9. 21. [React] useEffect의 개념 및 실행 시점의 차이 및 사용예제 useEffect란? 함수형 컴포넌트에서 side effect를 수행하고, 컴포넌트의 생명주기에 특정 작업을 연결하는 Hook이다. 이는 컴포넌트가 렌더링될 때, 업데이트될 때, 혹은 제거될 때 특정 작업을 수행하게 해준다. ex1) 사용예제 HTML 삽입 미리보기할 수 없는 소스 결과화면 첫 번째 렌더링 시에 "컴포넌트 생성"이 찍히는 것은 useEffect의 첫 번째 실행이다. 해당 useEffect는 컴포넌트가 마운트될 때 실행된다. 두 번째로 "컴포넌트 사라짐"이 찍히는 것은 컴포넌트가 다시 렌더링되어 언마운트되었을 때의 작업이다. 이전에 생성된 컴포넌트 인스턴스가 제거되고, 새로운 컴포넌트 인스턴스가 생성되어 언마운트 작업이 실행된다. 마지막으로 "컴포넌트 생성"이 다시 찍히는 것은 두 번째 렌.. 2023. 9. 21. [React] useRef의 개념과 2가지 사용법 useRef란? React에서 사용되는 Hook 중 하나로, 함수형 컴포넌트에서 변수를 저장하고 관리하는 데 사용된다. useRef를 사용하면 함수형 컴포넌트 내에서도 값이 유지되며, 이전 값에 접근할 수 있다. 일반적으로 useRef는 DOM 요소에 대한 참조를 생성할 때 사용된다. 그러나 useRef는 단순히 DOM 참조가 아니라, 컴포넌트 전체에서 유지하고 싶은 어떤 값에도 사용할 수 있다. useRef는 .current 속성을 사용하여 값에 접근하거나 값을 변경할 수 있다. .current를 통해 접근된 값은 컴포넌트가 리렌더링되어도 변경되지 않는다. React에서 useRef는 크게 두가지 용도로 활용된다. 렌더링 시 초기화 되지 않고 유지되는 조작 가능한 변수 값을 선언할 경우 일반 JavaS.. 2023. 9. 21. 이전 1 2 3 4 5 6 7 ··· 17 다음
