useCallback useMemo와 상당히 비슷한 함수로, 주로 렌더링 성능을 최적화할 때 사용합니다. 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다. 보통의 방식으로 하게 되면 컴포넌트가 리렌더링될 때마다 함수들이 새로 생성됩니다. 대부분의 경우 이 방식이 문제를 일으키지 않으나, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화 해주는 것이 좋습니다. useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야합니다. onChange처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링될 때 단 한번..
Hooks 리액트 v16.3에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. useState 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. import React, { useState } from "react"; const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재 0을 넣어주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미입니다. 이 함수가 호출되면 배열을 반환하는데요. 그 배열의 첫 번째 원소는 상..
모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 컴포넌트의 수명은 페이지에 랜더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝납니다. 리액트로 플젝을 하다보면 처름으로 렌더링 할 때 어떤 작업을 하거나 컴포넌트 업데이트 전후로 어떤 작업을 처리할 수도 있고, 또 불필요한 렌더링을 방지해야할 때도 있습니다. 이때 컴포넌트의 라이프사이클 메서드를 사용합니다. 참고로 라이프 사이클 메서드는 클래스형 컴포넌트에섬나 사용가능 합니다. 라이프사이클 메서드의 이해 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프사이클은 총 세 가지, 마운트, 업데이트, ..
자바스크립트의 map()함수 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 컴포넌트 배열을 렌더링할 때는 key값 설정에 항상 주의해야합니다. 또 key 값은 언제나 유일해야 합니다. 중복이 된다면 오류가 발생할 겁니다. 마땅한 key값이 없다면 map의 index를 사용해도 되지만 권장하지는 않습니다. 가급적 key값으로 사용될만한 데이터를 사용하세요 상태안에서 배열을 변형할 때는 배열에..
ref: DOM에 이름 달기 리액트에서는 HTML의 요소인 id를 사용할 수 없다. 왜냐하면 id는 고유한 값인데 컴포넌트를 여러 번 사용할 경우 id의 고유성을 잃기 때문이다. 하지만 그렇다고 id 자체를 사용하지 못하게 된다면 그것 또한 문제이기 때문에 리액트에서는 ref라는 기능을 사용한다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 위와 같은 문제에 대처 가능하다. 이렇게 id처럼 쓸 수 있으니 다른 라이브러리나 프레임워크와 함께 잘 사용이 가능하다. 그렇다면 ref는 언제 사용하면 좋은걸까? DOM을 꼭 직접적으로 건드려야 할 때 입니다. 보통은 아래와 같은 경우에 자주 사용된다. 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 ..
import React, { Component } from "react"; class EventPractice_class extends Component { state = { username: "", message: "" }; handleChange = e => { this.setState({ [e.target.name]: e.target.value }); }; hendleClick = () => { alert(this.state.username + " : " + this.state.message); this.setState({ message: "", username: "" }); }; render() { return ( 이벤트 연습 확인하기 ); } } export default EventPractic..
State 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모컴포넌트에서 바꿔줘야 합니다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다. 클래스형 컴포넌트의 state 새로운 컴포넌트를 만들어 다음과 같이 코드를 작성해 보세요. import React, { Component } from "react"; class Counter extends Component { c..
컴포넌트란? 컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 함수형 컴포넌트이며, 다른 하나는 클래스형 컴포넌트입니다. 클래스형 컴포넌트와 함수형이 어떻게 구성되어 있는지 다음 코드로 살펴봅시다. 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; 두 코드의 역할은 똑같습니다. 다만 클래스..