develop_C

특정 DOM에 작업을 해야 할 때 ref를 사용하는 것인데 DOM을 꼭 직접적으로 건드려야 할 때 쓰인다. 마치 HTML의 id라고 보면 된다. ref를 사용하려면 Hooks를 사용해야한다. 💡 DOM을 꼭 사용해야 하는 상황 : 필요한 기능을 state를 통해서 개발 했지만 해결 할 수 없는 기능들이 있다 이럴 때 접근 해야 하는 것들 1. 특정 input에 포커스 주기 2. 스크롤 박스 조작하기 3. Canvas 요소에 그림 그리기 ref사용 콜백 함수를 통한 ref 설정 {this.input=ref}} /> 이렇게하면 ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다. createRef를 통한 ref 설정 import React, { Component } from 'react'; class R..

함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = '리액트'; return {name}; } export default App; 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것 함수형 컴포넌트의 장점 ..

자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다. 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성할 수 있다. arr.map(callback, [thisArg]) 함수를 설명하자면 callback : 새로운 배열의 요소를 생성하는 함수이며 해당 파라미터에 들어갈 것은 다음과 같다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 var numbers = [1,2,3,4,5]; var processed = numbers.map(function(num{ return..

이벤트란 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위를 의미 이러한 이벤트를 처리하는 것을 이벤트 핸들링 ⚡ 이벤트를 사용할 때 주의 해야 할 점 이벤트 이름은 카멜 표기법으로 작성 ex) onclik → onClick , onkeyup → onKeyUp 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣었지만 리액트에서는 함수 형태의 객체로 전달 DOM 요소에만 이벤트를 설정할 수 있다. div, button, input 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 이벤트 종류 리액트에서 지원하는 이벤트 종류는 다음과 같습니..

자바스크립트 라이브러리로 오직 View만 신경 쓰는 라이브러리 → 지속적으로 데이터가 변화하는 대규모 애플리케이션 만드는 것 원래라면 변경된 상황을 보통 View를 변형 시켜주는데 계속 View에 데이터가 쌓이다 보니 애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능이 떨어질 수 있다 이것을 페이스북에서 고안한 방법은 기존 View를 날리고 처음부터 새로 렌더링 하는 방법이다. 이렇게 하면 애플리케이션 구조가 매우 간단하고 작성해야 할 코드 양도 많이 줄어듦 하지만 DOM은 느리기 때문에 웹 브라우저에서 CPU 접유율도 크게 증가할 것이고 메모리도 많이 사용하는데 이것을 해결 하기 위해 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 한 것이 React이다. Comp..