별코딩 React Hook강의
본 내용은 별코딩님의 React Hook강의를 참고하여 작성하였습니다.
useState
useState는 react에서 사용하는 가장 기본적은 Hook이다.
state란 무엇일까?
컴포넌트가 가질 수 있는 상태를 말한다.
useState로 간편하게 state를 생성하고 업데이트시켜준다.
const [state, setState] = useState(초기값);useState의 인자에 state의 초기값을 넣어주면 state와 setState를 배열형태로 리턴해준다. 현재 사용값은 state에 들어있고 state를 변경하고 싶을때는 setState함수를 이용해서 간편하게 변경 시켜줄 수 있다.
여기서 state의 변수명은 원하는대로 변경해줘도 되지만 setState는 변경한 state의 이름 앞에 set을 붙이고 카멜케이스로 적는게 일반적이다.
(코드 오른쪽에 버튼눌러서 왼쪽으로 밀면 결과값이 보입니다)
이렇게 state를 변경하면 화면은 리렌더링이 된다. 여기서 주의할 점은 state를 변경하고 싶을때는 꼭 setState로 변경해줘야한다는 것이다.
setState에 콜백함수를 넣는 함수형 업데이트도 가능하다.
<button onClick={() => {
// 기존 업데이트 방식
setNum(num + 1)
// 함수형 업데이트 방식
setNum((currentNumber) => currentNumber + 1 );
}}>1 더하기</button>기존 업데이트 방식은 배치 업데이트 방식으로 처리된다
여기서 만일 setNum(num + 1)가 3번 반복되면 어떻게 될까?
<button onClick={() => {
setNum(num + 1)
setNum(num + 1)
setNum(num + 1)
}}>1 더하기</button>배치 업데이트는 명령된 내용들을 모아서 한번만 반영되기 때문에 결과적으로 num은 1만 더해진다.
그렇다면 함수형 업데이트도 같은 결과가 나올까?
<button onClick={() => {
setNum((currentNumber) => currentNumber + 1 );
setNum((currentNumber) => currentNumber + 1 );
setNum((currentNumber) => currentNumber + 1 );
}}>1 더하기</button>함수형 업데이트는 이 명령들 한번에 모아서 순차적으로 하나씩 실행이 된다. setState의 인자에는 현재의 state가 들어온다. 함수가 한번 실행되고 반영된 state가 두번째 함수의 인자로 들어가게 되는 것이다.
react는 왜 이런 배치성 업데이트를 하는걸까?
react 환경은 렌더링이 많이 일어나는게 결코 좋은 환경은 아니다. 렌더링이 잦으면 이건 곧 성능의 이슈가 있다는 말과 동일하다. 불필요한 렌더링을 피하기위해 요청사항을 한꺼번에 모아서 한번만 처리하는게 렌더링을 줄일 수 있는 방법이고 이러한 이유로 인해 react에서는 배치 업데이트 방식을 사용한다.
useEffect
화면에 처음 렌더링되거나 리렌더링 되거나 unmount(사라짐)시 특정작업을 실행시켜주고 싶을때 사용한다.
useEffect 훅은 인자로 콜백함수를 받는다
useEffect(() => {
// 작업
})
useEffect(() => {
// 작업
}, [value])위의 예시에서 첫번째 형태로 콜백함수만 받는 경우 렌더링(+리렌더링)이 될때마다 함수가 실행된다.
예시에서 두번째를 보면 두번째 인자로 배열을 받을 수도 있다. 이 배열을 의존성 배열이라고 하는데 배열에 값을 넣으면 첫 렌더링 때와 그 값이 바뀔 때만 useEffect를 실행한다. 만일 두번째 인자로 빈 배열을 넣어주면 화면에 첫 렌더링 될때만 실행된다.
num값이 렌더링이 될 때마다 매번 실행되는 useEffect를 만들어 보았다. 두번째 인자로 받은 배열에 num값을 넣으면 num값이 바뀔때마다 state는 렌더링을 할것이고 useEffect는 num이 렌더링되었으니 안에 콜백함수가 실행되는 것이다
clean up
useEffect는 clean up이라는 과정이 필요할 때가 있는데 그럴경우 return값으로 정리를 해주는 콜백함수를 넣어주면 된다. 이 경우 리렌더링, 언마운트시 return의 콜백함수가 실행된다.
먼저 Timer라는 컴포넌트를 만들고 App.js에서 showTimer가 true일때 Timer컴포넌트가 실행된다.
Timer컴포넌트가 실행되면 timer함수가 실행될 것이고 콘솔에 1초마다 메세지가 찍힐것이다. 두번째 인자로 빈배열[]을 넣어줘서 컴포넌트가 종료되기 전까지 콜백함수가 계속 실행될 것이다. Timer컴포넌트가 실행이 종료되면(언마운트되면) timer함수도 종료되고 콘솔에 '타이머가 종료되었습니다'라는 메세지가 찍힌다. 이런식으로 useEffect의 clean up과정이 이루어진다.
사실 처음 강의들었을땐 무슨 말인지 이해가 안되었는데 하나하나 정리하면서 글로 적으니 왜 이렇게 작동하는지 조금은 알게되었다.
