Week10(React)

8.1 useState

 

const [value, setValue] = useState(0);

value =>  상태값

setValue => 상태를 설정하는 함수

 

상태값이 변경될 때마다 리렌더링 되어야 한다면 반드시 useState Hook을 사용해야 한다. 또한 value 값을 변경할 때는 반드시 setValue 함수를 통해 변경해주어야 한다. 다른 방식으로 value의 값을 수정해서는 안된다.

---

8.2 useEffect

 

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

 

useEffect(() => {
	console.log('!!!!!!!!');
},[])

 컴포넌트가 화면에 맨 처음 렌더링 될 때만 useEffect에서 설정한 함수를 실행시키고 싶다면 두번째 파라미터로 위와 같이 빈배열을 주면 된다. 만약 특정한 value의 값이 변화할 때만 useEffect에서 설정한 함수를 실행시키고 싶다면 두번째 파라미터의 배열 속에 그 value를 넣어주면 된다. 

---

8.3 useReducer

 

리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다. useReducer 함수에 첫번째 파라미터에는 리듀서 함수를 넣고, 두번째 파라미터에는 해당 리듀서의 기본값을 넣어준다. 여기서 state는 현재 가리키고 있는 상태, dispatch는 액션을 발생시키는 함수.

 

useReducer의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것.

후에 Redux 혹은 mobx를 사용할 때 이 개념이 중요해진다. 여기서는 간단하게 보고 넘어감.

---

8.4 useMemo

 

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화해준다. 

 

const getAverage = numbers => {
    ~~~~~
}

const avg = useMemo(() => getAverage(list), [list]);

이렇게 하면 list의 값이 변할 때만 Rerendering 된다.

---

8.5 useCallback

 

useCallback은 useMemo와 상당히 비슷한 함수이다. 렌더링 성능을 최적화해야 하는 상황에서 사용하며, 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다. 

 

const onChange = useCallback(e => {
	setNumber(e.target.value);
},[]); 
//컴포넌트가 처음 렌더링 될 때만 함수 생성(두번째 파라미터로 빈 배열을 넣었기 때문)

const onInsert = useCallback(() => {
	~~~
    ~~~
},[number, list]);
//number 혹은 list가 바뀌었을 때만 함수 생성

숫자, 문자열, 객체처럼 일반 값을 재사용 => useMemo

함수를 재사용 => useCallback

---

8.6 useRef

 

useRef는 함수형 컴포넌트에서 ref를 쉽게 사용하기 위한 Hook

---