본문 바로가기
반응형

React

 (16)
리액트 뽀개기 - useCallback useCallback useCallback은 지난번 포스팅했던 useMemo와 비슷한 Hook이다. useMemo포스팅 useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 재사용하고자 할 때 사용한다. ▶ useCallback 사용법 import { useCallback } from 'react'; //상단에 추가 useCallback 사용 시에도 첫번째 파라미터에는 함수를 두번째 파라미터에는 의존성 배열을 넣어준다. 배열의 요소값이 변경될 때만 첫번째 파라미터의 함수가 호출된다. ▶ useCallback 사용예 const add = () => x + y; 컴포넌트 내에 이 함수가 있다면 해당 컴포넌트가 렌더링될 때마다 새로운 함수가 생성된다. const add..
리액트 뽀개기 - useRef useRef 리액트 프로젝트에서도 간혹 DOM을 직접 선택해야 하는 상황이 발생할 수 있는데 이때 useRef라는 Hook함수를 사용한다. ▶언제 useRef를 사용하는가? JavaScript를 사용할 때에는 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector함수를 사용해서 DOM을 선택한다. 리액트 프로젝트에서도 간혹 DOM을 직접 선택해야하는 상황이 발행할 수 있는데 예를 들어서 특정 엘리먼트의 크기를 가져온다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해야하는 경우가 있다. 그럴 때, 리액트에서는 ref라는 것을 사용하는데 함수형 컴포넌트에서는 useRef라는Hook함수를 사용한다. ▶ useRef 사용예 i..
리액트 뽀개기 - useEffect useEffect useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook함수이다. ▶ useEffect 사용법 import { useEffect } from 'react'; //상단에 추가 useEffect 사용 시 첫번째 파라미터에는 어떻게 연산할지 정의하는 콜백함수를 두번째 파라미터에는 의존성 배열을 넣어준다. 배열의 요소값이 변경될 때만 콜백 함수를 다시 호출하도록 한다. 만약 두번째 파라미터를 생략한다면 컴포넌트가 리렌더링될 때마다 useEffect함수가 호출된다. ▶ useEffect 사용예 useEffect(() => { console.log('마운트될 때만 실행된다.'); }, []); useEffect(() => { console.log(nam..
리액트 뽀개기 - useState useState 가장 기본적인 Hook으로 함수형 컴포턴트에서 상태를 관리할 수 있게 해준다. ▶언제 useState를 사용하는가? 클래스형 컴포넌트 class CountButton extends Component { state = { count : 0, }; setCount(num) { this.setState({ count : num, }); } render() { const { count } = this.state; return ( You clicked { count } times { this.setCount( count + 1 ); }}> Click Here! ) } } 함수형 컴포넌트 function CountButton() { const [ count, setCount ] = useState(..
리액트 뽀개기 - useMemo useMemo 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 방법을 알아보자 ▶언제 useMemo를 사용하는가? function Component() { const value = getValue(); return (값 : {value}); } function getValue() { return 1; } 위 예제를 보면 Component가 렌더링될 때마다 value라는 변수가 초기화된다. 따라서 getValue() 함수는 반복적으로 호출되는데 만약 getValue() 함수가 무거운 일을 하는 함수라면 굉장히 비효율적일 수 있다. 이때 useMemo를 사용하면 Component가 렌더링될 때 memorize된 함수를 재사용하는 동작을 거친다. useMemo는 처음에 계산된..
리액트 뽀개기 - immer 라이브러리 immer 라이브러리 리액트 소스에서 자주 보게 되는 produce!!. 과연 produce가 무엇인지 알아보자. produce라는 것은 리액트의 불변성 관리를 위해 immer 라이브러리를 사용할 때 불려지는 이름이다. 리액트에서는 배열이나 객체를 변경해야 할 때 직접 수정하면 안되고 불변성을 지켜주면서 변경해야 한다. ▶ 리액트의 불변성 관리 const object = { a: 1, b: 2 }; //나쁜예 object.b = 3; //좋은예 const newObject = { ...object, c: 3 } 배열도 push, splice 등의 함수를 사용하거나 항목을 직접 수정하면 안되고 contact, filter, map 등의 함수를 사용해서 새로운 배열을 만들어 사용해야 한다. const boo..
리액트 뽀개기 - 얕은비교 shallowEqual 리액트 소스를 보다보면 shallowEqual이라는 함수를 자주 보게 된다. shallowEqual이 기존 === 와 다른 점이 무엇인지 살펴보자. import shallowEqual from 'shallow-equal'; const obj = { name: 'park' }; const mylist = [ 1, 2, 3, obj ]; const list1 = [ 1, 2, 3, obj ]; const list2 = [ 1, 2, 3, { name: 'park' }]; mylist === list1 //false ---------- ① shallowEqual(mylist, list1); //true ---- ② shallowEqual(list1, list2); //false ----..
리액트 뽀개기 - 비동기 함수 비동기 함수 ▶기존 자바스크립트 비동기 함수 사용 function work1(onDone) { setTimeout(() => onDone('작업1 완료!'), 100); } function work2(onDone) { setTimeout(() => onDone('작업2 완료!'), 200); } function work3(onDone) { setTimeout(() => onDone('작업3 완료!'), 300); } function urgentWork() { console.log('긴급 작업'); } //실제 비동기 함수를 사용하는 예 work(function (msg1) { console.log('done after 100ms: ' + msg1); work(function (msg2) { console..
반응형

티스토리툴바