210330_TIL(React Hook)

✅Toy 문제 insertionSort(삽입 정렬)

정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴하는 문제였다.

생각보다 위에 문제만 읽어보면 굉장히 쉬울 것 같은 느낌의 문제였다.

이 문제를 풀면서 삽입 정렬에 대한 개념을 정확히 알 수 있었다.

삽입 정렬에 대해서 간단히 얘기하자면 한 번에 한 항목씩 정렬된 배열을 작성하는 것이다.

푸는 방식은 앞에 있는 데이터들이랑 비교해서 수가 적으면 앞으로 정렬되는 것이다.

하지만 어드밴스트 문제가 나의 생각을 폭파 시켰다.

함수의 두 번째 인자로 callback 함수로 받아서 리턴 값을 기준으로 요소를 정렬하는 것이었다.

이것은 결국 못 풀고 래퍼런스 코드로 공부했다.

 

✅React Hooks

Hooks는 리액트 v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다.

스프린트 리뷰에서 라이브 코딩으로 같이할 수 있게 해 주셔서 만들면서 이해했다.

useState는 가변적인 상태를 지니게 있을 수 있게 해 준다.

현재의 state 값과 이 값을 업데이트하는 함수를 제공해준다. ex) [item, setItem], [value, setValue]

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

스프린트에서는 fetch()를 예를 들어주셨다. 코드로 보면 더 이해가 편하다.

이 외에도 useContext, useRef, useMemo, useCallback, useReducer 등 많았다.

위에 종류는 천천히 공부해보려고 한다.😅

🍒Remember

---

🤷‍♀️React Hooks를 왜 배워?

'필요한 것만 Hook 해서 사용하자'라는 뜻이 있다고 한다.

 

🤷‍♀️왜 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔서 쓰는 거지?

클래스형 컴포넌트에 최신 기술들이 효과적으로 적용되지 않았다.

그리고 클래스 컴포넌트의 장점인 state 사용, life cycle을 직접 다루는 기능을 사용을 못했는데, 그 부분을 보완하기 위해 나온 것이 Hook이라고 한다. 그리고 React 개념에 보다 직관적인 API를 제공하고, 상태에 관련된 로직을 재사용하기 쉽게 만든다고 한다.

클래스 컴포넌트와 Hook을 사용한 코드를 비교해보면 Hook을 사용한 코드가 가독성이 좋고, 코드의 길이도 짧고 간결하게 사용할 수 있다고 한다.

 

🍒More Study

---

✅Hooks 개념 복습하기

✅정렬 알고리즘

 

 

 

🍉내일 HA (☞ﾟヮﾟ)☞  파이팅!