본문 바로가기
반응형

전체 글90

[React.js] 리액트 훅에 대해서, 여러가지 함수 리액트 훅(Hooks)은 리액트 v16.8부터 도입된 기능으로, 함수형 컴포넌트에서도 state와 생명주기 기능을 사용할 수 있게 해줍니다. 기존에는 클래스 컴포넌트에서만 사용할 수 있었던 이러한 기능들을 함수형 컴포넌트에서도 사용할 수 있게 되어, 코드의 재사용성과 구조화가 더욱 쉬워졌습니다. 주요 훅 함수는 다음과 같습니다. 1. useState 이 함수는 상태 값을 추가할 수 있게 해주며, 초기 상태값을 인자로 받습니다. 이 함수는 상태값과 해당 상태를 갱신할 수 있는 함수를 반환합니다. 2. useEffect 이 함수는 생명주기 함수인 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 합친 것입니다. useEffect 내부.. 2024. 2. 21.
[React.js] 리액트 생명주기에 대해서 리액트의 컴포넌트 생명주기(Lifecycle)는 크게 3가지 단계로 나눌 수 있습니다. 마운팅(Mounting): 컴포넌트 인스턴스가 생성되어 DOM에 삽입될 때 발생하는 단계입니다. 업데이트(Updating): props 또는 state의 변화에 따라 컴포넌트 인스턴스가 재렌더링되는 단계입니다. 언마운팅(Unmounting): 컴포넌트 인스턴스가 DOM에서 제거되는 단계입니다. 1. 마운팅 - constructor(): 컴포넌트가 생성될 때 호출되며, state 초기화 등을 할 수 있습니다. - static getDerivedStateFromProps(): props로 받아온 값을 state에 동기화시키는 용도로 사용합니다. - render(): 컴포넌트를 렌더링합니다. - componentDidMou.. 2024. 2. 19.
[JAVASCRIPT] map으로 for문 대체하기 자바스크립트 ES6에서는 for 문 대신 map 메서드를 사용하여 배열을 처리할 수 있습니다. map 메서드는 배열의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. 코드 예시 : const array = [1, 2, 3, 4, 5]; const newArray = array.map(function(item) { return item * 2; }); console.log(newArray); // [2, 4, 6, 8, 10] 위의 코드에서는, map 메서드가 array의 각 요소에 대해 익명 함수를 호출하며, 이 함수는 각 요소를 2배로 만듭니다. 그 결과는 newArray에 저장되고, 이 배열은 원래 배열의 요소들이 2배가 된 새로운 배열입니다. 화살표 함수를 사용 예시.. 2024. 2. 14.
[JQUERY] jquery란?, 문법 예시 jQuery는 2006년에 발표된 빠르고, 강력하며, 특징이 풍부한 자바스크립트 라이브러리입니다. HTML 문서 탐색, 이벤트 처리, 애니메이션 생성, Ajax 개발 등을 간단한 API를 통해 쉽게 할 수 있게 도와줍니다. 이 API는 여러 브라우저에서 동일하게 동작하도록 설계되었습니다. jQuery의 주요 기능 : HTML/DOM 조작: jQuery를 이용하면 HTML 요소를 선택하고, 콘텐츠를 변경하며, 요소를 추가/삭제하는 등의 DOM 조작을 손쉽게 수행할 수 있습니다. CSS 조작: jQuery를 이용하면 HTML 요소의 CSS를 쉽게 조작할 수 있습니다. HTML 이벤트 메서드: jQuery는 표준 JavaScript가 제공하는 이벤트에 추가로 사용자 정의 이벤트를 제공합니다. 이를 이용하면 웹.. 2024. 2. 8.
반응형