React Hooks

조건부 렌더링

 If Else Statement 

'isAudult면 AdultComponent 컴포넌트를 리턴하고 아니라면 NormalComponent 컴포넌트를 리턴해라' 라는 코드이다. 

 

 Ternary Operator 

if else와 같다.

 

 && Operator 

앞에있는 조건이 참일때만 <AdultComponent /> 컴포넌트를 리턴해주고 false이면 아무것도 리턴하지 않는다. 

 

 || Operator 

postTitle 변수에 값이 들어있다면 postTitle를 렌더링하고, 빈스트링이거나 null이거나 값이 없다면 'no title'를 리턴한다.

 

Props

Properties의 줄임말로 상위 컴포넌트(App)에서 하위 컴포넌트(Welcome)에 정보(데이터)를 넘겨준다.

 Object Destructuring 

Props를 분해시켜서 Property에 바로 접근하여 코드를 간결하게 만들 수 있다.

 

Props == Object
imageUrl, name, count == Property

 

 Props.children 

children 데이터 안에 This is Home Page라는 div태그가 들어간다.

children이라는 prop는 모든 리액트 컴포넌트에 기본적으로 들어가있다. 

 

 

React Hooks

 useState() hook 

State는 컴포넌트의 상태를 저장하고, re-render 사이사이에 값이 변하지 않도록 기억한다.

값이 변했을때는 컴포넌트가 다시 그러지도록 re-rentering을 트리거한다.

- argument : 초기값(0)

- [value, setter] 배열을 리턴한다.

    value == 현재값, setter == 값을 업데이트 해주기 위한 함수

 

 

setter 함수(setCount)는 비동기적이기 때문에 호출을 여러번 반복했을때 setcount가 1인 상태에서 여러번 호출될 수 있다.

setCount가 호출되는 시점에 count를 가져와서 버그없이 업데이트해주기 위해 (prev) => prev + 1 라는 setter의 콜백함수를 활용해줘야한다.  

 

 useEffect() hook 

React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업을 “side effects”(또는 짧게 effects)라고 한다.

왜냐하면 이것은 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업이기 때문이다.

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다.

useState가 두개있을때 2번째 argument로 [count]를 넣어주면 count가 바뀌었을 때만 실행된다.

만일, Component 가 처음 마운트 됐을 때만 실행시키고 싶을때는 빈 배열을 넣어준다.

 

Cleanup Function

useEffect는 대상 state가 새로 나타날 때(mount)될 때 실행이 되고, Cleanup Function는 대상 state가 사라질 때 (unmount)될 때 실행이 된다.

 

 useCallback() hook 

memoizedCallback은 a와 b에 변경이 생겼을때만 실행된다.
useEffect만 썼을 때와 실행 결과는 같지만 useEffect 안에서 하는 실행이 많아질 수록 복잡해지고 길어지므로 유지보수가 어렵다.

useEffect는 실행만 해주고 useCallback에서 실제 해야하는 것을을 선언해주면 코드가 분리되고 명시적으로 코드를 짤 수 있다.

 

 

 useMomo() hook 

randomized 는 rerender클릭 시 매번 컴포넌트가 리렌더링 되므로 이렇게 불필요할때에도 호출하여서 자원이 낭비된다.

useMemo 라는 Hook 함수를 사용하면 성능을 최적화 할 수 있다.

Memo 는 "memoized" 를 의미하는데, 이는, 이전에 계산 한 값을 재사용한다는 의미를 가지고 있다.

 

useCallback : 특정 함수 재사용
useMemo: 특정 결과값 재사용

 

useCallback & React.memo 를 이용해 컴포넌트 렌더링 최적화 작업을 해주어야만 성능이 최적화된다. 

 

React.memo

이 함수를 사용한다면, 컴포넌트에서 props가 변동이 있을때만(리렌더링이 필요한 상황) 리렌더링을 하도록 설정해준다.

컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수이다. 리액트에서 제공해주는 기본 함수이다.

 

 Custom hook 

커스텀 훅은 여러 컴포넌트에서 로직을 재활용하고 싶을 때 쓸 수 있다.

 

https://react.vlpt.us/basic/21-custom-hook.html

21. 커스텀 Hooks 만들기 · GitBook