21/02/15 기업협업 프로젝트가 시작되었다.
1,2차 프로젝트에는 기능구현에 우선을 두어 익숙한 react class형 컴포넌트와 sass를 적용해 작업하였지만 기업협업 프로젝트부터 web develop trend를 따라 가보자 한다.
우선적으로 react hooks와 react context apis를 학습해 깔끔한 state관리를 시도하고 시간적 여유가 있다면 javascript -> typescript 으로 refactoring도 시도해볼 예정이다.
첫번째로 Hook을 먼저 학습하고 정리해보자
Hook 소개
Hook은 props, state, context, refs, licecycle과 같은
react개념에 좀 더 직관적인 API를 제공한다.
컴포넌트 사이에서 상태와 관련된 로직을 재사용 가능하게
Hook을 사용하면 컴포넌트로부터 사용 관련 로직을 추상화 할 수 있다.
계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와주는데 이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉬워진다.
복잡한 컴포넌트들을 이해하기 쉽게
컴포넌트들은 componentDidMount, componentDidUpdate와 componentWillUnmount를 사용하면서 불필요항 로직이 포함될 수 있고 컴포넌트 재사용을 더욱 더 어렵게 만든다.
이것을 해결하기위해 Hook을 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있게 한다.
조금 더 예측 가능하도록 리듀서를 활용해 컴포넌트의 지역 상태값을 관리하도록 할 수 있다.
class는 어렵다.
Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만든다.
이러한 문제를 해결하기위해 Hook은 Class없이 React 기능들을 사용하는 방법을 알려준다.
사용법
이미지에서 보이는 useState가 바로 Hook이다
1. useState
Hook을 호출하여 funtion component에 추가하였다.
이 state는 class에서 state값을 설정해준것과 같이 리렌더딩 되어도 그대로 유지 된다.
class형에서 쓰였던 방식처럼 state와 setstate를 나누어 할 필요 없이 useState는 현재의 state와 이 값을 업데이트하는 함수를 쌍으로 제공한다.
const [count, setCount] = useState(0);
여기서 0은 초기값이며 count는 상태유지값, setCount는 그 값을 갱신하는 함수이다.
setState와 굉장히 유사하지만, 이전 state와 새로운 state를 합치지 않는다는 차이점이 있다.
2. useEffect
useEffect는 class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.
useEffect( () => {}, [count] )
명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.
기본적인 동작은 모든 렌더링이 완료된 후에 수행되지만, 어떤 값이 변경되었을 때만 실행되게 할 수도 있다.
위의 예제에서는 안에있는 count가 바뀔때마다 함수가 발동된다.
이 배열을 의존성 배열이라한다.(배열 안에 담긴 값들을 추적, 그때 마다 업데이트)
빈배열로 두게되면 componentDidMount와 같이 렌더 후 종료
배열이 없다면 업데이트된 값이 있을시마다 발동
배열안에 값이 있다면 그 값 업데이트시마다 발동으로
라이프사이클을 이해하여야하고 로직을 나누어서 하는 class형보다는 더 간편해진다.
이 두가지 사용에 충분히 익숙해진 다음 다른 종류의 Hook도 학습할 예정이다.
