React 공식문서와 함께

나는 최근에 리액트 공식문서를 따라하면서 간단한 tic-tac-toe 게임을 구현했다. 해당 문서에 제시된 코드엔 Square, Board, Game 컴포넌트가 있는데, Board와 Game은 클래스형으로 되어있었다. 그래서 이를 함수형으로 바꾸고자 한다!

React에서 Hook이란, 함수형 컴포넌트에서 사용되는, state와 관련된 기술들을 모아서 일컫는 말이다. 대표적으로 useState()와 useEffect()가 있는데 리액트 공식문서 HOOK를 읽으면서 정리해보았다.

프로젝트가 커질수록 컴포넌트의 렌더링을 최적화 하는 것은 중요하다. (안커도 중요겠지만.ㅋ) 렌더링 최적화와 같은 성능 관련 최적화는 사용자 경험에 큰 영향을 주기 때문에 hooks 위주로 알아보려고 한다.

고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다. 즉, 아래의 그림처럼 원래의 컴포넌트를 렌더링하면서 추가적인 기능을 포함시켜 새로운 컴포넌트를 반환하는데,