[React] '리액트를 다루는 기술' 스터디_2주차 (Hooks)

 

목차

• Hooks
• 컴포넌트 스타일링

 

 

 

학습주제

• 8장. Hooks

 

 

💡 Hooks

• 클래스형 컴포넌트의 state관리와 Life cycle method 기능을 제공해 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는 기능이다. 
• Hooks의 사용으로 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결해 준다. 

 

 

useState

• • 가장 기본적인 Hook으로 상태 변수와 상태 업데이트 함수를 반환
  • 함수형 컴포넌트에서 상태 관리를 하기 위해 컴포넌트 코드를 클래스 형태로 변환할 필요가 없어 매우 편리하다.
  • 하나의 useState 함수는 하나의 상태 값만 관리할 수 있다. 

 

useEffect

• • 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook. 
  • 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태
  • 컴포넌트가 화면 맨 처음 렌더링 될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어줌
    • 사내 BO에서 타이머 기능 구현할 때 사용함
  • 특정 값이 변경될 때만 호출하고 싶은 경우 useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어준다. 
  • 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶은 경우 Cleanup 함수를 반환한다.
    • 페이지 전환시, 페이지 이동시 기존에 있던 state 값을 그대로 유지하는데, 값을 유지하지 않고 초기화시키고 싶을 때 사용함

 

useReducer

• • useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트하고 싶을때 사용하는 Hook.
  • 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다. 

 

useMemo

• 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식
• 컴포넌트 내부에서 발생하는 연산 최적화할 수 있음

 

useCallback

• useMemo와 비슷하게 렌더링 성능 최적화해야 하는 상황에 사용하는 함수
•  컴포넌트가 리렌더링 될 때마다 새로운 함수를 생성하여 자원 낭비하는 것을 막아줌
• useCallback의 두번째 파라미터에 빈 배열을 넣어주면 컴포넌트가 렌더링될 때 만들었던 함수를 재사용하게 되며 배열 안에 상태 값을 넣으면 그 값이 업데이트 될 때 새로 만들어진 함수를 사용함.

 

useRef

• 클래스형 컴포넌트의 ref 기능과 동일
• useRef를 이용해 DOM Element에 직접 접근 가능하다. 

 

 

📌 매뉴얼에서 함수형 컴포넌트와 Hooks를 사용할 것을 권장하고 있다.

 

 

 

💡 컴포넌트 스타일링

• styled-components
  • React 여러가지 css 방법 중 가장 최근에 나와 널리 쓰이는 방식이며 앞으로 책 예제에 이 방식으로 쓰이므로 사용할 것을 권장한다. 
  • 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다.
  • 하나의 파일에 논리와 디자인이 모두 포함되어 컴포넌트의 코드 파악이 용이하다. 

 

 

 

 

 

 

※ 출처 『리액트를 다루는 기술 (개정판)』