공부 기록

[React] 라이프사이클(Lifecycle)에 대해서

React Component의 라이프사이클(Lifecycle)이란?컴포넌트가 생성 - 업데이트 - 제거되는 과정을 의미한다. React에서는 컴포넌트가 이 과정을 통해 초기화되고 데이터가 변경될 때 다시 렌더링되며 필요할 때 제거된다. 라이프사이클은 각각의 단계에서 특정 메서드를 호출하여 필요한 작업을 수행할 수 있게 한다.주로 클래스형 컴포넌트에서 사용했으나 React 16.8 이후로 함수형 컴포넌트에서 Hooks를 통해 라이프사이클을 처리할 수 있게 되었다.React 라이프사이클은 컴포넌트가 언제 생성되고 업데이트되고 제거되는 지를 이해하는 데 매우 중요하다. React Lifecycle 단계React 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있다.마운트 (Mount) : 컴포넌트가 처음 D..

[React] 함수형 컴포넌트와 클래스형 컴포넌트

React에서 컴포넌트는 사용자 인터페이스를 구축하는 기본 블록을 말한다.컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다. 1. 함수형 컴포넌트 (Functional Component)자바스크립트 함수로 정의된 컴포넌트를 말한다.특징상태(state)와 생명주기 메서드가 없었으나 React 16.8에서 도입된 Hooks를 사용하여 함수형 컴포넌트에서도 상태 관리와 생명주기 관련 기능을 사용할 수 있다.코드가 더 간결하고 이해하기 쉽다.사이드 이펙트 없이 순수 함수처럼 사용될 수 있다.this 키워드를 사용하지 않는다.컴포넌트 로직을 분리하기 쉽고 테스트가 용이하다.메모리 사용이 더 효율적이다.예시import React from 'react';const MyComponent = (prop..

React.memo 어떠한 컴포넌트를 React.memo 처리를 해주면 그 컴포넌트가 렌더링될 때마다 Prop Check를 통해 props의 변화가 있는 경우에만 렌더링을 하도록 해준다. props의 변화가 없을 경우에는 이전에 이미 렌더링된 내용을 재사용하여 불필요한 컴포넌트 렌더링을 줄여준다. const Student = ({ name, age, address }) => { return ( {name} {age} {address} ); }; 다음과 같은 컴포넌트일 경우 name, age, address 중 변화가 있다면 렌더링하고 세 개의 props 전부 변화가 없다면 해당 컴포넌트를 렌더링하지 않고 재사용한다. React.memo에서 memo는 memoization을 뜻하기 때문에 [React] M..

useContext React는 대개 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 data를 전달하는 구조이다. App의 규모가 작으면 props로 충분하지만 규모가 커지면 필요없는 상위 컴포넌트들이 하위 컴포넌트들에게 props를 전달해주기 위해 props를 가지고 있어야 되고 props의 이름을 수정하게 된다면 일일이 다 수정해줘야 하므로 유지보수하기 힘들고 복잡해진다. 또한 테마나 언어와 같은 전역적인 data 같은 경우 모든 컴포넌트가 이 data를 갖고 있어야 하므로 단계별로 전달해야하는 props로만 data를 관리하는 건 어렵다. 이를 해결하기 위해 Context API를 사용하는데 Context는 App 안에서 전역적으로 사용되는 data들을 여러 컴포넌트들이 쉽게 공유할 수 있는 ..

useReducer React Hooks의 하나로서 useState와 같이 state를 생성하고 관리할 수 있는 hook이다. 여러 개의 하위 값을 포함하는 복잡한 state를 관리할 때 useState 대신에 useReducer를 쓰면 관리 및 유지보수 하기 좋다. useReducer는 Reducer, Dispatch, Action 이 세 가지로 이루어져 있다. Reducer는 Dispatch가 보낸 Action의 내용대로 state를 직접 수정하는 주체이고, Dispatch는 Reducer에게 state를 수정할 방식(Action)을 보내는 주체이고, Action은 Dispatch가 보낸 state를 수정할 방식을 담고 있는 메시지이다. 사용법 1. useReducer const [value, dis..

useCallback React Hooks 중 하나로서 useMemo와 같이 Memoization 기법으로 컴포넌트 성능을 최적화시키는 방법이다. useMemo나 memoization을 모른다면 아래의 링크를 통해 꼭 보고 오자! [React] Memoization과 useMemo 사용법 useMemo React Hooks 중에 하나로서 컴포넌트 성능 최적화를 위해 사용한다. 성능 최적화를 위해 사용하는 Hooks에는 useCallback도 있다. [React] useCallback 사용한 성능 최적화 useCallback React Hooks 중 하나로서 mi-dairy.tistory.com useCallback는 첫 번째 인자로 들어간 "콜백함수 그 자체"를 memoization 한다. 즉 콜백함수를..

useMemo React Hooks 중에 하나로서 컴포넌트 성능 최적화를 위해 사용한다. 성능 최적화를 위해 사용하는 Hooks에는 useCallback도 있다. [React] useCallback 사용한 성능 최적화 useCallback React Hooks 중 하나로서 useMemo와 같이 Memoization 기법으로 컴포넌트 성능을 최적화시키는 방법이다. useMemo나 memoization을 모른다면 아래의 링크를 통해 꼭 보고 오자! [React] 성능 최적화를 위 mi-dairy.tistory.com useMemo에서 Memo는 Memoization을 뜻하는데 이때 Memoization이란 동일한 값을 리턴하는 코드를 반복적으로 호출해야 할 때 제일 처음 호출했을 때 해당 값을 메모리에 저장..

useRef의 변수 관리 저장공간으로써 사용하는 방법은 아래의 링크를 통해서 보면 된다. [React] useRef는 언제 왜 사용할까? useRef useRef는 함수형 컴포넌트 내에서 사용하며 React Hooks 중에 하나이다. 사용법 useRef를 사용하기 위해선 먼저 다음과 같이 import를 해주어야 useRef 사용이 가능하다. import { useRef } from 'react'; 이렇 mi-dairy.tistory.com 이번에는 useRef를 통해 DOM 요소에 직접 접근하는 방법을 알아볼 것이다. 사용법 const ref = useRef(value); 위의 코드를 통해 ref에는 객체가 반환되게 되는데 그때 반환된 객체를 다음과 같이 태그의 ref 속성으로 넣어주기만 하면 우리는 쉽..

useRef useRef는 함수형 컴포넌트 내에서 사용하며 React Hooks 중에 하나이다. 사용법 useRef를 사용하기 위해선 먼저 다음과 같이 import를 해주어야 useRef 사용이 가능하다. import { useRef } from 'react'; 이렇게 import 된 useRef는 코드에서 다음과 같이 사용된다. const ref = useRef(value); 이때 ref 에는 객체가 반환되게 되는데 그때 반환된 객체는 다음과 같이 생겼다. { current: value } 다음과 같이 useRef의 인자로 넣어준 초기값은 ref 객체 내의 current에 저장되게 된다. 또한 ref 객체는 언제든지 수정이 가능하여 원하는 값으로 바꿔줄 수 있다. const ref = useRef("v..

Redux란? Redux는 JavaScript 상태 관리 라이브러리라 JavaScript든 React든 잘 어울린다. 초기 설정 JavaScript에서 Redux를 사용하려면 따로 설정할 게 없다. React에서 Redux를 사용하려면 index.js에 App.js를 Provider 컴포넌트로 감싸 앱의 다른 컴포넌트에서 store를 사용할 수 있도록 해야한다. import { Provider } from "react-redux"; import store from "./store"; // state가 저장되어 있는 store 파일 위치 ReactDOM.render( , document.getElementById("root") ); 메소드 useSelector() : state 데이터 읽기 useSelec..