원글 페이지 : 바로가기
1. Class형 컴포넌트 생명주기 (1) 개요 리액트 생명주기를 알아야 useEffect 등 return문이 왜 그렇게 쓰였는지 알 수 있다. 컴포넌트가 생기고 죽을 때 어떤 과정이 생기는지 왜 그러는지 파악 (2) 생명주기(=컴포넌트 중심 라이브러리의 집합체) [Mount] -> [Update] -> [Unmount] 모든 컴포넌트에는 각각 생명주기가 존재한다. 각 생명주기에 맞는 매서드들이 있다. (3) 생명주기 1. Mount (1) 개요 컴포넌트가 생성될 때 (2) 매서드 1. constructor 컴포넌트가 맨 처음 만들어질 때 호출 생성자 2. getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 매서드 마운트 될 때, 업데이트(리렌더링)될 때도 호출 3. render 최초 마운트가 준비완료되면 호출되는 즉, 렌더링 하는 매서드 컴포넌트를 DOM에 마운트하기 위해 사용 4. componentDidMount 컴포넌트가 브라우저에 표시된 후 호출되는 매서드 2. Update (1) 개요 컴포넌트가 갱신될 때 (리렌더링) 리렌더링이란 1. state, 2. props, 3. 부모 컴포넌트 가 변경이 될 때를 말한다. +4. (클래스형 컴포넌트에서) 강제적으로 업데이트 될 때 (2) 매서드 1. getDerivedStateProps 마운트 과정에서도 동일하게 호출되었던 메서드 부모 컴포넌트로부터 props를 전달 받을 때 state 값을 일치시키는 역할 2. shouldComponentUpdate 리렌더링 여부 판단(함수 호출 결과 – true(리렌더링 O)/false(리렌더링 X)) 함수형 컴포넌트에서 memo, useMemo, useCallback이 열할을 대신한다 3. render 변경사항이 반영 다 되어 준비완료되면 호출되는(렌더링) 매서드 컴포넌트를 DOM에 마운트하기 위해 사용 4. getSnapshotBeforeUpdate 컴포넌트에 변화가 일어나기 직전 DOM의 상태를 지정 componentDidUpdate 함수에서 사용하기 위한 스냅샷형태 데이터 5. componentDidUpdate 컴포넌트 업데이트 작업 완료 후 호출 3. Unmount (1) 개요 컴포넌트가 DOM에서 제거되는 시점 (2) 매서드 1. componentWillUnmount 컴포넌트가 사라지기 전 호출되는 매서드 useEffect의 return과 동일 2. 함수형 컴포넌트 생명주기 (1) 개요 리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수 Hook은 class 안에서는 동작하지 않고, class없이 React를 사용할 수 있게 함 (2) 생명주기 (3) 리액트 훅을 도입한 목적 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점 라이프사이클 메서드에는 관련 없는 로직이 자주 섞여 들어가는데, 이로인해 버그가 쉽게 발생하고, 무결성을 쉽게 해친다 (4) 훅 사용규칙 1. 최상위 에서만 Hook을 호출해야 한다 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안 됨 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장 2. 리액트 함수 텍스트컴포넌트에서만 Hook을 호출해야 한다 일반 JS함수에서는 Hook을 호출해서는 안된다. 1. useState 상태를 관리, [state이름, setter이름] 순으로 반환 받아서 사용 const [state, setState] = useState(initialState); 2. useEffect 화면에 렌더링이 완료된 후에 수행되며componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것 useEffect(() => {}); // 렌더링 결과가 실제 돔에 반영된 후마다 호출
useEffect(() => {}, []); // 컴포넌트가 처음 나타날때 한 번 호출
useEffect(() => {}, [의존성1, 의존성2, ..]); // 조건부 effect 발생, 의존성 중 하나가 변경된다면 effect는 항상 재생성됩니다. 3. useContext Context API를 통해 만들어진 Context에서 제공하는 Value를 가져올 수 있다 const value = useContext(MyContext); 4. useReducer useState의 대체 함수로 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다 컴포넌트 바깥에 로직을 작성할 수 도 있고, 심지어 다른 파일에 작성한 후 불러와서 사용할 수도 있다 reducer란 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 const [state, dispatch] = useReducer(reducer, initialArg, init); 5. useRef 특정 DOM 선택할때 주로 쓰이며 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지 const refContainer = useRef(null); 6. useMemo 메모이제이션된 값을 반환. 이미 연산 된 값을 리렌더링 시 다시 계산하지 않도록 한다. 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산 한다. 의존성 배열이 없는 경우 매 렌더링 때마다 새 값을 계산. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 7. useCallback 메모이제이션 된 콜백을 반환합니다. useMemo와 유사하게 이용되며 ‘함수’에 적용. 의존성이 변경되었을때만 변경됩니다. 때문에 특정 함수를 새로 만들지 않고 재사용가능하게 함. const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
); 3. 클래스 컴포넌트 VS 함수형 컴포넌트 1. 일반적인 차이 클래스형 state, lifeCycle 관련 기능사용 가능하다. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다. 임의 메서드를 정의할 수 있다. 함수형 state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨] 메모리 자원을 함수형 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다. 2. 선언 방식 클래스형 import React, {Component} from ‘react’;
class App extends Component {
render() {
const name = ‘react’;
return
}
}
export default App; class 키워드 필요 Component로 상속을 받아야한다. render() 메소드가 반드시 있어야한다. 함수형 import React from ‘react’;
import ‘./App.css’;
function App() {
const name = ‘react’;
return
}
export default App; 3. 기능 : state 사용차이 클래스형 constructor 안에서 this.state 초기 값 설정 가능 constructor 없이 바로 state 초기값을 설정할 수 있다 클래스형 컴포넌트의 state는 객체 형식 this.setState 함수로 state의 값을 변경할 수 있다 함수형 함수형 컴포넌트에서는 useState 함수로 state를 사용 useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태 두 번째 원소는 상태를 바꾸어 주는 함수 props 사용차이 props 컴포넌트의 속성을 설정 할 때 사용하는 요소 읽기 전용 컴포넌트 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다. 수정 되는 것은 state 클래스 형 this.props로 통해 값을 불러올 수 있다. 부모 객체의 키 값, 자식 props 활용 함수형 props를 불러올 필요 없이 바로 호출 할 수 있다. 참조 사이트 1. https://velog.io/@minbr0ther/React.js-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4life-cycle-%EC%88%9C%EC%84%9C-%EC%97%AD%ED%95%A0 2. https://adjh54.tistory.com/43#1)%20%ED%95%A8%EC%88%98%ED%98%95%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%20%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-1 3. https://velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8#%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-