State란?
각 컴포넌트가 가지고 있는 저장 공간을 말한다.
-
props로 넘기는 값을 변경하기 위해 사용된다. (즉, props 값은 변경 불가능)
-
state를 이용하여 상태가 변경되면, state를 가진 컴포넌트는 랜더링된다. (새로고침)
이제, state의 형태를 보자.
const [value, setValue] = useState();위의 형태는 불변임으로 암기!
여기서, value는 현재 값이고 setValue는 값을 변경하는 함수이다.
state개념을 사용하여 값을 변경하고, 랜더링을 하면 웹화면에 변경된 값이 출력된다. 이때, state에 저장된 값은 계속 기억되고 일반 변수는 초기화된다는 점을 잘 기억해야 한다.
Hook
훅 함수에는 대표적으로 5가지가 있다.
- useState
- useEffect
- useMemo
- useCallback
- useRef
이 중 가장 많이 쓰이는 건 1,2번이고 나머지는 코드를 짜면서 효율성을 위해 사용하는 함수들이다.
1번은 앞에서 설명했으니 넘어가고 2번 부터 정리해보자.
useEffect.
무한 렌더링 방지!
보통 서버에서 데이터를 받아오면 그 값을 화면에 출력하기 위해 렌더링을 한다. 즉, 새로고침을 한다는 이야기인데 렌더링을 하는 순간 변수에 담은 데이터가 초기화 되므로 일단, state를 이용해서 데이터를 담아야 한다. 이때, 데이터가 변경되면 렌더링이 되어 처음부터 다시 코드가 실행되고, 코드가 실행되다가 데이터 관련 코드가 있다면 또 렌더링 되고... 스택오버플로우가 발생하여 결국은 제대로 함수가 실행되지 못하는 상황에 빠지게 된다. 이 상황을 방지하기 위해서 useEffect함수를 사용하는 것이다.
useEffect(() => {
함수 내용..
},[의존성배열]);useEffect의 기본 형태는 위의 코드와 같다. 중요한 점은 의존성 배열이 들어간다는 점이다. 이렇게 함수를 사용하면, 1. 딱 한번만 실행하고 다음부터는 실행이 되지 않고 넘어가게 된다.
또한, 의존성배열 안에 내가 감시할 변수를 넣어서 2. 무언가 변화가 될때만 실행되게끔 사용할 수도 있다.
useMemo.
연산된 값을 기억.
useMemo는 복잡한 값을 기억할 때 사용하는 함수이다. useMemo는 함수를 감싸는 함수이고 잘 사용되지는 않는다. 실전에서 코드를 짤 때 조금 실행이 느린 곳을 찾고 그 때 활용한다.
useCallback
함수를 기억.
위의 Memo와의 차이점은 콜백 함수는 함수 자체를 기억하는 데 있다.
const 기억 = useCallback( () => fn, [deps])fn은 기억하려고 하는 함수이고 두번째 인자인 값이 바뀌기 전까지 fn함수를 반환한다.
useRef
저장 공간 관리!
useRef는 렌더링 시 초기화 되는 변수와 달리 리렌더링 될 때 정보를 저장할 수 있는 함수이다. 특이점은 새로고침해도 리렌더링 되지 않는다는 점과, 각각의 컴포넌트에 로컬로 저장된다는 점이다.
ps.. hook 함수가 나오고 살짝 흐름을 놓친 탓에 복습이 와르르 밀려버렸다. 복습과 정리는 꼭 하루안에 끝내기로 다짐해본다... 그래도 계속 본 탓일까, 생소한 개념이 살짝은 머릿속에 있는 기분이다.
