React-Hooks

🔥 useState()

컴포넌트가 가질 수 있는 상태
컴포넌트의 상태를 생성하고 간편하게 업데이트 할 수 있게 해준다.
현재 상태값은 state에, state를 변경하고 싶을 때는 setState 함수를 이용.
state가 변경이 되면 해당 컴포넌트는 자동으로 재렌더링 된다.

const [state, setState] = useState(초기값)
setState(변경)

💡Lazy Initial State
state의 초기값을 가져올 때 무거운 작업을 해야 한다면 (ex. 오래 걸리는 계산..) 컴포넌트가 렌더링 될 때마다 그 작업 또한 반복하게 될 것이다.

const heavyWork = () => {
	console.log('엄청 엄청 무거운 작업!!!!');
    return 12345
}

const [number, setNumber] = useState(heavyWork)

state의 초기값이 처음 렌더링 시에만 불려지게 하고 싶다면 초기값을 넣는 인자에 콜백 함수를 넣어 주고 리턴값으로 무거운 작업을 하는 함수를 불러주면 된다.
heayWork는 최초 렌더링 할때만 실행 되게 될 것이다.

const [number, setNumber] = useState(() => {heavyWork})

✨ useEffect()

mount(화면에 첫 렌더링), update(다시 렌더링), unmount(화면에서 사라질때)되었을 때 특정 작업을 하는 코드를 실행시켜주고 싶다면 useEffect를 사용한다.

1. useEffect(() => {//작업})
2. useEffect(() => {//작업}, [value])

1. useEffect의 인자로 하나의 콜백함수만 받는 형태
   : 렌더링 될때마다 실행
2. useEffect의 첫번째 인자로 콜백함수, 두번째 인자로 배열(dependency array)를 받는 형태
   : 화면에 첫 렌더링 될때 실행, value의 값이 바뀔때 실행
   만약 빈 배열이 주어진다면 첫 렌더링시에만 실행된다.

CleanUp
정리하고 싶은 함수(시간 or 이벤트 리스너)가 있다면 return 뒤에 정리하는 작업을 처리해주면 된다.

useEffect(() => {
	// 구독...
    return () => [
    	// 구독 해지..
    }
}, []);

🪨 useRef()

함수형 컴포넌트에서 useRef를 불르면 ref객체를 반환해준다.
초기값으로 설정해준 값은 ref객체의 current값으로 저장되며 값은 언제든 변경해줄 수 있다.
반환된 ref의 값은 컴포넌트의 전 생애주기동안 유지된다. 즉, 리렌더링되더라도 unmount 될때까지 값을 그대로 유지할 수 있다.

const ref = useRef(value)
ref = { current: 'value'}

1. ref는 state와 비슷하게 값을 저장할 때 사용한다. 변경시 렌더링을 발생시키지 말아야하는 값을 다룰때 편리하다.

• state의 변화 -> 렌더링 -> *컴포넌트 내부 변수들 초기화
• ref의 변화 -> no 렌더링 -> 변수들의 값이 유지됨
• state의 변화 -> 렌더링 -> 그래도 ref의 값은 유지됨

💡 Ref와 변수의 차이!

리렌더링 시 컴포넌트 안에서는 초기에 작성해두었던 선언들이 다시 발생한다. 그러면 변수에 작성해두었던 초기값도 다시 선언되어 리렌더링을 거치면서 초기값으로 돌아가게 되는 것이다. 하지만 Ref는 초기값으로 다시 돌아가지 않아 그대로 유지 된다.

2. DOM 요소에 접근

document.querySelector()과 비슷한 기능.
접근하고자 하는 태그에 ref속성을 넣어주게 되면 접근가능하다.

📄 useContext()

React로 만들어진 앱은 여러개의 컴포넌트들로 구성이 되어있다. 최상위 컴포넌트에서 시작해서 트리형태로 뻗어나가는데 데이터 흐름은 위에서 아래로 즉, props를 통해 부모에서 자식에게 전달이 되는 형태이다.

이때 전역적으로 필요한 데이터(ex. User, Theme, Language)를 props로 일일이 단계적으로 넘겨주어야한다면 굉장히 복잡한 과정을 거쳐야 할 것이다. 유지보수 또한 마찬가지이다.

이러한 문제를 해결하기 위해 나타난 것이 Context로 앱안에서 전역적으로 사용하는 data를 여러 컴포넌트들이 공유할 수 있는 방법을 제공해주는 것이다.
Context는 props로 데이터를 일일이 전달하지 않아도 트리 안에 어디에 위치해 있던 상관없이 해당 데이터에 접근할 수 있다.

🔩 Prop Drilling
props를 오로지 하위 컴포넌트로만 전달하는 용도로 쓰이는 component를 거치면서 React component 트리의 한 부분에서 다른 부분의 데이터로 전달하는 과정.

props전달이 너무나도 많은 과정을 거치게 된다면 나중에 추적이 어려워지고 유지보수에 좋지 않다.

과도한 prop drilling을 피하기 위한 방법은 다양하지만 그 중 하나로 useContext를 사용할 수 있다.

다만 Context는 다양한 레벨에 있는 컴포넌트들에게 전역적인 데이터를 전달하기 위함이 주된 목적이기 때문에 꼭 필요할 때만 사용하는 것이 좋다.
Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있고 Prop drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합성)이 더 좋은 방법일 수 있기 때문이다.

💽 useMemo()

우리가 사용하는 Component, 그 중 함수형 컴포넌트는 말그대로 함수이기 때문에 렌더링이 될 경우 모두 내부의 변수가 초기화된다. state와 props의 변화로 잦은 렌더링이 발생하게 되면 내부의 무거운 작업이 있을 경우 프로그램에게 부담이 커질 것이다.

Component 성능을 최적화하기 위한 hook으로는 useMemo와 useCallback이 있다.
그 중 useMemo의 Memo는 Memoization을 뜻한다. 즉, 함수가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램의 실행 속도를 빠르게 할 수 있다.

useMemo는 첫번째 인자로 콜백함수(memoization해줄 값을 계산해서 리턴해줄 값)를 두번째 인자로 의존성 배열을 받는다. 콜백함수에는 자주 쓰이는 값을 memoization 해주는 것이다.

const value = useMemo(() => {
	return calculate();
}, [item]);

useMemo도 자주 사용하게 되면 오히려 성능이 악화될 수 있기 때문에 적절하게 사용하는 것이 중요하다.

📞 useCallback()

useCallback은 useMemo와 비슷하지만 인자로 전달한 콜백함수 그 자체를 memoization 하는 것이다.
useCallback은 첫번째 인자로 memoization 해줄 콜백함수, 두번째 인자로는 의존성 배열을 받는다.

useCallback(() => {
	return value;
}, [item])