[포스코x코딩온] 웹 풀스택 과정 7기 9주차 금요일 회고
포스코 코딩온 웹 풀스택 과정 7기 9주차 금요일 회고
React
지난 강의에 이어 이번엔 ref와 Life cycle, Hook에 대해 전체적으로 다뤘다.
ref
ref는 DOM을 선택할 때 사용한다.
리액트에서 컴포넌트에 id를 지정하면 해당 컴포넌트를 재사용할 때 id가 중복되는 문제가 발생한다.
이를 해결하기 위해 ref를 사용한다.
ref는 refference의 준말로, 전역적으로 작동하지 않고 컴포넌트 내부에서만 선언하고 사용한다.
컴포넌트를 재사용해도 해당 컴포넌트 내부에서만 동작하므로, 중복되지 않는다.
- DOM 요소에 접근할 때 보통 DOM을 직접 사용해야 할 때 사용한다.
클래스형 컴포넌트에서는 기본 기능으로 제공되지만, 함수형 컴포넌트에서는useRefHook을 사용해야 한다.
컴포넌트에refprop 으로 지정해서 사용한다. - 로컬 변수로 사용 로컬 변수로도 사용할 수 있다.
렌더링이 되어도 값이 유지되며, 값이 변경되어도 렌더링이 되지 않는다.
Life Cycle
Life Cycle은 컴포넌트가 생성되고 사라질 때까지의 과정을 의미한다.
- Mount: 컴포넌트가 생성될 때(DOM 생성 후 렌더될 때까지)
- Update: 컴포넌트가 수정될 때(상태값이 변경되서 리렌더될 때)
- Unmount: 컴포넌트가 제거될 때(렌더된 컴포넌트가 사라질 때)
함수형 컴포넌트
함수형 컴포넌트에서는 useEffect Hook을 사용해 Life Cycle을 관리한다.
기본적으로 콜백함수만 인자로 넣을 경우 컴포넌트가 렌더링 될 때, Mount와 Update 시에 호출된다.
두 번째 인자로 배열을 넣으면 해당 배열에 들어있는 상태값이 변경될 때, Update 시에 호출된다.
만약 배열이 비어있으면 변하는 값이 없다는 뜻이므로, Mount 시에만 호출된다.
인자의 함수가 반환하는 값(함수)은 Unmount 시에 호출된다.
클래스형 컴포넌트
- Mount:
constructor->render->getDerivedStateFromProps->componentDidMount순으로 호출된다. - Update:
getDerivedStateFromProps->shouldComponentUpdate->componentDidUpdate순으로 호출된다. - Unmount:
componentWillUnmount가 호출된다.
대부분 componentDidMount, componentDidUpdate, componentWillUnmount 메서드를 사용해서 Life Cycle을 관리한다.
Hooks
Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있게 해주는 기능이다.
기존 React에서는 클래스형 컴포넌트에서만 상태 관리를 할 수 있었다.
Hook이라는 개념이 생겨나 함수형 컴포넌트에서도 상태 관리와 Life Cycle을 사용할 수 있게 되었다.
주의
Hook은 함수형 컴포넌트 내에서만 사용할 수 있다.
또 Hook은 최상위 단계에서만 호출해야 한다.
즉, 조건문, 반복문, 중첩된 함수 등에서는 Hook을 호출할 수 없다.
useState
useState 함수는 상태 관리에 사용되며, 상태값과 그 값을 변경할 수 있는 함수가 담긴 배열을 반환한다.
가장 기본적인 Hook으로, 함수형 컴포넌트가 가변 상태를 가질 수 있게 해준다.
useEffect
useEffect 함수는 부작용(side effect)을 관리하며 Life Cycle을 사용할 수 있게 해준다.
함수를 넣으면 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있다.
함수와 함께 배열을 넣으면 배열에 들어있는 상태값이 변경될 때만 함수가 호출된다.
만약 배열이 비어있으면, 바뀌는 것이 없으므로 컴포넌트가 처음 렌더링 될 때만 함수가 호출된다.
업데이트 직전에 실행하고 싶은 작업은, 함수의 반환값으로 넘겨주면 된다.
해당 작업은 cleanup 함수로 불리며, 컴포넌트가 사라질 때 실행된다.
useRef
useRef 함수는 보통 DOM을 선택할 때 사용한다.
초기값을 인자로 받으며, 반환된 객체의 current 속성에 선택한 DOM이 담긴다.