React hooks in action 2~3

🤓 2장 useState 훅으로 컴포넌트 상태 관리하기

• 애플리케이션의 UI는 렌더링 시점의 현재 데이터 (상태 = state) 를 나타내야함

• hook = 리액트에서 컴포넌트 내의 값을 추적하고 상태와 UI를 동기화 하기 위해 제공하는 몇가지 함수

• 리액트는 상태와 UI가 동기화 되도록 보장함

• useState를 호출하면 값과 갱신 함수를 돌려 받기 때문에 변수가 아닌 useState로 상태를 관리함

	const [ selectedRoom, setSelectedRoom ] = useState(initialValue);

- selectedRoom = 리액트가 현재 값을 첫 번째 원소에 대입
- setSelectedRoom = 갱신 함수
- (initialValue) = 초깃값

• 리액트가 처음 컴포넌트를 실행 할 때 useState는 초깃값을 배열의 첫 번째 요소로 대입함

• 리액트는 UI가 이전 버전과 다른지 확인 하고 갱신을 일괄 처리하고 스케줄링 하며, 효율적인 DOM 개신 방법을 결정하고, DOM을 처리함

• 상태 값이 여럿인 경우, useState를 여러 번 호출 할 수 있음

클래스 컴포넌트 방식

class BookablesList extends React.Component {
 constructor (props) {
  super(props);
  
  this.state = {
   bookableIndex: 1,
   group: "Rooms"
  };
 }
}

• 클래스를 쓸 경우 생성자 안에서 객체로 상태를 설정함
• 상태를 갱신하기 위해 (ex.이벤트 핸들러) 변경을 원하는 내용이 포함된 객체를 전달하면서 this.setState를 호출함

handleClick (index) {
 this.setState({
  bookableIndex: index
 });
}

• 리액트는 setState에 전달된 객체를 기존 상태와 병합함 -> bookableIndex 프로퍼티는 변경되지만 group 프로퍼리는 그대로 남음

함수 컴포넌트 방식

const [bookableIndex, setBookableIndex] = useState(1);

setBookableIndex(3);

• 리액트는 1을 3으로 치환함
• 자바스크립트 객체를 상태로 저장하려면 주의 해야함 -> 갱신 함수가 기존 객체를 새로운 객체로 완전히 대체하기 때문

function BookableList () {
 const [state, setState] = useState({
  bookableIndex: 1,
  group: "Rooms"
 });
}

• 변경된 bookableIndex 프로퍼티만 포함하는 객체를 사용해 setState 갱신 함수를 호출하면 group 프로퍼티가 사라짐

function handleClick (index) {
 setState({
  bookableIndex: index
 });
}

• useState 훅에 객체를 사용해야 하는 경우, 새 프로퍼티 값을 설정하려면 이전 객체의 모든 프로퍼티를 복사해야 함

function handleClick (index) {
 setState({
  ...state,
  bookableIndex: index
 });
}

• 스프레드 연산자인 ...state를 통해 이전 상태의 모든 프로퍼티를 새 상태로 복사해야함

초깃값으로 함수를 useState에 전달하기

• 컴포넌트에게 레거시 시스테므로부터 복잡한 데이터 문자열이 전달되고, 필요한 정보만 추출해야할 경우

function untangle (aFrayedKnot) {
 return nugget;
}

function ShinyComponent ({tangledWeb}) {
 const [shiny, setShiny] = useState(untangle(tangledWeb));
}

🤓 3장 useReducer 훅을 사용해 컴포넌트 상태 관리하기

• reducer 함수 = 여러 상태 값을 항상 함께 갱신해야만 하거나 상태 갱신 로직이 지나치게 흩어져 있어서 따라가기 어려운 경우 상태 갱신을 대신 관리하는 함수

• dispatch 함수 = 액션을 리듀서에게 디스패치 하기 위한 함수 -> 리듀서에게 어떤 액션을 수행할지 전달함

• 여러가지 갱신 함수(setIsLoading, setError, setPosts 등) 를 호출 해야하는 경우 리액트는 useReducer 훅이라는 더 깔끔한 대안을 제공함

• 리듀서를 활용하면 상태에 영향을 미치는 명확한 액션을 통해 상태 변경을 중앙 집중식으로 잘 정의해 관리할 수 있음

• 리듀서는 액션을 사용해 이전 상태로부터 새 상태를 생성함 -> 서로 연관된 여러 상태를 포함할 수 있는 좀 더 복잡한 갱신을 더 쉽게 지정할 수 있음

• 리액트가 제공하는 useReducer 훅을 통해 컴포넌트의 초기 상태를 지정하고 현재 상태에 접근하며 상태를 갱신하고 재 렌더링을 촉발 할 수 있음

• 명확하게 정의된 액션을 디스패치 하면 상태 변경을 따라가기 쉽고, 컴포넌트가 여러 이벤트에 대한 응답으로 상태와 상호 작용하는 방식을 이해하기 쉬워짐

리듀서를 사용해 상태 갱신하기

let count = 0;

function reducer (state, action) {
 if (action === 'inc') {
  return state + 1;
 }
 if (action === 'dec') {
  return state - 1;
 }
 return state;
}

count = reducer(count, 'inc');
count = reducer(count, 'inc');
count = reducer(count, 'dec');

• 리듀서는 증가와 감소 액션을 처리하고 그 외의 액션이 들어오면 변경하지 않은 카운터 값을 반환함

• 컴포넌트의 상태와 리듀서를 리액트가 관리하게 하려면 useReducer 훅을 호출 후 useReducer에게 리듀서와 초기 상태를 전달 하면 됨

• useReducer는 현재 상태와 디스패치 함수를 포함하는 배열을 반환함

const [state, dispatch] = useReducer(reducer, initialState);