전체 글 (44) 썸네일형 리스트형 리액트(React) - 클래스 컴포넌트 Ref 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주세요! ref는 reference의 약자로 참조를 뜻합니다. 기본 자바스크립트에서는 querySelector()나 getElementById() 같은 메서드를 사용하여 DOM 객체를 가져와 사용했습니다. 리액트에서는 컴포넌트를 이용해 DOM을 수정합니다. 따라서 보통은 컴포넌트 안에서 State 또는 Props를 이용해 화면 DOM을 변경하여 화면을 렌더링 합니다. 컴포넌트에서 DOM을 직접적으로 변경해야 하는 상황이 있을 때 DOM 객체를 가져와야 하는데요. 이때 사용하는것이 ref입니다. ref에 DOM의 객체를 가지고 있습니다. ref는 직접적으로 DOM 수정해야 하는 경우 사용됩니다. 이때 ref는 DOM 또는 컴포넌트.. 리액트(React) - 이벤트 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주시기 바랍니다. 이번에는 리액트에서 이벤트를 사용하는 방법을 알아봅니다. 리액트에서 이벤트는 DOM요소에만 이벤트를 사용할 수 있습니다. 따라서 컴포넌트 안에 있는 요소에 이벤트를 추가해야 합니다. 코드와 같이 기존 HTML에서는 이벤트에서 함수를 호출하거나 간단한 코드를 적어 적용했습니다. 리액트에서 이벤트를 줄 때는 함수를 전달해주어야 합니다. class Test extends Component { render() { return ( {alert("클릭이에요!");} }> 클릭 ); } } export default Test; 화살표 함수나 따로 함수를 선언하여 함수를 전달하면 됩니다. 화살표 함수가 아닌 함수로 전달한다면.. 리액트(React) - 컴포넌트, props, state 간단 설명 리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주시기 바랍니다. 컴포넌트(Compoent) 컴포넌트는 재사용이 가능한 React 엘리먼트를 반환하는 하나의 구성 요소이다.. 즉 리액트에서 뷰를 표현하는 하나의 구성요소입니다. 리액트 컴포넌트의 종류 리액트의 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트가 존재합니다. 함수형 컴포넌트 - JavaScript에서 사용하는 함수를 이용해 만든 컴포넌트입니다. 클래스형 컴포넌트 - ES6에서부터 지원하는 class 문법을 이용해 만든 컴포넌트입니다. props props는 properties의 줄임말이며 컴포넌트 속성을 설정하는 요소입니다. 해당 props 값은 컴포넌트를 사용할 때 설정이 가능합니다. // Test.js - Com.. 자바스크립트(JavaScript) - 커스텀 이벤트(CustomEvent) 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! 자바스크립트에서 DOM을 조작할 때 기본적으로 지원하는 이벤트가 아닌 직접 원하는 때에 이벤트를 발생하고 싶을 때 사용되는 커스텀 이벤트를 알아보겠습니다. 커스텀 이벤트는 원하는 때에 발생시킬 수 있습니다. 또한 해당 이벤트에 대한 정보를 추가할 수도 있습니다. 기본적으로 이벤트를 생성하는법을 알아보겠습니다. 이벤트 생성 이벤트 생성은 Event객체를 통해 만들 수 있습니다. Event 객체는 기본적인 이벤트들의 부모 객체입니다. 클릭이벤트나 마우스 이벤트 같은 것들 모두 Event객체를 상속받고 있습니다. const e = new Event("click"); const ev = new Event("click" {"bubbles":true,"ca.. 자바스크립트(JavaScript)/웹(Web) - AJAX 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! AJAX ajax는 Asynchronous JavaScript and XML약자이며 비동기적으로 자바스크립트를 이용하여 서버와 통신하는 기술입니다. 예전에는 XML을 많이 사용했지만 요즘은 더 좋은 JSON을 사용하여 데이터를 통신합니다. 서버와 통신하면서 페이지 내용을 가져와 바뀌어야 하면 페이지가 새로 고침 되어야 했습니다. 하지만 ajax를 이용하면 비동기로 서버와 통신하여 DOM을 이용해 페이지를 그대로 사용하면서 일부를 실시간으로 변경합니다. 메서드 알아보기 open 메서드는 요청을 초기화하는 데 사용됩니다. 첫 번째 인수는 서버에 요청하는 요청 메서드입니다. GET, POST, PUT, DELETE 등이 있습니다. 두 번째 인수는 서버.. 자바스크립트(JavaScript) - Promise 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다! 비동기 작업을 할 때 콜백을 사용합니다. 실행 순서가 보장받아야 할 때는 콜백을 중첩하여 사용하기도 합니다. 콜백을 중첩해서 사용할때 보기가 힘들고 이해가 어려울 때가 있습니다. 이 문제를 해결할 수 있는 방법이 Promise입니다. Promise는 비동기 작업에서의 콜백을 좀 더 간결하게 작성할 수 있게 해 주며 실행 순서를 보장받을 수 있도록 할 수도 있습니다. 프로미스(Promise) Promise는 peding, fulfilled, rejected 3개의 상태로 구분됩니다. peding 상태는 아직 Promise 작업이 끝나지 않은 상태 fulfilled 상태는 Promise 작업이 끝낸 상태 rejected 상태는 Promise 작업 중 .. 자바스크립트(JavaScript)/웹(Web) - 이벤트 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! html 요소에 자바스크립트를 이용하여 이벤트를 처리하는 법을 간단히 알아보겠습니다. 이벤트는 특정 상황에대한 행동을 뜻합니다. 자바스크립트에서 특정 상황이 되었을 때 지정한 콜백 함수를 호출합니다. 이벤트 처리 방법 이벤트를 처리하는 방법은 여러개가 있습니다. onclick 속성을 이용해 이벤트 처리 DOM 객체로 요소를 가져와 onclick 프로퍼티로 이벤트 처리 addEventListener() 메서드를 이용해 이벤트 처리 클릭! 클릭2! 클릭3! html 요소에서 onclick 속성을 이용해서 이벤트를 처리하면 html와 자바스크립트가 섞여있어서 유지보수성이 떨어집니다. 또한 이벤트 처리를 위해 함수를 지정할 때 여러 개가 아닌 하나만 된.. 자바스크립트(JavaScript) - 유사 배열 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다! 자바스크립트에는 유사 배열이라는 것이 존재합니다. 배열이 아니지만 배열을 흉내 내는 것이죠. 객체를 유사 배열로 이용하여 반복 처리를 가능캐 할 수 있는 유사 배열을 간단히 알아보겠습니다. 유사 배열 유사 배열과 배열의 차이점은 객체에 length 프로퍼티와 프로퍼티 이름이 숫자 0으로 시작하는 프로퍼티가 있다면 유사 배열입니다. Argument 객체와 DOM에서 요소를 가져올 때 NodeList의 경우도 유사 배열 객체입니다. let a = ["a", "b", "c"]; let b = { 0: "a", 1: "b", 2: "c", length: 3 }; 이 유사 배열 객체는 Array의 프로토타입에 있는 메서드들을 사용하지 못하지만 for문, f.. 이전 1 2 3 4 5 6 다음