📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 영상 1
• 참고 영상 2
• 참고 영상 3
• 참고 자료 1 - Hooks
• 참고 자료 2 - setState, useEffect
• 참고 자료 3 - useEffect, useLayoutEffect
• 참고 자료 4 - useEffect, useLayoutEffect
• 참고 자료 5 - re-rendering
• 참고 자료 6 - Hooks
• 참고 자료 7

📜 Chapter

custom hook

Troubleshooting

useCallback

useDeferredValue

useDidMountEffect

useEffect

useEvent

useLayoutEffect

useMemo

useRef, ref, forwardRef

useReducer

useState

useImperativeHandle

React hooks

• React는 16.8버전부터 component 상태와 component 생명 주기를 관리할 수 있는 API인 Hook을 제공한다.

• Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트처럼 component 내부에 상태를 저장할 수 있고 component 생명주기에 관여할 수 있다.

• React Hooks는 기존 클래스 컴포넌트만 가지고 있던 여러 기능을 지원하기 때문에 함수 컴포넌트를 클래스 컴포넌트처럼 사용할 수 있다.

• 클래스 컴포넌트와는 다르게 함수 컴포넌트는 모듈화가 쉬워서 React 팀은 앞으로 컴포넌트를 제작할 때 함수 컴포넌트로 만들 것을 권장하고 있다.

• React Hooks는 ReactConf 2018에서 발표된, class 없이 state를 사용할 수 있는 새로운 기능이다.

• Hooks는 클래스 기반 컴포넌트의 장점 (예를 들면 내부 state와 생명 주기 메서드)을 함수형 컴포넌트로 가져오려는 React의 시도이다.

• Functional component에서 state을 가질 수 있게 해준다.→ 함수형 프로그래밍 스타일이 된다.

• React 16.8 이전 버전에서는 함수형 component에서는 상태를 관리할 수 없었다.

• React 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

1. Render

• DOM Tree를 구성하기 위해 각 element의 스타일 속성을 계산하는 과정